/*
 * A tab bar: the company pages' Overview … Filings, 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.
 *
 * Caps condensed and green; the current tab is ink on a 2px ink underline
 * that sits on the bar's hairline (tasks/redesign, D2). It scrolls sideways
 * rather than wrapping when it runs out of room.
 */
@layer components {
  .tabs {
    display: flex;
    align-items: stretch;
    gap: var(--space-lg);
    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);
    margin-block-end: -1px;
    border-block-end: 2px solid transparent;
    color: var(--color-link);
    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;
    }

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

  /*
   * A menu in the bar (the company pages' Financials): a <details> whose
   * summary is a tab, lit while one of its items is the current page.
   * Without anchor positioning its items open in the bar itself, after the
   * summary, as tabs; with it they drop under the summary as a card. The
   * card is `position: fixed` because the bar scrolls sideways, and an
   * absolutely placed one would be clipped by it.
   *
   * The gap is the open menu's alone: a closed <details> still lays out
   * its (hidden) content box as a flex item, and a gap before it doubled
   * the space after the summary.
   */
  .tabs__menu {
    display: flex;

    &[open] {
      gap: var(--space-lg);
    }
  }

  .tabs__summary {
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }

    & .icon {
      transition: rotate var(--duration-fast);
    }

    [open] > & .icon {
      rotate: 180deg;
    }

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

  .tabs__menu-panel {
    display: flex;
    gap: var(--space-lg);
  }

  @supports (anchor-name: --tabs-menu) {
    .tabs__menu[open] {
      gap: 0;
    }

    .tabs__summary {
      anchor-name: --tabs-menu;
    }

    .tabs__menu-panel {
      position: fixed;
      position-anchor: --tabs-menu;
      inset-block-start: calc(anchor(bottom) + var(--space-2xs));
      inset-inline-start: anchor(left);
      z-index: 30;
      flex-direction: column;
      gap: 0;
      padding-block: var(--space-2xs);
      border: var(--rule-width) solid var(--color-ink);
      background-color: var(--color-field);
      box-shadow: var(--shadow-overlay);
      position-try-fallbacks: flip-inline;
    }

    .tabs__menu-item {
      margin-block-end: 0;
      padding-inline: var(--space-md);
      border-block-end: 0;

      &[aria-current="page"] {
        box-shadow: inset 2px 0 0 var(--color-ink);
      }
    }
  }
}