@layer components {
    .tabs {
        display: flex;
        gap: var(--space-1);
        border-block-end: 2px solid var(--line);
        overflow-x: auto;
    }

    .tabs a,
    .tabs button {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target);
        padding-inline: var(--space-4);
        border: 0;
        background: none;
        text-decoration: none;
        color: var(--fog);
        font-weight: 600;
        white-space: nowrap;
        border-block-end: 2px solid transparent;
        margin-block-end: -2px;
    }

    .tabs .active {
        color: var(--sky-deep);
        border-block-end-color: var(--sky);
    }
}