/* Safari 17.x bug: `:scope:not(...):hover` inside `@scope` doesn't match
   the scope root. Plain selector outside works. The @scope is
   `(toggle-option-ui)` — NOT `(toggle-group-ui)` — so the moved-out
   selector targets `toggle-option-ui:hover`. See docs/BROWSER-COMPAT.md §3a. */
toggle-option-ui:not([disabled]):hover {
  --toggle-option-bg: var(--toggle-option-bg-hover);
  --toggle-option-fg: var(--toggle-option-fg-hover);
}

@scope (toggle-group-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --toggle-group-border-width: 1px;
    --toggle-group-border-color: var(--a-ui-border);
    --toggle-group-radius:       var(--a-radius);
    --toggle-group-height:       var(--a-size);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    box-sizing: border-box;
    display: flex;
    border: var(--toggle-group-border-width) solid var(--toggle-group-border-color);
    border-radius: var(--toggle-group-radius);
    overflow: hidden;
  }

  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
  :scope[inline] { display: inline-flex; }
}

@scope (toggle-option-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --toggle-option-gap:          var(--a-space-1);
    --toggle-option-height:       var(--a-size);
    --toggle-option-px:           var(--a-ui-px);
    --toggle-option-border-width: 1px;
    --toggle-option-border-color: var(--a-ui-border);

    /* ── Colors ── */
    --toggle-option-bg:           transparent;
    --toggle-option-fg:           var(--a-fg-muted);
    --toggle-option-fg-hover:     var(--a-fg);
    --toggle-option-bg-hover:     var(--a-bg-muted);
    --toggle-option-selected-bg:  var(--a-accent-muted);
    --toggle-option-selected-fg:  var(--a-accent-bg);
    --toggle-option-fg-disabled:  var(--a-ui-text-disabled);

    /* ── Typography ── */
    --toggle-option-font-size:    var(--a-ui-size);

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

    /* ── State ── */
    --toggle-option-focus-ring:   var(--a-focus-ring);
  }

  :scope {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--toggle-option-gap);
    min-height: var(--toggle-option-height);
    padding: 0 var(--toggle-option-px);
    border: none;
    background: var(--toggle-option-bg);
    color: var(--toggle-option-fg);
    font: inherit;
    /* font-family floor — see segment.css rationale (inline default; this
       scope's tokens don't use the -default suffix). */
    font-family: var(--toggle-option-font-family, var(--a-font-family-ui));
    font-size: var(--toggle-option-font-size);
    cursor: pointer;
    transition:
      background var(--toggle-option-duration) var(--toggle-option-easing),
      color var(--toggle-option-duration) var(--toggle-option-easing);
  }

  /* Adjacent options share borders */
  :scope + :scope {
    border-inline-start: var(--toggle-option-border-width) solid var(--toggle-option-border-color);
  }

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

  :scope:focus-visible {
    outline: none;
    box-shadow: var(--toggle-option-focus-ring);
    z-index: 1;
  }

  :scope[data-selected] {
    --toggle-option-bg: var(--toggle-option-selected-bg);
    --toggle-option-fg: var(--toggle-option-selected-fg);
  }

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

  /* Icon sizing */
  icon-ui {
    --a-icon-size: var(--toggle-option-font-size);
  }

  [data-text] {
    white-space: nowrap;
  }
}
