/* 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); }

button-ui:not([disabled]):hover,
button-ui[variant="primary"]:not([disabled]):hover {
  --button-bg-default: var(--button-bg-hover, var(--button-bg-hover-default));
  --button-fg-default: var(--button-fg-hover, var(--button-fg-hover-default));
  --button-border-default: var(--button-border-hover, var(--button-border-hover-default));
}
button-ui[variant="ghost"]:not([disabled]):hover {
  --button-bg-default: var(--button-bg-ghost-hover, var(--button-bg-ghost-hover-default));
  --button-fg-default: var(--button-fg-ghost-hover, var(--button-fg-ghost-hover-default));
  --button-border-default: var(--button-border-ghost-hover, var(--button-border-ghost-hover-default));
}
button-ui[variant="outline"]:not([disabled]):hover {
  --button-fg-default: var(--button-fg-hover, var(--button-fg-hover-default));
  --button-border-default: var(--button-border-hover, var(--button-border-hover-default));
}
button-ui[color="danger"]:not([disabled]):hover {
  --button-bg-default: var(--button-bg-hover, var(--button-bg-hover-default));
  --button-fg-default: var(--button-fg-hover, var(--button-fg-hover-default));
  --button-border-default: var(--button-border-hover, var(--button-border-hover-default));
}

@scope (button-ui) {
  :where(:scope) {
    /* OD-5 token-shadowing fix: `-default` suffix on internal-target
       tokens so the un-suffixed name (--button-bg / --button-fg /
       --button-border) is reserved as a consumer-extension point.
       Use sites read `var(--name, var(--name-default))` so a
       surface-ancestor declaration of --button-bg can win over the
       button's own state/variant cascade. Spec: docs/specs/genui-css-channel.md OD-5. */
    --button-bg-default:       var(--a-ui-bg);
    --button-fg-default:       var(--a-ui-text);
    --button-border-default:   transparent;
    --button-height-default:           var(--a-size);
    --button-px-default:               var(--a-ui-px);
    --button-radius-default:           var(--a-radius);
    --button-font-size-default:        var(--a-ui-size);
    --button-font-weight-default:      var(--a-ui-weight);
    --button-gap-default:              var(--a-space-1);
    --button-bg-hover-default:         var(--a-ui-bg-hover);
    --button-fg-hover-default:         var(--a-ui-text-hover);
    --button-border-hover-default:     transparent;
    --button-bg-primary-default:       var(--a-primary);
    --button-fg-primary-default:       var(--a-chrome-light);
    --button-bg-outline-default:       transparent;
    --button-fg-outline-default:       var(--a-fg);
    --button-border-outline-default:   var(--a-ui-border);
    --button-bg-ghost-default:         transparent;
    --button-fg-ghost-default:         var(--a-fg-subtle);
    --button-fg-ghost-hover-default:   var(--a-fg-strong);
    --button-bg-ghost-hover-default:   var(--a-bg-hover);
    --button-border-ghost-default:     transparent;
    --button-border-ghost-hover-default: transparent;
    --button-bg-danger-default:        var(--a-danger);
    --button-fg-danger-default:        var(--a-danger-fg);
    --button-bg-hover-danger-default:  var(--a-danger);
    --button-bg-disabled-default:      var(--a-ui-bg-disabled);
    --button-fg-disabled-default:      var(--a-ui-text-disabled);
    --button-border-disabled-default:  transparent;

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

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

    /* ── Trailing slot ── */
    --button-trailing-font-size-default:  var(--a-ui-sm);
    --button-trailing-fg-default:         var(--a-fg-muted);
    --button-trailing-border-default:     var(--a-border-subtle);
    --button-trailing-radius-default:     var(--a-radius-sm);
    --button-trailing-px-default:         var(--a-space-0-5);
  }

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

  /* Trailing slot */
  [slot="trailing"] {
    order: 99;
    margin-inline-start: auto;
    font-size: var(--button-trailing-font-size, var(--button-trailing-font-size-default));
    color: var(--button-trailing-fg, var(--button-trailing-fg-default));
    font-family: inherit;
    border: 1px solid var(--button-trailing-border, var(--button-trailing-border-default));
    border-radius: var(--button-trailing-radius, var(--button-trailing-radius-default));
    padding: 0 var(--button-trailing-px, var(--button-trailing-px-default));
    line-height: 1;
  }

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

  /* ── Variants (rest state) ──
     State/variant blocks override the `-default` (the fallback for
     when no consumer extension is set). Consumer override of the
     un-suffixed name (--button-bg etc.) wins at the use site via
     `var(--button-bg, var(--button-bg-default))`. */
  :scope[variant="primary"] {
    --button-bg-default: var(--button-bg-primary, var(--button-bg-primary-default));
    --button-fg-default: var(--button-fg-primary, var(--button-fg-primary-default));
  }

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

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

  /* ── 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-default: var(--button-bg-danger, var(--button-bg-danger-default));
    --button-fg-default: var(--button-fg-danger, var(--button-fg-danger-default));
  }
  :scope[color="success"] {
    --button-bg-default: var(--a-success-strong);
    --button-fg-default: var(--a-success-fg);
  }
  :scope[color="info"] {
    --button-bg-default: var(--a-info-strong);
    --button-fg-default: var(--a-info-fg);
  }
  :scope[color="warning"] {
    --button-bg-default: var(--a-warning-strong);
    --button-fg-default: var(--a-warning-fg);
  }

  /* 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-default: var(--button-bg-disabled, var(--button-bg-disabled-default));
    --button-fg-default: var(--button-fg-disabled, var(--button-fg-disabled-default));
    --button-border-default: var(--button-border-disabled, var(--button-border-disabled-default));
    pointer-events: none;
    cursor: not-allowed;
  }

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