/* 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, var(--segment-fg-hover-default));
}
segment-ui[selected] {
  color: var(--segment-fg-selected, var(--segment-fg-selected-default));
}

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

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

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

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

    /* ── Focus ── */
    --segment-focus-ring-default:      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, var(--segment-gap-default));

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

    font: inherit;
    font-size: var(--segment-font-size, var(--segment-font-size-default));
    font-weight: var(--segment-font-weight, var(--segment-font-weight-default));
    line-height: 1;
    color: var(--segment-fg, var(--segment-fg-default));
    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, var(--segment-radius-default));
    background: transparent;

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

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

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