/* Safari 17.x bug: `:scope:state` and `:scope[attr]:state` inside `@scope`
   don't match the scope root. Plain selectors outside the @scope work —
   custom-property tokens still resolve via inheritance. Specificity
   (0,1,1 / 0,2,1) is preserved. See docs/BROWSER-COMPAT.md §3a. */
button-ui:active { transform: scale(0.97); }

/* ── Hover (re-points the component tokens; lives outside @scope —
   Safari 17.x ignores :scope:hover at the scope root, see note above) ──
   Filled variants intensify the fill to the family `-strong` step (the
   deeper, higher-contrast step — note it equals the `-active`/pressed
   step, so the :active transform above is what distinguishes press from
   hover). Outline + ghost keep a transparent fill and instead move the
   FG from its rest color to the matching `-strong` color. */

/* Neutral / default — fill → neutral `-strong` surface. Only --button-bg
   moves: the rest fg (--a-fg-strong) and border (transparent) are already
   the hover targets. The filled accent/semantic rules below re-point
   --button-bg at higher specificity and leave each variant's rest fg
   untouched (primary/danger/etc. keep their light label). */
button-ui:not([disabled]):hover { --button-bg: var(--button-bg-hover); }

button-ui[variant="primary"]:not([disabled]):hover { --button-bg: var(--a-accent-strong); }
button-ui[color="danger"]:not([disabled]):hover     { --button-bg: var(--a-danger-strong); }
button-ui[color="success"]:not([disabled]):hover    { --button-bg: var(--a-success-strong); }
button-ui[color="info"]:not([disabled]):hover       { --button-bg: var(--a-info-strong); }
/* warning fill → -strong like the rest; its mid-tone can read muddy under
   the dark --a-warning-fg — revisit the warning ramp upstream if so. */
button-ui[color="warning"]:not([disabled]):hover    { --button-bg: var(--a-warning-strong); }

/* Outline / ghost — no fill on hover; fg goes rest-color → `-strong`.
   Ghost reads --button-fg-ghost-hover (default --a-fg-strong) so consumers
   like alert.css can retint the ghost-hover label, and --button-bg/border-
   ghost-hover (default transparent) so the component-tokens demo can opt a
   fill back in. */
button-ui[variant="outline"]:not([disabled]):hover {
  --button-bg: transparent;
  --button-fg: var(--button-fg-hover);
}
button-ui[variant="ghost"]:not([disabled]):hover {
  --button-bg: var(--button-bg-ghost-hover);
  --button-fg: var(--button-fg-ghost-hover);
  --button-border: var(--button-border-ghost-hover);
}

/* Per-color outline/ghost — fg → family `-strong` (specificity 0,4,1
   clears the 0,3,0 [variant][color] rest combos inside @scope). */
button-ui[variant="outline"][color="danger"]:not([disabled]):hover,
button-ui[variant="ghost"][color="danger"]:not([disabled]):hover    { --button-fg: var(--a-danger-strong); }
button-ui[variant="outline"][color="success"]:not([disabled]):hover,
button-ui[variant="ghost"][color="success"]:not([disabled]):hover   { --button-fg: var(--a-success-strong); }
button-ui[variant="outline"][color="info"]:not([disabled]):hover,
button-ui[variant="ghost"][color="info"]:not([disabled]):hover      { --button-fg: var(--a-info-strong); }
button-ui[variant="outline"][color="warning"]:not([disabled]):hover,
button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-fg: var(--a-warning-strong); }

