@layer components {
  .tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--block-space);
  }

  .tabs__item {
    padding: 0.75rem 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: var(--color-ink-light);
    font-size: var(--text-footnote);
    font-weight: 500;
    transition: color 150ms ease, border-color 150ms ease;

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

    &--active {
      color: var(--color-ink);
      border-bottom-color: var(--color-link);
    }
  }

  .tabs__content {
    display: none;
  }

  .tabs__content.tabs__content--active {
    display: block;
  }
}