/*
 * 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 share the tray's width below 768px, and are touch-sized there.
 */
@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;
    }

    &[aria-current="true"] {
      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;
      min-block-size: var(--control-height-sm);
    }
  }
}