@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)));
}
}