@layer sfx.components { :root {
--sfx-cg-gutter:      var(--cg-gutter, var(--container-padding-inline, var(--container-padding-horizontal, 1.5rem)));
--sfx-cg-content:     var(--cg-content, var(--max-screen-width, 1400px)); --sfx-cg-feature:     var(--cg-feature, 2100px);
--sfx-cg-feature-max: var(--cg-feature-max, 2450px);
--sfx-cg-gap:         var(--cg-gap, var(--grid-gap, var(--space-m, 1.5rem)));
} .content-grid {
display: grid;
row-gap: var(--sfx-cg-gap);
grid-template-columns:
[full-start] minmax(var(--sfx-cg-gutter), 1fr)
[content-start feature-start feature-max-start] minmax(0, calc(var(--sfx-cg-content) - 2 * var(--sfx-cg-gutter))) [content-end feature-end feature-max-end]
minmax(var(--sfx-cg-gutter), 1fr) [full-end];
}
.content-grid > * {
grid-column: content-start / content-end;
}
.content--feature,
.content--feature-max {
grid-column: content-start / content-end;
}
.content--full {
grid-column: full-start / full-end;
}
.content--full-safe {
grid-column: full-start / full-end;
padding-inline: var(--sfx-cg-gutter);
}
.content--full-safe > .inner {
max-width: calc(var(--sfx-cg-content) - 2 * var(--sfx-cg-gutter));
margin-inline: auto;
}
.content--full-safe > .inner--feature {
max-width: calc(var(--sfx-cg-feature) - 2 * var(--sfx-cg-gutter));
margin-inline: auto;
}
.content--full-safe > .inner--feature-max {
max-width: calc(var(--sfx-cg-feature-max) - 2 * var(--sfx-cg-gutter));
margin-inline: auto;
} [class*="content--split-"] {
--sfx-cg-split: var(--cg-split, 0.5);
grid-column: content-start / content-end;
display: grid;
grid-template-columns: 1fr;
gap: var(--sfx-cg-gap);
} .content--split-30-breakout { --sfx-cg-split: var(--cg-split, 0.3); }
.content--split-40-breakout { --sfx-cg-split: var(--cg-split, 0.4); }
.content--split-60-breakout { --sfx-cg-split: var(--cg-split, 0.6); }
.content--split-70-breakout { --sfx-cg-split: var(--cg-split, 0.7); }
@media (min-width: 768px) {
.content--split-md {
grid-column: content-start / full-end;
grid-template-columns:
minmax(0, calc((min(100vw, var(--sfx-cg-content)) - 2 * var(--sfx-cg-gutter) - var(--sfx-cg-gap)) * var(--sfx-cg-split)))
minmax(0, 1fr);
}
}
@media (min-width: 1024px) {
[class*="content--split-"] {
grid-column: content-start / full-end;
grid-template-columns:
minmax(0, calc((min(100vw, var(--sfx-cg-content)) - 2 * var(--sfx-cg-gutter) - var(--sfx-cg-gap)) * var(--sfx-cg-split)))
minmax(0, 1fr);
}
} @media (min-width: 768px) {
.content--split-md.reverse {
grid-column: full-start / content-end;
direction: rtl;
}
.content--split-md.reverse > * {
direction: ltr;
}
}
@media (min-width: 1024px) {
[class*="content--split-"].reverse {
grid-column: full-start / content-end;
direction: rtl;
}
[class*="content--split-"].reverse > * {
direction: ltr;
}
} @media (min-width: 2100px) {
.content-grid {
grid-template-columns:
[full-start] minmax(var(--sfx-cg-gutter), 1fr)
[feature-start feature-max-start] minmax(0, calc((var(--sfx-cg-feature) - var(--sfx-cg-content)) / 2))
[content-start] minmax(0, calc(var(--sfx-cg-content) - 2 * var(--sfx-cg-gutter))) [content-end]
minmax(0, calc((var(--sfx-cg-feature) - var(--sfx-cg-content)) / 2)) [feature-end feature-max-end]
minmax(var(--sfx-cg-gutter), 1fr) [full-end];
}
.content--feature {
grid-column: feature-start / feature-end;
}
} @media (min-width: 2450px) {
.content-grid {
grid-template-columns:
[full-start] minmax(var(--sfx-cg-gutter), 1fr)
[feature-max-start] minmax(0, calc((var(--sfx-cg-feature-max) - var(--sfx-cg-feature)) / 2))
[feature-start] minmax(0, calc((var(--sfx-cg-feature) - var(--sfx-cg-content)) / 2))
[content-start] minmax(0, calc(var(--sfx-cg-content) - 2 * var(--sfx-cg-gutter))) [content-end]
minmax(0, calc((var(--sfx-cg-feature) - var(--sfx-cg-content)) / 2)) [feature-end]
minmax(0, calc((var(--sfx-cg-feature-max) - var(--sfx-cg-feature)) / 2)) [feature-max-end]
minmax(var(--sfx-cg-gutter), 1fr) [full-end];
}
.content--feature-max {
grid-column: feature-max-start / feature-max-end;
}
}
}@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);
}
}
}@layer sfx.components { :where(.brxe-button.bricks-button, .brxe-button.btn, button.bricks-button) {
--sfx-btn-gap: var(--btn-gap, 0.25rem);
--sfx-btn-padding-block: var(--btn-padding-block, 0.375rem);
--sfx-btn-padding-inline: var(--btn-padding-inline, 1rem);
--sfx-btn-font-size: var(--btn-font-size, 1rem);
--sfx-btn-font-weight: var(--btn-font-weight, 700);
--sfx-btn-line-height: var(--btn-line-height, 1.25);
--sfx-btn-letter-spacing: var(--btn-letter-spacing, 0.01%);
--sfx-btn-border-width: var(--btn-border-width, 1px);
--sfx-btn-border-style: var(--btn-border-style, solid);
--sfx-btn-radius: var(--btn-radius, 0.5rem);
--sfx-btn-shadow: var(--btn-shadow, 0 1px 2px rgb(0 0 0 / 0.05));
--sfx-btn-shadow-hover: var(--btn-shadow-hover, 0 4px 6px -1px rgb(0 0 0 / 0.1));
--sfx-btn-transition: var(--btn-transition, all 0.25s ease-in-out);
--sfx-btn-focus-outline-width: var(--btn-focus-outline-width, 2px);
--sfx-btn-focus-outline-color: var(--btn-focus-outline-color, #64748b);
--sfx-btn-mix: var(--btn-mix, black);
--sfx-btn-s-padding-block: var(--btn-s-padding-block, 0.25rem);
--sfx-btn-s-padding-inline: var(--btn-s-padding-inline, 0.75rem);
--sfx-btn-s-font-size: var(--btn-s-font-size, 0.875rem);
--sfx-btn-s-radius: var(--btn-s-radius, 0.375rem);
--sfx-btn-l-padding-block: var(--btn-l-padding-block, 0.5rem);
--sfx-btn-l-padding-inline: var(--btn-l-padding-inline, 1.25rem);
--sfx-btn-l-font-size: var(--btn-l-font-size, 1.125rem);
--sfx-btn-l-radius: var(--btn-l-radius, 0.5rem);
--sfx-btn-xl-padding-block: var(--btn-xl-padding-block, 0.75rem);
--sfx-btn-xl-padding-inline: var(--btn-xl-padding-inline, 2rem);
--sfx-btn-xl-font-size: var(--btn-xl-font-size, 1.25rem);
--sfx-btn-color: var(--btn-color, transparent);
--sfx-btn-color-fg: currentColor;
align-items: center;
gap: var(--sfx-btn-gap);
padding-block: var(--sfx-btn-padding-block);
padding-inline: var(--sfx-btn-padding-inline);
font-size: var(--sfx-btn-font-size);
font-weight: var(--sfx-btn-font-weight);
line-height: var(--sfx-btn-line-height);
letter-spacing: var(--sfx-btn-letter-spacing);
text-decoration: none;
text-wrap: nowrap;
white-space: nowrap;
border-width: var(--sfx-btn-border-width);
border-style: var(--sfx-btn-border-style);
border-radius: var(--sfx-btn-radius);
box-shadow: var(--sfx-btn-shadow);
transition: var(--sfx-btn-transition);
cursor: pointer;
user-select: none;
outline: 0;
&:focus-visible {
outline: var(--sfx-btn-focus-outline-width) solid var(--sfx-btn-focus-outline-color);
outline-offset: 2px;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
&[class*="bricks-background-"]:not(.bricks-background-text),
&[class*="btn--"]:not(.btn--text):not(.btn--icon-slide) {
--_mix: var(--sfx-btn-mix, black);
color: var(--sfx-btn-color-fg); &:hover {
transform: translateY(-1px);
box-shadow: var(--sfx-btn-shadow-hover);
}
&:active {
transform: translateY(0);
}
} &.bricks-background-primary,
&.bricks-color-primary {
--sfx-btn-color: var(--btn-primary-bg, var(--primary, #2563eb));
--sfx-btn-color-fg: var(--btn-primary-fg, var(--primary-fg, #fff));
}
&.bricks-background-secondary,
&.bricks-color-secondary {
--sfx-btn-color: var(--btn-secondary-bg, var(--secondary, #64748b));
--sfx-btn-color-fg: var(--btn-secondary-fg, var(--secondary-fg, #fff));
--sfx-btn-mix: var(--btn-secondary-mix, white);
}
&.bricks-background-accent,
&.bricks-color-accent {
--sfx-btn-color: var(--btn-accent-bg, var(--accent, #f59e0b));
--sfx-btn-color-fg: var(--btn-accent-fg, var(--accent-fg, #fff));
}
&.bricks-background-light,
&.bricks-color-light {
--sfx-btn-color: var(--btn-light-bg, var(--light, #f8fafc)); --sfx-btn-color-fg: var(--btn-light-fg, var(--dark, #111));
}
&.bricks-background-dark,
&.bricks-color-dark {
--sfx-btn-color: var(--btn-dark-bg, var(--dark, #0f172a)); --sfx-btn-color-fg: var(--btn-dark-fg, var(--light, #fff));
--sfx-btn-mix: var(--btn-dark-mix, white);
}
&.bricks-background-muted,
&.bricks-color-muted {
--sfx-btn-color: var(--btn-muted-bg, var(--muted, #94a3b8));
--sfx-btn-color-fg: var(--btn-muted-fg, var(--muted-fg, #fff));
}
&.bricks-background-info,
&.bricks-color-info {
--sfx-btn-color: var(--btn-info-bg, var(--info, #0ea5e9));
--sfx-btn-color-fg: var(--btn-info-fg, var(--info-fg, #fff));
}
&.bricks-background-success,
&.bricks-color-success {
--sfx-btn-color: var(--btn-success-bg, var(--success, #22c55e));
--sfx-btn-color-fg: var(--btn-success-fg, var(--success-fg, #fff));
}
&.bricks-background-danger,
&.bricks-color-danger {
--sfx-btn-color: var(--btn-danger-bg, var(--danger, #ef4444));
--sfx-btn-color-fg: var(--btn-danger-fg, var(--danger-fg, #fff));
}
&.bricks-background-warning,
&.bricks-color-warning {
--sfx-btn-color: var(--btn-warning-bg, var(--warning, #eab308));
--sfx-btn-color-fg: var(--btn-warning-fg, var(--warning-fg, #fff));
}
&.bricks-background-text,
&.bricks-color-text,
&.btn--text {
--sfx-btn-text-color: var(--btn-text-color, var(--text, inherit));
--sfx-btn-text-hover-color: var(--btn-text-hover-color, var(--primary, #2563eb));
} &.outline {
background-color: transparent;
border-width: var(--sfx-btn-border-width);
&[class*="bricks-color-"],
&[class*="btn--"]:not(.btn--text):not(.btn--icon-slide) {
&:hover {
transform: translateY(-1px);
background-color: var(--sfx-btn-color);
}
}
}
&.sm {
padding-block: var(--sfx-btn-s-padding-block);
padding-inline: var(--sfx-btn-s-padding-inline);
font-size: var(--sfx-btn-s-font-size);
border-radius: var(--sfx-btn-s-radius);
}
&.md {
padding-block: var(--sfx-btn-padding-block);
padding-inline: var(--sfx-btn-padding-inline);
font-size: var(--sfx-btn-font-size);
border-radius: var(--sfx-btn-radius);
}
&.lg {
padding-block: var(--sfx-btn-l-padding-block);
padding-inline: var(--sfx-btn-l-padding-inline);
font-size: var(--sfx-btn-l-font-size);
border-radius: var(--sfx-btn-l-radius);
}
&.xl {
padding-block: var(--sfx-btn-xl-padding-block);
padding-inline: var(--sfx-btn-xl-padding-inline);
font-size: var(--sfx-btn-xl-font-size);
}
&.full-width {
width: 100%;
}
&.icon-only {
padding-inline: var(--sfx-btn-padding-block);
aspect-ratio: 1;
}
&.loading {
position: relative;
color: transparent;
pointer-events: none;
&::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-radius: 50%;
border-top-color: transparent;
animation: button-spin 0.6s linear infinite;
inset: 0;
margin: auto;
}
}
&.rounded-full {
border-radius: 9999px;
}
&.btn--text {
border: none;
border-radius: 0;
background: transparent;
}
}
.brxe-button.bricks-button.btn--text,
.brxe-button.btn.btn--text,
button.bricks-button.btn--text,
:is(.brxe-button.bricks-button, .brxe-button.btn, button.bricks-button).bricks-background-text,
:is(.brxe-button.bricks-button, .brxe-button.btn, button.bricks-button).bricks-color-text {
--btn-padding-block: 0;
--btn-padding-inline: 0;
--btn-s-padding-block: 0;
--btn-s-padding-inline: 0;
--btn-l-padding-block: 0;
--btn-l-padding-inline: 0;
padding-block: 0;
padding-inline: 0;
color: var(--sfx-btn-text-color, var(--btn-text-color, var(--text, inherit)));
&:hover {
color: var(--sfx-btn-text-hover-color, var(--btn-text-hover-color, var(--primary, #2563eb)));
}
}
@keyframes button-spin {
to {
transform: rotate(360deg);
}
}
.brxe-button.bricks-button,
button.bricks-button,
.btn--text {
&>i.fa-arrow-right,
&>svg {
transition: all .3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
&.btn--icon-slide:hover>i.fa-arrow-right,
&.btn--icon-slide:hover>svg {
margin-inline-start: 4px;
}
}
} :is(.brxe-button.bricks-button, .brxe-button.btn, button.bricks-button):not(.outline):is([class*="bricks-background-"]:not(.bricks-background-text), [class*="btn--"]:not(.btn--text):not(.btn--icon-slide)) {
background-color: var(--sfx-btn-color);
border-color: var(--sfx-btn-color);
&:hover {
background-color: color-mix(in oklab, var(--sfx-btn-color) 85%, var(--_mix));
border-color: color-mix(in oklab, var(--sfx-btn-color) 85%, var(--_mix));
}
&:active {
background-color: color-mix(in oklab, var(--sfx-btn-color) 75%, var(--_mix));
border-color: color-mix(in oklab, var(--sfx-btn-color) 75%, var(--_mix));
}
} :is(.brxe-button.bricks-button, .brxe-button.btn, button.bricks-button).outline:is([class*="bricks-color-"], [class*="btn--"]:not(.btn--text):not(.btn--icon-slide)) {
color: var(--sfx-btn-color);
border-color: var(--sfx-btn-color);
&:hover {
color: var(--sfx-btn-color-fg);
border-color: var(--sfx-btn-color);
}
} :is(.brxe-button.bricks-button, .brxe-button.btn, button.bricks-button):is(.bricks-background-text, .bricks-color-text, .btn--text) {
color: var(--sfx-btn-text-color, var(--btn-text-color, var(--text, inherit)));
&:hover {
color: var(--sfx-btn-text-hover-color, var(--btn-text-hover-color, var(--primary, #2563eb)));
}
}@layer sfx.components {  :is(ul.list--icon, .has-list-icons) {
--sfx-list-gutter:         var(--list-gutter, var(--space-s, 1rem));
--sfx-list-indent:         var(--list-indent, 0);
--sfx-list-gap:            var(--list-gap, var(--space-2xs, 0.5rem));
--sfx-list-item-gutter:    var(--list-item-gutter, var(--article-gutter-xs, var(--space-2xs, 0.5rem)));
--sfx-list-icon-gap:       var(--list-icon-gap, var(--space-2xs, 0.5rem));
--sfx-list-icon-size:      var(--list-icon-size, 1em);
--sfx-list-icon-offset:    var(--list-icon-offset, 0);
--sfx-list-icon-display:   var(--list-icon-display, block);
--sfx-list-icon-url:       var(--list-icon-url, 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='black' 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-list-icon-color:     var(--list-icon-color, var(--secondary, currentColor));
--sfx-list-icon-bg-offset: var(--list-icon-bg-offset, 0);
--sfx-list-icon-bg-size-pad: var(--list-icon-bg-size-pad, 8px);
--sfx-list-icon-bg-radius: var(--list-icon-bg-radius, var(--radius-full, 9999px));
--sfx-list-icon-bg-color:  var(--list-icon-bg-color, var(--tertiary-l-4, transparent));
} :is(ul.list--icon, .has-list-icons ul) {
list-style: none;
padding: 0;
margin-block: var(--sfx-list-gutter);
margin-inline-start: var(--sfx-list-indent);
display: flex;
flex-direction: column;
gap: var(--sfx-list-gap);
}
:is(ul.list--icon, .has-list-icons ul):first-child {
margin-block-start: 0;
}
:is(ul.list--icon, .has-list-icons ul):last-child {
margin-block-end: 0;
}
:is(ul.list--icon, .has-list-icons ul) li + li {
margin-block-start: var(--sfx-list-item-gutter);
}
:is(ul.list--icon, .has-list-icons ul) li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--sfx-list-icon-gap);
margin-block-start: 0;
&::before {
content: '';
display: var(--sfx-list-icon-display);
width: var(--sfx-list-icon-size);
height: var(--sfx-list-icon-size);
background-color: var(--sfx-list-icon-color);
-webkit-mask-image: var(--sfx-list-icon-url);
mask-image: var(--sfx-list-icon-url);
mask-size: cover;
translate: var(--sfx-list-icon-offset);
z-index: 1;
}
&::after {
content: '';
position: absolute;
z-index: 0;
width: calc(var(--sfx-list-icon-size) + var(--sfx-list-icon-bg-size-pad));
height: calc(var(--sfx-list-icon-size) + var(--sfx-list-icon-bg-size-pad));
background-color: var(--sfx-list-icon-bg-color);
translate: var(--sfx-list-icon-bg-offset);
border-radius: var(--sfx-list-icon-bg-radius);
}
} :is(ul.list--icon, .has-list-icons).is-check {
--sfx-list-icon-url:       var(--list-check-icon-url, var(--list-icon-url, 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='black' 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-list-icon-color:     var(--list-check-icon-color, var(--list-icon-color, var(--secondary)));
--sfx-list-icon-offset:    var(--list-check-icon-offset, var(--list-icon-offset, 0 .5ex));
--sfx-list-icon-size:      var(--list-check-icon-size, var(--list-icon-size, 1em));
--sfx-list-icon-gap:       var(--list-check-icon-icon-gap, var(--list-icon-gap, 15px));
--sfx-list-icon-display:   var(--list-check-icon-display, var(--list-icon-display, flex));
--sfx-list-indent:         var(--list-check-icon-indent, var(--list-indent, .5em));
--sfx-list-gap:            var(--list-check-icon-gap, var(--list-gap, var(--space-2xs, 0.5rem)));
--sfx-list-icon-bg-offset: var(--list-check-icon-bg-offset, var(--list-icon-bg-offset, -.4ex 0));
--sfx-list-icon-bg-color:  var(--list-check-icon-bg-color, var(--list-icon-bg-color, var(--tertiary-l-4)));
}
.card[class*="bg-secondary"] :is(ul.list--icon, .has-list-icons).is-check {
--sfx-list-icon-color:    var(--list-check-icon-color, var(--secondary));
--sfx-list-icon-bg-color: var(--list-check-icon-bg-color-alt, var(--secondary-10));
}
}.sfx-credit--overlay {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
padding: 0.25em 0.5em;
background: rgb(0 0 0 / 0.55);
color: #fff;
font-size: 0.75rem;
line-height: 1.3;
text-align: end;
} .sfx-credit__seal {
display: inline-block;
vertical-align: text-bottom;
} *:has(> .sfx-credit--overlay) {
position: relative;
}