/* 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(--md-sys-color-neutral-on-surface);
    --tag-border:       transparent;
    --tag-radius:       var(--a-radius-full);
    --tag-px:           var(--a-space-1-5);
    --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;
    /* align-self: start — TKT-0021. A flex-column ancestor (col-ui
       defaults to align-items: stretch) otherwise stretches a bare
       tag-ui to the column's full width; a chip should size to its own
       content regardless of ancestor. justify-content: center is the
       matching defensive default badge-ui/button-ui already carry
       (badge.css/button.css) — if the box is ever wider than its
       content for any other reason, the label still centers instead of
       reading left-aligned in an oversized pill. */
    align-self: start;
    justify-content: 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(--md-sys-color-info-on-info);
  }

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

  /* Same shape as the sibling families since the Material static-token
     migration: amber fill + the palette's own fixed-light on-color
     (`on-warning`, white in both schemes per Material's on-color law).
     The pre-migration dark-brown-text override is gone — its
     lower-than-siblings contrast is a known, operator-accepted
     consequence (TKT-0018, wontfix pending palette adjustment). */
  :scope[variant="warning"] {
    --tag-bg: var(--a-warning-bg);
    --tag-fg: var(--md-sys-color-warning-on-warning);
  }

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

  /* `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(--md-sys-color-neutral-on-surface);
  }

  /* ── 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(--md-sys-color-info-container);
    --tag-fg: var(--md-sys-color-info-on-surface);
  }
  :scope[tone="muted"][variant="success"] {
    --tag-bg: var(--md-sys-color-success-container);
    --tag-fg: var(--md-sys-color-success-on-surface);
  }
  :scope[tone="muted"][variant="warning"] {
    --tag-bg: var(--md-sys-color-warning-container);
    --tag-fg: var(--md-sys-color-warning-on-surface);
  }
  :scope[tone="muted"][variant="danger"] {
    --tag-bg: var(--md-sys-color-danger-container);
    --tag-fg: var(--md-sys-color-danger-on-surface);
  }

  /* `[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(--md-sys-color-neutral-on-surface);
    --tag-fg: var(--md-sys-color-neutral-background);
  }

  /* ── `[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(--md-sys-color-info-on-surface);
    --tag-border: var(--md-sys-color-info-outline);
  }
  :scope[tone="outline"][variant="success"] {
    --tag-fg:     var(--md-sys-color-success-on-surface);
    --tag-border: var(--md-sys-color-success-outline);
  }
  :scope[tone="outline"][variant="warning"] {
    --tag-fg:     var(--md-sys-color-warning-on-surface);
    --tag-border: var(--md-sys-color-warning-outline);
  }
  :scope[tone="outline"][variant="danger"] {
    --tag-fg:     var(--md-sys-color-danger-on-surface);
    --tag-border: var(--md-sys-color-danger-outline);
  }
  /* 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(--md-sys-color-neutral-outline);
  }

  /* 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);
    border-color: transparent;
  }

  /* ── 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.
     ICON-HEIGHT FIX: cap the icon at 1em so it never exceeds the text
     line-height and inflates the row. The icon is visual decoration on
     a text chip — it must not drive the block size. `flex-none` prevents
     it from growing or shrinking; `flex-shrink:0` is already here. */
  :scope > icon-ui {
    color: currentColor;
    flex-shrink: 0;
    --a-icon-size: 1em;
    block-size: 1em;
  }

  /* ── Icon-tag spacing rebalance (B0) ──
     Mirrors badge-ui's [icon] rebalance: tighten leading pad + narrow gap when
     a leading icon is present, so the icon+label read as one tight unit.
     Gated on :has(> icon-ui) to leave text-only tags unaffected. */
  :scope:has(> icon-ui) {
    padding-inline-start: var(--tag-px-icon, var(--a-space-1));
    gap: var(--tag-gap-icon, 0.2em);
  }

  /* ── Dismiss button — a stamped <button-ui variant="ghost" size="xs">
     (gh issue 276: no native <button> in stamped DOM); geometry + hover
     ride button token re-points, chrome is button-ui's own. */
  [slot="dismiss"] {
    --button-height: var(--tag-dismiss-size);
    --button-radius: var(--tag-dismiss-radius);
    --button-fg: var(--tag-dismiss-fg);
    --button-bg-ghost-hover: var(--tag-dismiss-bg-hover);
    --button-fg-ghost-hover: var(--tag-dismiss-fg);
    --a-icon-size: 0.875rem;

    opacity: var(--tag-dismiss-opacity);
    order: 1; /* push dismiss to end so layout reads [text] [×] */
    flex-shrink: 0;
    transition: opacity var(--tag-duration) var(--tag-easing);
  }

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

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