/*
 * A segmented switch: two or three options in a tray, the current one raised
 * on white. The market map's Intraday / Year to date. 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 raised 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>
 *
 * The options share the tray's width below 768px, and are touch-sized
 * wherever the pointer is coarse.
 */
@layer components {
  .segmented {
    display: flex;
    gap: var(--space-3xs);
    padding: var(--space-3xs);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-control);
    background-color: var(--color-surface-raised);

    @media (width >= 768px) {
      display: inline-flex;
    }
  }

  .segmented__option {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-block-size: var(--target-min);
    padding-inline: var(--space-md);
    border: var(--rule-width) solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    text-decoration: none;

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

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

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

    &[aria-current="true"],
    &:has(input:checked) {
      border-color: var(--color-rule);
      background-color: var(--color-surface);
      box-shadow: var(--shadow-raised);
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
    }

    @media (width >= 768px) {
      flex: none;
    }

    /* Smaller from 768px, but only under a mouse: a tablet keeps the 44px. */
    @media (width >= 768px) and (pointer: fine) {
      min-block-size: var(--control-height-sm);
    }
  }
}