/* Safari 17.x bug: `:scope:not(...):hover` (Flavor A) and `:scope[selected]`
   (Flavor B — attribute-removal restyle) both fail inside `@scope`.
   Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
segment-ui:not([disabled]):not([selected]):hover {
  color: var(--segment-fg-hover);
}
segment-ui[selected] {
  color: var(--segment-fg-selected);
}

@scope (segment-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --segment-px:              var(--a-ui-px);
    --segment-gap:             var(--a-space-1);
    --segment-radius:          calc(var(--a-radius) - 2px);

    /* ── Typography ── */
    --segment-font-size:       var(--a-ui-size);
    --segment-font-weight:     var(--a-ui-weight);
    --segment-font-family:     var(--a-font-family-ui);

    /* ── Colors ── */
    --segment-fg:              var(--a-ui-text-subtle);
    --segment-fg-hover:        var(--a-ui-text-hover);
    --segment-fg-selected:     var(--a-chrome-dark);
    --segment-fg-disabled:     var(--a-ui-text-disabled);

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

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

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 0;
    gap: var(--segment-gap);

    padding-inline: var(--segment-px);

    font: inherit;
    /* font-family floor — `font: inherit` alone has no default, so a broken
       inherited font (e.g. serif host doc) leaks straight through. Anchor to
       the UI font; overridable via --segment-font-family. */
    font-family: var(--segment-font-family);
    font-size: var(--segment-font-size);
    font-weight: var(--segment-font-weight);
    line-height: 1;
    color: var(--segment-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;

    position: relative;
    z-index: 1;
    cursor: pointer;
    user-select: none;
    border-radius: var(--segment-radius);
    background: transparent;

    transition:
      color var(--segment-duration) var(--segment-easing),
      background var(--segment-duration) var(--segment-easing);
  }

  /* Text rendered via ::after so consumers can drive label via [text].
     Under the parent's `display: flex`, ::after becomes a flex item with
     `min-width: auto` (= min-content), which would force the segment to
     overflow when the label is wider than the available track. Setting
     `min-width: 0` re-enables shrinking, and `text-overflow: ellipsis`
     has to live here (not on :scope) because text-overflow does not
     inherit and only applies to the box that owns the inline text.

     `[text]` attribute selector gates the ::after so consumers using
     slotted content (`<segment-ui>Label</segment-ui>`) don't get an
     empty pseudo-element flex item — which would otherwise inherit
     the host's `gap` and add a phantom `--segment-gap`-wide trailing
     space after the slotted content. Mirrors `button.css` / `tag.css`. */
  :scope[text]::after {
    content: attr(text);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* States — hover + [selected] rules moved outside @scope; see Safari 17.x bug note at top. */

  :scope:focus-visible {
    outline: none;
    box-shadow: var(--segment-focus-ring);
  }

  :scope[disabled] {
    color: var(--segment-fg-disabled);
    cursor: not-allowed;
    pointer-events: none;
  }
}
