@layer components {
  /* ——— A few choices side by side, one of them on ———
     Real radios in labels, so the choice is the control's own; the checked
     one wears mizu, the selected voice (badges.css). Framed as one group, so
     it reads as one control and not as a row of buttons. A finger gets
     bigger segments; a folder's own switch on its row, smaller ones. */
  .segmented {
    --segment-inline: 1.875rem;
    --segment-block: 1.625rem;

    display: inline-flex;
    gap: calc(var(--border-size) * 2);
    padding: calc(var(--border-size) * 2);
    border: var(--border);
    border-radius: var(--border-radius);

    label {
      --icon-size: 1rem;

      display: grid;
      place-items: center;
      inline-size: var(--segment-inline);
      block-size: var(--segment-block);
      color: var(--color-ink-subtle);
      border-radius: calc(var(--border-radius) - var(--border-size));
      cursor: pointer;

      &:hover {
        color: var(--color-ink);
        background-color: var(--color-surface);
      }

      &:has(:focus-visible) {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
      }
    }
  }

  /* The one on: a checked radio's label, or the current page's link below. */
  .segmented label:has(:checked),
  .segmented > .btn[aria-current] {
    color: var(--color-selected-ink);
    background-color: var(--color-selected);
  }

  .segmented--small {
    --segment-inline: 1.625rem;
    --segment-block: 1.375rem;

    label {
      --icon-size: 0.875rem;
    }
  }

  @media (any-hover: none) {
    .segmented {
      --segment-inline: 2.5rem;
      --segment-block: 2.25rem;
    }
  }

  /* Words for segments — a history's "What changed | This version": each
     as wide as its word, in the small type. After the finger's width above,
     so a word is never squeezed to a glyph's box. */
  .segmented--text {
    --segment-inline: auto;

    label {
      padding-inline: var(--inline-space);
      font-size: var(--text-small);
    }
  }

  /* Links as segments — Board | Table on a list, Cards | Rows on a stage or
     a column (crm-v2, the redraw): the same frame and voice as the words
     above, a page apart rather than a radio, the current one on. A quiet
     button retuned, as buttons.css's variants are: its hover is already the
     label's surface. */
  .segmented > .btn {
    --btn-padding: 0 var(--inline-space);
    --btn-color: var(--color-ink-subtle);
    --btn-color-hover: var(--color-ink);
    --btn-border-color: transparent;
    --btn-radius: calc(var(--border-radius) - var(--border-size));

    block-size: var(--segment-block);
  }
}