@layer sfx.components { :is(.brxe-form, .brxe-brf-pro-forms) {
--sfx-form-input-height: var(--form-input-height, 42px);
--sfx-form-label-margin-bottom: var(--form-label-margin-bottom, 0.625rem);
--sfx-form-label-font-size: var(--form-label-font-size, 0.875rem);
--sfx-form-label-line-height: var(--form-label-line-height, 1.4);
--sfx-form-label-font-weight: var(--form-label-font-weight, 500);
--sfx-form-label-color: var(--form-label-color, var(--text, #111827));
--sfx-form-padding-block: var(--form-padding-block, 0.5rem);
--sfx-form-padding-inline: var(--form-padding-inline, 0.75rem);
--sfx-form-border-width: var(--form-border-width, 1px);
--sfx-form-border-color: var(--form-border-color, #e5e7eb);
--sfx-form-border-radius: var(--form-border-radius, 0.5rem);
--sfx-form-font-size: var(--form-font-size, 1rem);
--sfx-form-line-height: var(--form-line-height, 1.5);
--sfx-form-font-family: var(--form-font-family, inherit);
--sfx-form-font-weight: var(--form-font-weight, 400);
--sfx-form-letter-spacing: var(--form-letter-spacing, normal);
--sfx-form-input-bg: var(--form-input-bg, #ffffff);
--sfx-form-color: var(--form-color, var(--text, #111111)); --sfx-form-placeholder-font-family: var(--form-placeholder-font-family, var(--form-font-family, inherit));
--sfx-form-placeholder-font-weight: var(--form-placeholder-font-weight, var(--form-font-weight, 400));
--sfx-form-placeholder-letter-spacing: var(--form-placeholder-letter-spacing, var(--form-letter-spacing, normal)); --sfx-form-select-font-family: var(--form-select-font-family, var(--form-font-family, inherit));
--sfx-form-select-font-size: var(--form-select-font-size, var(--form-font-size, 1rem));
--sfx-form-select-font-weight: var(--form-select-font-weight, var(--form-font-weight, 400));
--sfx-form-select-line-height: var(--form-select-line-height, var(--form-line-height, 1.5));
--sfx-form-select-letter-spacing: var(--form-select-letter-spacing, var(--form-letter-spacing, normal));
--sfx-form-placeholder-font-size: var(--form-placeholder-font-size, var(--form-font-size, 0.875rem));
--sfx-form-placeholder-line-height: var(--form-placeholder-line-height, var(--form-line-height, 1.4));
--sfx-form-placeholder-color: var(--form-placeholder-color, #6b7280);
--sfx-form-options-gap: var(--form-options-gap, 0.75rem);
--sfx-form-option-row-gap: var(--form-option-row-gap, 0.25rem);
--sfx-form-radius-small: var(--form-radius-small, 0.35rem);
--sfx-form-focus-width: var(--form-focus-width, 2px);
--sfx-form-focus-color: var(--form-focus-color, var(--primary, #2563eb));
--sfx-form-focus-offset: var(--form-focus-offset, 2px);
--sfx-form-focus-ring: var(--form-focus-ring, none);
--sfx-form-radio-active-color: var(--form-radio-active-color, var(--primary, #2563eb));
--sfx-form-icon-color: var(--form-icon-color, #ffffff);
--sfx-form-icon-scale: var(--form-icon-scale, 70%);
--sfx-form-checkbox-icon: var(--form-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"));
--sfx-form-group-spacing: var(--form-group-spacing, 1.25rem);
--sfx-form-error-bg: var(--form-error-bg, var(--danger-bg, #fee2e2));
--sfx-form-error-color: var(--form-error-color, var(--danger-fg, #991b1b));
--sfx-form-error-font-size: var(--form-error-font-size, 0.75rem);
--sfx-form-error-margin-block-start: var(--form-error-margin-block-start, 0.5rem);
--sfx-form-error-padding-block: var(--form-error-padding-block, 0.5rem);
--sfx-form-error-padding-inline: var(--form-error-padding-inline, 0.75rem);
--sfx-form-error-border-radius: var(--form-error-border-radius, 0.5rem);
--sfx-form-error-triangle-size: var(--form-error-triangle-size, 6px);
--sfx-form-error-triangle-offset: var(--form-error-triangle-offset, 12px);
--sfx-form-error-triangle-color: var(--form-error-triangle-color, var(--form-error-bg, #fee2e2));
--sfx-form-file-remove-bg: var(--form-file-remove-bg, #fecaca);
--sfx-form-file-remove-border: var(--form-file-remove-border, #fecaca);
--sfx-form-file-remove-color: var(--form-file-remove-color, var(--danger, #dc2626));
--sfx-form-file-remove-hover-bg: var(--form-file-remove-hover-bg, var(--danger, #dc2626));
--sfx-form-file-remove-hover-color: var(--form-file-remove-hover-color, #ffffff);
--sfx-form-submit-padding-block: var(--form-submit-padding-block, 0.375rem);
--sfx-form-submit-padding-inline: var(--form-submit-padding-inline, 1rem);
--sfx-form-submit-border-width: var(--form-submit-border-width, 1px);
--sfx-form-submit-border-color: var(--form-submit-border-color, #e5e7eb);
--sfx-form-submit-border-radius: var(--form-submit-border-radius, 0.5rem);
--sfx-form-choose-files-padding-block: var(--form-choose-files-padding-block, 0);
--sfx-form-choose-files-padding-inline: var(--form-choose-files-padding-inline, 1rem);
--sfx-form-select-padding-inline-end: var(--form-select-padding-inline-end, 2.25rem); --sfx-form-transition: var(--form-transition, all .15s ease);
--sfx-form-placeholder-transition: var(--form-placeholder-transition, opacity .2s ease); --sfx-form-success-surface-fg: var(--form-success-surface-fg, var(--success, #16a34a));
--sfx-form-success-surface: var(--form-success-surface, color-mix(in srgb, var(--sfx-form-success-surface-fg) 5%, var(--sfx-form-input-bg)));
--sfx-form-error-surface-fg: var(--form-error-surface-fg, var(--danger, #dc2626));
--sfx-form-error-surface: var(--form-error-surface, color-mix(in srgb, var(--sfx-form-error-surface-fg) 5%, var(--sfx-form-input-bg))); --sfx-form-file-result-gap: var(--form-file-result-gap, 0.75rem);
--sfx-form-file-result-padding: var(--form-file-result-padding, 0.75rem);
--sfx-form-file-result-icon-size: var(--form-file-result-icon-size, 16px);
--sfx-form-submit-sending-gap: var(--form-submit-sending-gap, 8px); & input[type="text"],
& input[type="email"],
& input[type="url"],
& input[type="tel"],
& input[type="search"],
& input[type="password"],
& input[type="number"],
& input[type="date"],
& input[type="datetime-local"],
& input[type="month"],
& input[type="week"],
& input[type="time"],
& select {
min-height: var(--sfx-form-input-height);
}
& label {
margin-bottom: var(--sfx-form-label-margin-bottom) !important;
}
& .form-group {
& label {
font-size: var(--sfx-form-label-font-size);
line-height: var(--sfx-form-label-line-height);
text-transform: none;
font-weight: var(--sfx-form-label-font-weight);
color: var(--sfx-form-label-color);
} & :is(
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
select,
textarea
) {
padding-top: var(--sfx-form-padding-block);
padding-right: var(--sfx-form-padding-inline);
padding-bottom: var(--sfx-form-padding-block);
padding-left: var(--sfx-form-padding-inline);
border: var(--sfx-form-border-width) solid var(--sfx-form-border-color);
border-radius: var(--sfx-form-border-radius);
font-family: var(--sfx-form-font-family);
font-size: var(--sfx-form-font-size);
font-weight: var(--sfx-form-font-weight);
line-height: var(--sfx-form-line-height);
letter-spacing: var(--sfx-form-letter-spacing);
background-color: var(--sfx-form-input-bg);
color: var(--sfx-form-color);
box-sizing: border-box;
max-width: 100%;
} & select {
font-family: var(--sfx-form-select-font-family);
font-size: var(--sfx-form-select-font-size);
font-weight: var(--sfx-form-select-font-weight);
line-height: var(--sfx-form-select-line-height);
letter-spacing: var(--sfx-form-select-letter-spacing);
} & select:not([multiple]) {
padding-inline-end: var(--sfx-form-select-padding-inline-end);
}
& .options-wrapper {
display: flex;
gap: var(--sfx-form-options-gap);
&>li:has([type=radio], [type=checkbox]) {
display: flex;
align-items: center !important;
gap: var(--sfx-form-option-row-gap);
& label {
margin: 0 !important;
}
}
}
}
& ::placeholder {
font-family: var(--sfx-form-placeholder-font-family);
font-size: var(--sfx-form-placeholder-font-size);
font-weight: var(--sfx-form-placeholder-font-weight);
line-height: var(--sfx-form-placeholder-line-height);
letter-spacing: var(--sfx-form-placeholder-letter-spacing);
color: var(--sfx-form-placeholder-color);
transition: var(--sfx-form-placeholder-transition);
}
& :is(input, textarea):focus::placeholder {
opacity: 0;
}
& .bricks-button,
& button[type="submit"],
& input[type="submit"] {
box-sizing: border-box;
min-height: var(--sfx-form-input-height);
padding-top: var(--sfx-form-submit-padding-block);
padding-right: var(--sfx-form-submit-padding-inline);
padding-bottom: var(--sfx-form-submit-padding-block);
padding-left: var(--sfx-form-submit-padding-inline);
border: var(--sfx-form-submit-border-width) solid var(--sfx-form-submit-border-color);
border-radius: var(--sfx-form-submit-border-radius);
}
& button[type="submit"]:not(.bricks-button) {
display: inline-flex;
align-items: center;
justify-content: center;
} & input[type="file"] {
position: absolute;
opacity: 0;
width: 0.1px;
height: 0.1px;
overflow: hidden;
z-index: -1;
&:focus+.choose-files {
outline: var(--sfx-form-focus-width) solid var(--sfx-form-focus-color);
outline-offset: var(--sfx-form-focus-offset);
box-shadow: var(--sfx-form-focus-ring);
border-color: var(--sfx-form-focus-color);
}
}
& .choose-files {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--sfx-form-input-height);
padding: var(--sfx-form-choose-files-padding-block) var(--sfx-form-choose-files-padding-inline);
border: var(--sfx-form-border-width) solid var(--sfx-form-border-color);
border-radius: var(--sfx-form-radius-small);
background: var(--sfx-form-input-bg);
color: var(--sfx-form-color);
cursor: pointer;
transition: var(--sfx-form-transition);
font-size: inherit;
font-family: inherit;
text-decoration: none;
margin-bottom: 0 !important;
user-select: none;
&:hover {
border-color: var(--sfx-form-radio-active-color);
background: color-mix(in srgb, var(--sfx-form-radio-active-color) 5%, var(--sfx-form-input-bg));
}
&:focus {
outline: var(--sfx-form-focus-width) solid var(--sfx-form-focus-color);
outline-offset: var(--sfx-form-focus-offset);
box-shadow: var(--sfx-form-focus-ring);
border-color: var(--sfx-form-focus-color);
}
}
& .file-result {
display: none;
align-items: center;
gap: var(--sfx-form-file-result-gap);
padding: var(--sfx-form-file-result-padding);
border: var(--sfx-form-border-width) solid var(--sfx-form-border-color);
border-radius: var(--sfx-form-radius-small);
background: var(--sfx-form-input-bg);
margin-bottom: 0.5rem;
transition: var(--sfx-form-transition);
&.show {
display: flex;
}
& .text {
flex: 1;
color: var(--sfx-form-color);
font-size: 0.9em;
word-break: break-all;
}
& .remove {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
background: var(--sfx-form-file-remove-bg);
border: var(--sfx-form-border-width) solid var(--sfx-form-file-remove-border);
border-radius: var(--sfx-form-radius-small);
color: var(--sfx-form-file-remove-color);
cursor: pointer;
transition: var(--sfx-form-transition);
font-size: 0.8em;
min-height: auto;
margin: 0;
&:hover {
background: var(--sfx-form-file-remove-hover-bg);
color: var(--sfx-form-file-remove-hover-color);
border-color: var(--sfx-form-file-remove-hover-bg);
}
&:focus {
outline: var(--sfx-form-focus-width) solid var(--sfx-form-focus-color);
outline-offset: var(--sfx-form-focus-offset);
box-shadow: var(--sfx-form-focus-ring);
}
}
& svg {
width: var(--sfx-form-file-result-icon-size);
height: var(--sfx-form-file-result-icon-size);
stroke: currentColor;
margin-left: 0.25rem;
}
&.error {
border-color: var(--sfx-form-error-surface-fg);
background: var(--sfx-form-error-surface);
& .text {
color: var(--sfx-form-error-surface-fg);
}
}
&.success {
border-color: var(--sfx-form-success-surface-fg);
background: var(--sfx-form-success-surface);
& .text {
color: var(--sfx-form-success-surface-fg);
}
}
}
& .form-group.file {
display: flex;
flex-direction: column;
gap: 0.5rem;
} & input[type="checkbox"],
& input[type="radio"] {
appearance: none;
inline-size: calc(var(--sfx-form-input-height) * .4);
block-size: calc(var(--sfx-form-input-height) * .4);
margin: 0;
padding: 0;
vertical-align: middle;
border: var(--sfx-form-border-width) solid var(--sfx-form-border-color);
background: var(--sfx-form-input-bg);
position: relative;
transition: var(--sfx-form-transition);
color: var(--sfx-form-color);
flex-shrink: 0;
&:is(:focus, :focus-visible) {
outline: var(--sfx-form-focus-width) solid var(--sfx-form-focus-color);
outline-offset: var(--sfx-form-focus-offset);
box-shadow: var(--sfx-form-focus-ring);
border-color: var(--sfx-form-focus-color);
}
} & input[type="checkbox"] {
border-radius: var(--sfx-form-radius-small);
&:checked {
background: var(--sfx-form-radio-active-color);
border-color: var(--sfx-form-radio-active-color);
color: var(--sfx-form-icon-color);
background-image: var(--sfx-form-checkbox-icon);
background-repeat: no-repeat;
background-position: center;
background-size: var(--sfx-form-icon-scale) var(--sfx-form-icon-scale);
}
&:indeterminate {
background: var(--sfx-form-radio-active-color);
border-color: var(--sfx-form-radio-active-color);
color: var(--sfx-form-icon-color) !important;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: center;
background-size: 60% 2px;
}
} & input[type="radio"] {
border-radius: 50%;
&:checked {
background: var(--sfx-form-radio-active-color);
border-color: var(--sfx-form-radio-active-color);
background-image: radial-gradient(circle, var(--sfx-form-icon-color) 0 50%, transparent 51%);
background-repeat: no-repeat;
background-position: center;
background-size: 52% 52%;
}
} & textarea {
resize: vertical;
max-width: 100%;
overflow: auto;
} & .message {
border-radius: var(--sfx-form-border-radius);
} & .form-group .form-group-error-message {
position: relative;
width: 100%;
margin-block-start: var(--sfx-form-error-margin-block-start);
padding: var(--sfx-form-error-padding-block) var(--sfx-form-error-padding-inline);
background-color: var(--sfx-form-error-bg);
color: var(--sfx-form-error-color);
border-radius: var(--sfx-form-error-border-radius);
font-size: var(--sfx-form-error-font-size);
&::before {
content: "";
position: absolute;
top: calc(-1 * var(--sfx-form-error-triangle-size));
left: var(--sfx-form-error-triangle-offset);
border-left: var(--sfx-form-error-triangle-size) solid transparent;
border-right: var(--sfx-form-error-triangle-size) solid transparent;
border-bottom: var(--sfx-form-error-triangle-size) solid var(--sfx-form-error-triangle-color);
}
}
& button[type="submit"].sending,
& input[type="submit"].sending {
gap: var(--sfx-form-submit-sending-gap);
} & :where(input:not([type="file"]), select, textarea, button, [role="button"], .button):is(:focus, :focus-visible) {
outline: var(--sfx-form-focus-width) solid var(--sfx-form-focus-color);
outline-offset: var(--sfx-form-focus-offset);
box-shadow: var(--sfx-form-focus-ring);
}
& :where(input:not([type="file"]), select, textarea, button, [role="button"], .button):focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
} :where(.brxe-form, .brxe-brf-pro-forms) {
& .form-group {
display: flex;
flex-direction: column;
padding: 0 0 var(--sfx-form-group-spacing, 1.25rem);
width: 100%;
}
& .submit-button-wrapper {
width: auto;
margin-left: auto;
}
}
@media (forced-colors: active) {
:is(.brxe-form, .brxe-brf-pro-forms) :where(input:not([type="file"]), select, textarea, button, [role="button"], .button):is(:focus, :focus-visible) {
outline: 2px solid CanvasText;
outline-offset: 2px;
box-shadow: none;
}
}
@media (prefers-contrast: more) {
:is(.brxe-form, .brxe-brf-pro-forms) :where(input:not([type="file"]), select, textarea, button, [role="button"], .button):focus-visible {
outline-width: max(3px, var(--sfx-form-focus-width, 2px));
box-shadow: var(--sfx-form-focus-ring, none);
}
}
}