@layer components {
  .tabs {
    display: flex;
    gap: var(--inline-space);
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .tabs__tab {
    border-block-end: 2px solid transparent;
    color: var(--color-ink-medium);
    flex-shrink: 0;
    font-size: var(--text-x-small);
    padding-block: 0.75ch;
    text-decoration: none;
    white-space: nowrap;

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

    &[aria-current] {
      border-block-end-color: var(--tabs-current-border-color, var(--color-primary));
      color: var(--color-ink);
      font-weight: 600;
    }
  }
}