:root{
--control-size: calc(var(--form-input-height, 42px) * .4);
--control-gap-x: var(--space-3xs, .35rem);
--control-radius: var(--radius-s, .35rem);
--control-bw: var(--form-border-width, 1px);
--control-bc: var(--form-border-color, #e5e7eb);
--control-bg: var(--form-input-bg, #fff);
--control-active: var(--form-radio-active-color, #2563eb);
--control-ink: var(--form-icon-color, #fff);
--icon-scale: 70%;
--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='m14.914 4l-9.47 9.47L1.09 8.393L2.608 7.09l2.948 3.44L13.5 2.585z'/%3E%3C/svg%3E");
}
:is(.brxe-form, .brxe-brf-pro-forms) input[type="text"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="email"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="url"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="tel"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="search"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="password"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="number"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="date"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="datetime-local"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="month"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="week"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="time"],
:is(.brxe-form, .brxe-brf-pro-forms) select{
min-height: var(--form-input-height, 42px);
}
:is(.brxe-form, .brxe-brf-pro-forms) label {
margin-bottom: calc(var(--global-gutter-small)/2)!important;
}
:is(.brxe-form, .brxe-brf-pro-forms) input[type="file"] {
position: absolute;
opacity: 0;
width: 0.1px;
height: 0.1px;
overflow: hidden;
z-index: -1;
}
:is(.brxe-form, .brxe-brf-pro-forms) .choose-files {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--form-input-height, 42px);
padding: 0 1rem;
border: var(--control-bw) solid var(--control-bc);
border-radius: var(--control-radius);
background: var(--control-bg);
color: var(--form-color, #111);
cursor: pointer;
transition: all .15s ease;
font-size: inherit;
font-family: inherit;
text-decoration: none;
margin-bottom: 0 !important;
user-select: none;
}
:is(.brxe-form, .brxe-brf-pro-forms) .choose-files:hover {
border-color: var(--control-active);
background: color-mix(in srgb, var(--control-active) 5%, var(--control-bg));
}
:is(.brxe-form, .brxe-brf-pro-forms) .choose-files:focus,
:is(.brxe-form, .brxe-brf-pro-forms) input[type="file"]:focus + .choose-files {
outline: var(--form-focus-width, 2px) solid var(--form-focus-color, #2563eb);
outline-offset: var(--form-focus-offset, 2px);
box-shadow: var(--form-focus-ring);
border-color: var(--form-focus-color, #2563eb);
}
:is(.brxe-form, .brxe-brf-pro-forms) .file-result {
display: none;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border: var(--control-bw) solid var(--control-bc);
border-radius: var(--control-radius);
background: var(--control-bg);
margin-bottom: 0.5rem;
transition: all .15s ease;
}
:is(.brxe-form, .brxe-brf-pro-forms) .file-result.show {
display: flex;
}
:is(.brxe-form, .brxe-brf-pro-forms) .file-result .text {
flex: 1;
color: var(--form-color, #111);
font-size: 0.9em;
word-break: break-all;
}
:is(.brxe-form, .brxe-brf-pro-forms) .file-result .remove {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
background: var(--error);
border: var(--control-bw) solid var(--error);
border-radius: var(--control-radius);
color: #dc2626;
cursor: pointer;
transition: all .15s ease;
font-size: 0.8em;
min-height: auto;
margin: 0;
}
:is(.brxe-form, .brxe-brf-pro-forms) .file-result .remove:hover {
background: #dc2626;
color: white;
border-color: #dc2626;
}
:is(.brxe-form, .brxe-brf-pro-forms) .file-result .remove:focus {
outline: var(--form-focus-width, 2px) solid var(--form-focus-color, #2563eb);
outline-offset: var(--form-focus-offset, 2px);
box-shadow: var(--form-focus-ring);
}
:is(.brxe-form, .brxe-brf-pro-forms) .file-result svg {
width: 16px;
height: 16px;
stroke: currentColor;
margin-left: 0.25rem;
}
:is(.brxe-form, .brxe-brf-pro-forms) .form-group.file {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
:is(.brxe-form, .brxe-brf-pro-forms) .file-result.error {
border-color: #dc2626;
background: color-mix(in srgb, #dc2626 5%, var(--control-bg));
}
:is(.brxe-form, .brxe-brf-pro-forms) .file-result.error .text {
color: #dc2626;
}
:is(.brxe-form, .brxe-brf-pro-forms) .file-result.success {
border-color: #16a34a;
background: color-mix(in srgb, #16a34a 5%, var(--control-bg));
}
:is(.brxe-form, .brxe-brf-pro-forms) .file-result.success .text {
color: #16a34a;
}
:is(.brxe-form, .brxe-brf-pro-forms) input[type="checkbox"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="radio"]{
appearance: none;
inline-size: var(--control-size);
block-size: var(--control-size);
margin: 0;
padding: 0;
vertical-align: middle;
border: var(--control-bw) solid var(--control-bc);
background: var(--control-bg);
position: relative;
transition: background-color .15s, border-color .15s;
color: var(--form-color, #111);
flex-shrink: 0;
}
:is(.brxe-form, .brxe-brf-pro-forms) .form-group .options-wrapper {
display: flex;
gap: var(--space-xs);
&>li:has([type=radio]) {
align-items: center!important;
gap: 0.5rem!important;
label {
margin: 0!important;
}
}
}
:is(.brxe-form, .brxe-brf-pro-forms) input[type="checkbox"]{
border-radius: var(--control-radius);
}
:is(.brxe-form, .brxe-brf-pro-forms) input[type="checkbox"]:checked{
background: var(--control-active);
border-color: var(--control-active);
color: var(--control-ink);                
background-image: var(--checkbox-icon);
background-repeat: no-repeat;
background-position: center;
background-size: var(--icon-scale) var(--icon-scale);
}
:is(.brxe-form, .brxe-brf-pro-forms) input[type="checkbox"]:indeterminate{
background: var(--control-active);
border-color: var(--control-active);
color: var(--control-ink)!important;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: center;
background-size: 60% 2px;
}
:is(.brxe-form, .brxe-brf-pro-forms) input[type="radio"]{
border-radius: 50%;
}
:is(.brxe-form, .brxe-brf-pro-forms) input[type="radio"]:checked{
background: var(--control-active);
border-color: var(--control-active);
background-image: radial-gradient(circle, var(--control-ink) 0 50%, transparent 51%);
background-repeat: no-repeat;
background-position: center;
background-size: 52% 52%;
}
:is(.brxe-form, .brxe-brf-pro-forms) input[type="checkbox"]:is(:focus, :focus-visible),
:is(.brxe-form, .brxe-brf-pro-forms) input[type="radio"]:is(:focus, :focus-visible){
outline: var(--form-focus-width) solid var(--form-focus-color);
outline-offset: var(--form-focus-offset);
box-shadow: var(--form-focus-ring);
border-color: var(--form-focus-color);
}
:where(input, select, textarea, button, [role="button"], .button):is(:focus, :focus-visible){
outline: var(--form-focus-width) solid var(--form-focus-color);
outline-offset: var(--form-focus-offset);
box-shadow: var(--form-focus-ring);
}
:where(input, select, textarea, button, [role="button"], .button):focus:not(:focus-visible){
outline: none;
box-shadow: none;
}
@media (forced-colors: active){
:where(input, select, textarea, button, [role="button"], .button):is(:focus, :focus-visible){
outline: 2px solid CanvasText;
outline-offset: 2px;
box-shadow: none;
}
}
@media (prefers-contrast: more){
:where(input, select, textarea, button, [role="button"], .button):focus-visible{
outline-width: max(3px, var(--form-focus-width));
box-shadow: var(--form-focus-ring);
}
}
:is(.brxe-form, .brxe-brf-pro-forms) textarea {
resize: vertical;
max-width: 100%;
overflow: auto;
}
:is(.brxe-form, .brxe-brf-pro-forms) .message{
border-radius: var(--form-border-radius, .5rem);
}
:is(.brxe-form, .brxe-brf-pro-forms) button[type="submit"].sending,
:is(.brxe-form, .brxe-brf-pro-forms) input[type="submit"].sending{
gap: 8px;
}