@layer components {
  /* A row of links between sibling pages, underlining the current one */
  .tabs {
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space-double);
    overflow-x: auto;
  }

  .tabs__tab {
    border-block-end: 2px solid transparent;
    color: var(--color-ink-dark);
    font-weight: 600;
    padding-block: var(--block-space-half);
    white-space: nowrap;

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-ink);
      }
    }

    &[aria-current] {
      border-block-end-color: var(--color-link);
      color: var(--color-ink);
    }
  }
}