/* Layered baseline (sfx.components). Living in @layer is intentional:
   unlayered rules — Bricks Builder element styles, child theme, user
   custom CSS — win automatically without !important or specificity
   wars. :where(...) below keeps base specificity at 0 for the same
   reason. Do not unwrap the @layer block or strip :where(). */
@layer sfx.components {

/* ========================================
   BUTTON STYLES (nested)
   Longhands use --sfx-btn-* only. External wireup is --btn-*.

   Per-variant chain (3 levels, falls through left to right):
     --sfx-btn-color:    var(--btn-<v>-bg, var(--<v>,    <literal>))
     --sfx-btn-color-fg: var(--btn-<v>-fg, var(--<v>-fg, <literal>))

   Each variant uses the matching Bricks core *pair* — bg uses --<v>, fg
   uses --<v>-fg. Define both in your core framework (Bricks normally
   ships them as semantic pairs: --primary/--primary-fg, --accent/
   --accent-fg, etc.) and buttons follow. Override per-variant via
   --btn-<v>-bg / --btn-<v>-fg only when you need a button-specific
   value distinct from the global Bricks pair.

   Light / dark variants are the two cases where the semantic name
   guarantees brightness — they swap the pair (light → fg = --dark,
   dark → fg = --light) so contrast is locked even when the user's
   core tokens don't define explicit -fg counterparts for them.

   Hover mix:
     --btn-mix (default black) — hover blends 15% mix into the bg via
     color-mix() (darker hover for dark bgs). The secondary and dark
     variants flip to white per the original module behavior (lighter
     hover for already-dark colors). Override per-variant via
     --btn-<v>-mix.

   Text variant (link-style, no padding):
     --btn-text-color chains to Bricks --text; --btn-text-hover-color
     chains to --primary. Applies to .bricks-background-text,
     .bricks-color-text, and .btn--text.
   ======================================== */

: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);
    background-color: var(--sfx-btn-color);
    color: var(--sfx-btn-color-fg);
    border-color: var(--sfx-btn-color);

    &:hover {
      transform: translateY(-1px);
      box-shadow: var(--sfx-btn-shadow-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 {
      transform: translateY(0);
      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));
    }
  }

  /* Variant token sets — apply to both filled (.bricks-background-X)
     and outline (.bricks-color-X). Filled buttons read the tokens via
     the [class*="bricks-background-"] block above; outline buttons read
     them via the &.outline block below. The token chain itself is the
     same regardless of which class the user picked. */
  &.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));
    /* Light bg → swap pair: fg = --dark token. */
    --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));
    /* Dark bg → swap pair: fg = --light token. */
    --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 variant — transparent bg + variant-colored border/text;
     hover swaps to filled look (bg = variant color, text = paired fg),
     so .outline.bricks-color-primary:hover renders identical to a
     plain .bricks-background-primary button.

     Note: the color and border-color declarations for the variant-color
     swap (idle + hover) are NOT in this layered block. They live
     unlayered at the bottom of this file so they win over Bricks' two
     unlayered global rules:
       :where(:root) *                  { border-color: var(--border-primary); }
       :where(:root) .bricks-color-<v>  { color: var(--<v>); }
     See the "Unlayered outline chrome" block below for the reasoning. */
  &.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;
  }
}

}

/* ========================================
   UNLAYERED OUTLINE CHROME
   ----------------------------------------
   These two declarations live OUTSIDE @layer sfx.components on purpose.

   Bricks ships two unlayered global rules:
     :where(:root) *                  { border-color: var(--border-primary); }
     :where(:root) .bricks-color-<v>  { color: var(--<v>); }

   Unlayered author declarations always beat layered ones (regardless of
   selector specificity), so keeping the variant-colored border and the
   hover text-swap inside @layer sfx.components would let Bricks' globals
   neutralize them every time.

   Lifting these specific properties out of the layer lets them compete
   on plain specificity instead. The selectors below resolve to:
     idle:  0,5,0   (beats Bricks .bricks-color-<v> at 0,1,0)
     hover: 0,6,0   (beats Bricks at 0,1,0 with margin to spare)

   No !important needed. The user can still override these with any
   selector of equal or higher specificity — same as normal CSS.

   All other outline behavior (background-color transparent, hover bg,
   transform, border-width) stays inside the layer so users can still
   override those via Bricks/child theme/custom CSS the normal way.
   ======================================== */
: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);
  }
}

/* ========================================
   UNLAYERED TEXT-BUTTON CHROME
   Same reasoning as outline chrome above — Bricks' unlayered
   .bricks-background-text / .bricks-color-text color rules would
   otherwise beat the layered declarations in the btn--text block.
   ======================================== */
: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)));
  }
}