/*
 * Tabs: links between sibling pages of one section, drawn as a row on a
 * hairline with the current tab underlined in ink (DESIGN.md §5).
 */
@layer components {
  .tabs {
    margin-block-end: var(--space-7);
    border-block-end: var(--border);

    & ul {
      display: flex;
      gap: var(--space-6);
      list-style: none;
      padding: 0;
    }

    & li + li {
      margin: 0;
    }

    & a {
      display: block;
      padding-block: var(--space-3);
      margin-block-end: -1px;
      border-block-end: 2px solid transparent;
      font: var(--text-body-strong);
      color: var(--color-muted);
      text-decoration: none;

      &:hover {
        color: var(--color-ink);
        border-block-end-color: var(--color-line);
      }

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