/*
 * A text toggle: two or three options as small-caps links, the current one
 * ink on an underline — the market map's INTRADAY | YEAR TO DATE
 * (tasks/redesign, D2). The class is still `.segmented`, from when it was a
 * tray. The options are links that renavigate a frame; the current one
 * carries aria-current, which is the whole of its state.
 *
 *   <div class="segmented" role="group" aria-label="Range">
 *     <a class="segmented__option" href="…" aria-current="true">Year to date</a>
 *   </div>
 *
 * The options can also be radios, one visually hidden in each label — the
 * screener pill's period (M09-D4), which posts with its form. The checked one
 * is marked the same way, and the focus ring goes on its label:
 *
 *   <div class="segmented" role="group" aria-label="Period">
 *     <label class="segmented__option">
 *       <input type="radio" class="sr-only" name="…" value="REVENUE:T" checked> TTM
 *     </label>
 *   </div>
 *
 * Or buttons that act on the page without a request — the diff page's kind
 * filter (M12) — the pressed one marked with aria-pressed.
 *
 * The options are touch-sized wherever the pointer is coarse.
 */
@layer components {
  .segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 var(--space-md);
  }

  .segmented__option {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-min);
    border-block-end: 2px solid transparent;
    color: var(--color-link);
    font-family: var(--font-ui);
    font-size: var(--text-caps);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;

    &:hover {
      color: var(--color-link-hover);
      text-decoration: none;
    }

    &:has(input) {
      cursor: pointer;
    }

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

    &[aria-current="true"],
    &[aria-pressed="true"],
    &:has(input:checked) {
      border-block-end-color: var(--color-ink);
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
    }

    /* Tighter under a mouse: a touch screen keeps the 44px. */
    @media (pointer: fine) {
      min-block-size: var(--control-height-sm);
    }
  }
}