/* Tabs — molecule. Spec: component-specs/tabs.md */

.tabs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tabs-list-wrap {
    position: relative;
    border-bottom: var(--border-hairline) solid var(--border-default);
}

.tabs-list {
    display: flex;
    gap: 20px;
}

.tabs-trigger {
    padding-block: 10px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    font: inherit;
    font-size: var(--text-small-size);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: color 0.1s ease;
}

.tabs-trigger[data-state='active'] {
    color: var(--text-primary);
}

@media (any-hover: hover) {
    .tabs-trigger:hover {
        color: var(--text-primary);
    }
}

.tabs-indicator {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 1px;
    height: 2px;
    background: var(--color-accent);
    transform-origin: left center;
    transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.tabs-content {
    color: var(--text-secondary);
}