@scope (button-ui) {
  :where(:scope) {
    /* Component tokens — the un-suffixed `--button-*` names ARE the
       component's tokens; variants/states re-point them below. Consumers
       override per-element (`button-ui { --button-bg: … }` or inline) or
       via `@layer overrides`. See docs/specs/component-token-contract.md. */
    --button-bg:       var(--a-ui-bg);
    --button-fg:       var(--a-ui-text);
    --button-border:   transparent;
    --button-height:           var(--a-size);
    --button-px:               var(--a-ui-px);
    --button-radius:           var(--a-radius);
    --button-font-size:        var(--a-ui-size);
    --button-font-weight:      var(--a-ui-weight);
    --button-font-family:      var(--a-font-family-ui);
    --button-gap:              var(--a-space-1);
    --button-bg-hover:         var(--a-bg-strong);   /* neutral fill → neutral -strong surface on hover */
    --button-fg-hover:         var(--a-ui-text-hover);
    --button-border-hover:     transparent;
    --button-bg-primary:       var(--a-primary);
    --button-fg-primary:       var(--a-chrome-light);
    --button-bg-outline:       transparent;
    --button-fg-outline:       var(--a-fg);
    --button-border-outline:   var(--a-ui-border);
    --button-bg-ghost:         transparent;
    --button-fg-ghost:         var(--a-fg-subtle);
    --button-fg-ghost-hover:   var(--a-fg-strong);
    --button-bg-ghost-hover:   transparent;   /* ghost hover is fg-only; consumers/demo may override to add a fill */
    --button-border-ghost:     transparent;
    --button-border-ghost-hover: transparent;
    --button-bg-danger:        var(--a-danger);
    --button-fg-danger:        var(--a-chrome-light);  /* white on the saturated fill — see color rules */
    --button-bg-disabled:      var(--a-ui-bg-disabled);
    --button-fg-disabled:      var(--a-ui-text-disabled);
    --button-border-disabled:  transparent;

    /* ── Transition ── */
    --button-duration:         var(--a-duration-fast);
    --button-easing:           var(--a-easing);

    /* ── State ── */
    --button-focus-ring:       var(--a-focus-ring);

    /* ── Trailing slot ── */
    --button-trailing-font-size:  var(--a-ui-sm);
    /* kbd-ui styles its color/bg/border inside `@scope (kbd-ui)`, which beats
       this scope by PROXIMITY — so setting `color`/`border` on [slot="trailing"]
       here is inert for a kbd pill. The pill is recolored through kbd's OWN
       tokens (--kbd-fg/-bg/-border) in the rule below instead. The
       --button-trailing-* tokens remain the fallback for non-kbd trailing
       content (badges, plain spans). */
    --button-trailing-border:     color-mix(in oklab, currentColor 28%, transparent);
    --button-trailing-radius:     var(--a-radius-sm);
    --button-trailing-px:         var(--a-space-0-5);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    min-width: var(--button-height);   /* keep button at least as wide as it is tall */
    min-height: var(--button-height);
    overflow: hidden;
    padding-inline: var(--button-px);
    border: 1px solid var(--button-border);
    border-radius: var(--button-radius);
    background: var(--button-bg);
    color: var(--button-fg);
    font: inherit;
    /* font-family floor — see segment.css rationale. */
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition:
      background var(--button-duration) var(--button-easing),
      border-color var(--button-duration) var(--button-easing),
      color var(--button-duration) var(--button-easing),
      opacity var(--button-duration) var(--button-easing),
      transform var(--button-duration) var(--button-easing);
    white-space: nowrap;
  }
  :scope[text]::after {
    content: attr(text);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Display convention (ADR-0037): block-level by default — a text button used
     directly in block flow fills its container. Icon-only buttons (no [text])
     stay inline-level, and [inline] forces inline for any button. Inside
     row-ui/col-ui/grid-ui this is moot (flex/grid items are blockified). */
  :scope:not([text]) { display: inline-flex; }
  :scope[inline] { display: inline-flex; }

  /* Trailing icon slot — for forward-affordance carets ("Next →"), distinct
     from `[slot="trailing"]` which is styled as a kbd-pill for shortcut
     indicators. Auto-stamped when `[icon-trailing]` is set. */
  [slot="icon-trailing"] {
    order: 99;
    margin-inline-start: var(--a-space-1);
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* Trailing slot — kbd-pill style for `<kbd-ui slot="trailing">⌘K</kbd-ui>`.
     Use `[icon-trailing="<name>"]` (above) for trailing icons instead. */
  [slot="trailing"] {
    order: 99;
    margin-inline-start: auto;
    font-size: var(--button-trailing-font-size);
    color: inherit;
    font-family: inherit;
    border: 1px solid var(--button-trailing-border);
    border-radius: var(--button-trailing-radius);
    padding: 0 var(--button-trailing-px);
    line-height: 1;
    /* Recolor a <kbd-ui slot="trailing"> pill via kbd's OWN tokens so it tracks
       the button label color on every variant (primary white, ghost subtle,
       colored fills). kbd-ui's `:scope { color: var(--kbd-fg) }` wins over the
       `color: inherit` above by scope proximity, but its tokens are declared at
       :where(:scope) (0,0,0) — these (0,1,0) decls win on specificity, which the
       cascade resolves BEFORE proximity. currentColor here is the inherited
       button label color. */
    --kbd-fg:     currentColor;
    --kbd-bg:     color-mix(in oklab, currentColor 16%, transparent);
    --kbd-border: color-mix(in oklab, currentColor 30%, transparent);
  }

  /* :scope:active moved outside @scope — see Safari 17.x bug note at top. */
  :scope:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

  /* ── Variants (rest state) ──
     Variant/state blocks re-point the component tokens (--button-bg etc.);
     the base layout in :scope stays untouched. */
  :scope[variant="primary"] {
    --button-bg: var(--button-bg-primary);
    --button-fg: var(--button-fg-primary);
  }

  :scope[variant="outline"] {
    --button-bg: var(--button-bg-outline);
    --button-fg: var(--button-fg-outline);
    --button-border: var(--button-border-outline);
  }

  :scope[variant="ghost"] {
    --button-bg: var(--button-bg-ghost);
    --button-fg: var(--button-fg-ghost);
    --button-border: var(--button-border-ghost);
  }

  /* ── Color (semantic axis) ──
     `[color]` carries semantic intent; `variant` carries visual style.
     Together they compose: `<button-ui variant="solid" color="danger">`
     vs `<button-ui variant="outline" color="danger">`.
     `variant="danger"` is a deprecated alias migrated to color via JS. */
  :scope[color="danger"] {
    --button-bg: var(--button-bg-danger);
    --button-fg: var(--button-fg-danger);
  }
  :scope[color="success"] {
    /* Consume the L3 `-bg` alias, not the L2 `-strong` step. Currently
       resolves identically (both = `-50`), but consuming `-bg` future-
       proofs if the surface-step ever redirects (as -warning-bg did
       in v0.6.36 to fix muddy contrast).
       Text is --a-chrome-light (white) on the saturated fill, like primary
       (--button-fg-primary). --a-success-fg is success-COLORED text — near
       invisible on the fill (feedback_text_on_accent_disc). Warning is the
       exception: its --a-warning-bg fill is light, so it keeps dark -fg. */
    --button-bg: var(--a-success-bg);
    --button-fg: var(--a-chrome-light);
  }
  :scope[color="info"] {
    --button-bg: var(--a-info-bg);
    --button-fg: var(--a-chrome-light);
  }
  :scope[color="warning"] {
    /* `--a-warning-bg` (bright amber, scheme-independent) not
       `-strong` (mid-tone). The pair `-strong` + `-fg` gives muddy
       brown-on-brown — the L3 `-bg` is the canonical solid-warning
       surface paired with `-fg` (dark text). */
    --button-bg: var(--a-warning-bg);
    --button-fg: var(--a-warning-fg);
  }

  /* ── Color × non-solid variants ──
     The [color] rules above set a SOLID fill — that's the default rendering
     (bare `color="danger"`). But with variant="outline"/"ghost" the button
     must COMPOSE, not fill. These combined selectors (specificity 0,3,0) beat
     the 0,2,0 [color] rules regardless of source order, restoring a transparent
     fill + colored text (+ colored border for outline). Without them,
     `variant="outline" color="success"` renders as a solid green pill — the
     demo's "Approve" button (button.examples.html:50). --a-X-text is the
     family-colored text designed to read on a neutral page surface; -border is
     the L3 colored border alias. */
  :scope[variant="outline"][color="danger"]  { --button-bg: transparent; --button-fg: var(--a-danger-text);  --button-border: var(--a-danger-border); }
  :scope[variant="outline"][color="info"]     { --button-bg: transparent; --button-fg: var(--a-info-text);     --button-border: var(--a-info-border); }
  :scope[variant="outline"][color="success"]  { --button-bg: transparent; --button-fg: var(--a-success-text);  --button-border: var(--a-success-border); }
  :scope[variant="outline"][color="warning"]  { --button-bg: transparent; --button-fg: var(--a-warning-text);  --button-border: var(--a-warning-border); }
  :scope[variant="ghost"][color="danger"]   { --button-bg: transparent; --button-fg: var(--a-danger-text); }
  :scope[variant="ghost"][color="info"]      { --button-bg: transparent; --button-fg: var(--a-info-text); }
  :scope[variant="ghost"][color="success"]   { --button-bg: transparent; --button-fg: var(--a-success-text); }
  :scope[variant="ghost"][color="warning"]   { --button-bg: transparent; --button-fg: var(--a-warning-text); }

  /* Hover rules moved outside @scope — see Safari 17.x bug note at
     top of file. */

  /* Size is handled by the universal [size] attribute system
     which sets --a-size, --a-ui-px, --a-ui-size.
     Button reads these via its token defaults above. */

  /* Stretch — full-width */
  :scope[stretch] { width: stretch; }

  /* Disabled */
  :scope[disabled] {
    --button-bg: var(--button-bg-disabled);
    --button-fg: var(--button-fg-disabled);
    --button-border: var(--button-border-disabled);
    pointer-events: none;
    cursor: not-allowed;
  }

  /* Icon-only (no text) */
  :scope:not([text]), :scope[text=""] {
    --button-px: 0;
    width: var(--button-height);
  }
}
