/* 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-default: var(--tag-bg-hover, var(--tag-bg-hover-default));
}

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

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

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

    /* ── Dismiss ── */
    --tag-dismiss-radius-default: var(--a-radius-full);
    --tag-dismiss-fg-default:   var(--a-fg-muted);
    --tag-dismiss-fg-hover-default: var(--a-fg);
    --tag-dismiss-bg-hover-default: var(--a-bg-muted);
    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, var(--tag-gap-default));
    padding: var(--tag-py, var(--tag-py-default)) var(--tag-px, var(--tag-px-default));
    border-radius: var(--tag-radius, var(--tag-radius-default));
    border: 1px solid var(--tag-border, var(--tag-border-default));
    font: inherit;
    font-size: var(--tag-font, var(--tag-font-default));
    font-weight: 500;
    line-height: 1;
    color: var(--tag-fg, var(--tag-fg-default));
    background: var(--tag-bg, var(--tag-bg-default));
    white-space: nowrap;
    user-select: none;
    transition: background var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default)), color var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default));
  }

  /* `[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 ── */
  :scope[variant="info"] {
    --tag-bg-default: var(--a-info-muted);
    --tag-fg-default: var(--a-info-bg);
  }

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

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

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

  /* `default` is a semantic alias of the base — same tokens as the
     unstyled `:scope`, declared explicitly so the yaml enum and the
     CSS contract agree. Most consumers omit `variant` and inherit the
     base; the explicit selector lets `<tag-ui variant="default">`
     render identically without falling through to base. */
  :scope[variant="default"] {
    --tag-bg-default: var(--a-bg-muted);
    --tag-fg-default: var(--a-fg);
  }

  /* 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, var(--tag-focus-ring-default));
  }

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

  [slot="dismiss"]:hover {
    color: var(--tag-dismiss-fg-hover, var(--tag-dismiss-fg-hover-default));
    background: var(--tag-dismiss-bg-hover, var(--tag-dismiss-bg-hover-default));
  }

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