/*
 * A tab bar: the company pages' Overview … Metrics & Ratios, and the
 * statements' period switcher. The tabs are `styled_link_to` links; the
 * current one carries aria-current="page", which is the whole of its state.
 *
 * It scrolls sideways rather than wrapping when it runs out of room.
 */
@layer components {
  .tabs {
    display: flex;
    align-items: stretch;
    gap: var(--space-3xs);
    overflow-x: auto;
    scrollbar-width: none;
    border-block-end: var(--rule-width) solid var(--color-rule);
  }

  .tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: var(--target-min);
    padding-inline: var(--space-sm);
    margin-block-end: -1px;
    border-block-end: 2.5px solid transparent;
    color: var(--color-ink-muted);
    font-size: var(--text-ui);
    white-space: nowrap;
    text-decoration: none;

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

    &[aria-current="page"] {
      border-block-end-color: var(--color-accent);
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
    }
  }

  /* The external links at the end of the bar (EDGAR's 10-Q and 10-K). */
  .tabs__tab--external {
    color: var(--color-link);
    font-size: var(--text-ui-sm);
  }
}