/* Safari 17.x bug: `:scope[attr]:hover` inside `@scope` doesn't match the
   scope root. Plain selector outside works. See docs/BROWSER-COMPAT.md §3a. */
tag-ui[removable]:not([disabled]):hover {
  --tag-bg: var(--tag-bg-hover);
}

@scope (tag-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --tag-bg:           var(--a-bg-muted);
    --tag-fg:           var(--a-fg);
    --tag-border:       transparent;
    --tag-radius:       var(--a-radius-full);
    --tag-px:           var(--a-space-2);
    --tag-py:           0.125rem;
    --tag-gap:          var(--a-space-1);
    --tag-font:         var(--a-ui-sm);
    --tag-font-family:  var(--a-font-family-ui);
    --tag-dismiss-size: 1rem;
    --tag-bg-hover:     var(--a-bg-hover);
    --tag-bg-disabled:  var(--a-ui-bg-disabled);
    --tag-fg-disabled:  var(--a-ui-text-disabled);

    /* ── Focus ── */
    --tag-focus-ring:   var(--a-focus-ring);

    /* ── Motion ── */
    --tag-duration:     var(--a-duration-fast);
    --tag-easing:       var(--a-easing);

    /* ── Dismiss ──
       Rest = inherit the host's text color at reduced opacity (so the X
       reads as quieter chrome than the label, but tracks every variant
       — info/success/danger get a near-white X on saturated bg; warning
       gets a dark-brown X on bright amber; default gets a fg-muted X on
       quiet chrome). Hover restores full opacity + drops a translucent
       overlay in the same color family for the affordance.
       Pre-v0.6.36 used `--a-fg-muted` / `--a-fg` directly, which gave
       a neutral-grey X on saturated solid pills — the X disappeared
       against the variant bg. */
    --tag-dismiss-radius: var(--a-radius-full);
    --tag-dismiss-fg:        currentColor;
    --tag-dismiss-opacity:        0.85;
    --tag-dismiss-opacity-hover:  1;
    --tag-dismiss-bg-hover:  color-mix(in oklch, currentColor 18%, transparent);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--tag-gap);
    padding: var(--tag-py) var(--tag-px);
    border-radius: var(--tag-radius);
    border: 1px solid var(--tag-border);
    font: inherit;
    /* font-family floor — see segment.css rationale. */
    font-family: var(--tag-font-family);
    font-size: var(--tag-font);
    font-weight: 500;
    line-height: 1;
    color: var(--tag-fg);
    background: var(--tag-bg);
    white-space: nowrap;
    user-select: none;
    transition: background var(--tag-duration) var(--tag-easing), color var(--tag-duration) var(--tag-easing);
  }

  /* `[text]` attribute selector gates the ::after so consumers using
     slotted content (`<tag-ui>Beta</tag-ui>`) don't get an empty
     pseudo-element flex item — which would otherwise inherit the
     host's `gap` and add a phantom `--tag-gap`-wide trailing space
     after the slotted content. Mirrors `button.css` line ~103. */
  :scope[text]::after {
    content: attr(text);
  }

  /* ── Variants ──
     Default tone is `solid` for the four family variants:
     `--a-{family}-bg` (saturated surface) + `--a-{family}-fg` (on-strong
     text, near-white in both schemes by design). Reads as a status pill
     where the chip IS the state. Opt out per-tag via [tone="muted"] for
     metadata-chip surfaces in dense lists. */
  :scope[variant="info"] {
    --tag-bg: var(--a-info-bg);
    --tag-fg: var(--a-info-fg);
  }

  :scope[variant="success"] {
    --tag-bg: var(--a-success-bg);
    --tag-fg: var(--a-success-fg);
  }

  /* `--a-warning-bg` is the bright-amber step (semantics.css L3 redirect
     to `-20-tint`) paired with `--a-warning-fg` (dark brown text) — the
     canonical caution-tape pair. Pre-v0.6.36 this rule had a local
     `-20-tint` override; that workaround moved to the token system. */
  :scope[variant="warning"] {
    --tag-bg: var(--a-warning-bg);
    --tag-fg: var(--a-warning-fg);
  }

  :scope[variant="danger"] {
    --tag-bg: var(--a-danger-bg);
    --tag-fg: var(--a-danger-fg);
  }

  /* `default` (no family) stays as quiet chrome — a stark fg/bg-inverse
     would be too loud for the no-variant case. Opt in to the inverse
     stamp via `[tone="solid"]` when you want a high-contrast neutral pill. */
  :scope[variant="default"] {
    --tag-bg: var(--a-bg-muted);
    --tag-fg: var(--a-fg);
  }

  /* ── Tone modifier — orthogonal to [variant] ──
     `[tone="muted"]` opts each family variant OUT of the solid default
     into the canonical muted pair: `--a-{family}-muted` (tinted surface)
     + `--a-{family}-text` (scheme-flipping text). Same shape <badge-ui>
     uses as its default. Use on metadata chips in dense lists where the
     saturated default would compete for attention. */
  :scope[tone="muted"][variant="info"] {
    --tag-bg: var(--a-info-muted);
    --tag-fg: var(--a-info-text);
  }
  :scope[tone="muted"][variant="success"] {
    --tag-bg: var(--a-success-muted);
    --tag-fg: var(--a-success-text);
  }
  :scope[tone="muted"][variant="warning"] {
    --tag-bg: var(--a-warning-muted);
    --tag-fg: var(--a-warning-text);
  }
  :scope[tone="muted"][variant="danger"] {
    --tag-bg: var(--a-danger-muted);
    --tag-fg: var(--a-danger-text);
  }

  /* `[tone="solid"]` on the neutral default (or no variant) inverts the
     chrome — solid fg-color bg with bg-color text. High-contrast neutral
     stamp. Explicit opt-in; the variant-less default stays quiet chrome. */
  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
    --tag-bg: var(--a-fg);
    --tag-fg: var(--a-bg);
  }

  /* ── `[tone="outline"]` — transparent bg + family-colored border + text ──
     The third common chip shape: no fill, just a ring + colored label.
     Reads as "metadata that wants color recognition but minimum
     visual weight" — good in dense data tables, faceted filter rows,
     or anywhere multiple chips would compete if filled. */
  :scope[tone="outline"] {
    --tag-bg: transparent;
  }
  :scope[tone="outline"][variant="info"] {
    --tag-fg:     var(--a-info-text);
    --tag-border: var(--a-info-border);
  }
  :scope[tone="outline"][variant="success"] {
    --tag-fg:     var(--a-success-text);
    --tag-border: var(--a-success-border);
  }
  :scope[tone="outline"][variant="warning"] {
    --tag-fg:     var(--a-warning-text);
    --tag-border: var(--a-warning-border);
  }
  :scope[tone="outline"][variant="danger"] {
    --tag-fg:     var(--a-danger-text);
    --tag-border: var(--a-danger-border);
  }
  /* Outline on neutral (no family) — fg-muted text + subtle border. */
  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
    --tag-fg:     var(--a-fg-muted);
    --tag-border: var(--a-border);
  }

  /* Size handled by universal [size] attribute system. */

  /* hover rule moved outside @scope — see Safari 17.x bug note at top. */

  /* ── Focus ── */
  :scope:focus-visible {
    outline: none;
    box-shadow: var(--tag-focus-ring);
  }

  /* ── Slotted icons (leading) ──
     Icons placed inside the tag (e.g. `<icon-ui name="check">`) inherit
     the host's text color so legend / status chips read as a single
     color-coded unit. Mirrors `<badge-ui>`'s convention. */
  :scope > icon-ui {
    color: currentColor;
    flex-shrink: 0;
  }

  /* ── Dismiss button ── */
  [slot="dismiss"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tag-dismiss-size);
    height: var(--tag-dismiss-size);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--tag-dismiss-radius);
    color: var(--tag-dismiss-fg);
    opacity: var(--tag-dismiss-opacity);
    --a-icon-size: 0.875rem;
    order: 1; /* push dismiss to end so layout reads [text] [×] */
    transition: opacity var(--tag-duration) var(--tag-easing), background var(--tag-duration) var(--tag-easing);
  }

  [slot="dismiss"]:hover {
    opacity: var(--tag-dismiss-opacity-hover);
    background: var(--tag-dismiss-bg-hover);
  }

  /* ── Disabled ── */
  :scope[disabled] {
    --tag-bg: var(--tag-bg-disabled);
    --tag-fg: var(--tag-fg-disabled);
    pointer-events: none;
  }
}
