.cx-tabs {
    min-width: 0;
    color: var(--cx-color-text);
    font-family: var(--cx-font-family);
}

.cx-tabs-list {
    display: flex;
    align-items: flex-end;
    gap: var(--cx-space-4);
    min-width: 0;
    padding-inline: var(--cx-space-5);
    overflow-x: auto;
    overflow-y: hidden;
    color: var(--cx-color-text-muted);
    background: var(--cx-color-surface);
    border-block-end: 1px solid var(--cx-color-border);
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.cx-tab {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    color: var(--cx-color-text-muted);
    background: transparent;
    border: 0;
    border-block-end: 2px solid transparent;
    font: inherit;
    font-size: var(--cx-font-size-sm);
    font-weight: var(--cx-font-weight-normal);
    white-space: nowrap;
    cursor: pointer;
}

.cx-tab:not(:disabled):hover {
    color: var(--cx-color-text);
    background: color-mix(in oklab, var(--cx-color-surface-muted) 48%, transparent);
}

.cx-tab:focus-visible {
    z-index: 1;
    border-radius: var(--cx-radius-sm) var(--cx-radius-sm) 0 0;
    outline: 2px solid var(--cx-color-primary);
    outline-offset: calc(var(--cx-space-1) * -1);
}

.cx-tab--active {
    color: var(--cx-color-text);
    border-block-end-color: var(--cx-color-primary);
    font-weight: var(--cx-font-weight-medium);
}

.cx-tab--disabled {
    color: var(--cx-color-text-subtle);
    cursor: not-allowed;
    opacity: 0.65;
}

.cx-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    color: var(--cx-color-text-subtle);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: var(--cx-font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cx-tab--active .cx-tab-badge {
    color: var(--cx-color-text-muted);
}

.cx-tab-panel {
    min-width: 0;
    padding-block: var(--cx-space-5);
}

.cx-tab-panel[hidden] {
    display: none;
}

.cx-tab-panel:focus-visible {
    border-radius: var(--cx-radius-sm);
    outline: 2px solid var(--cx-color-primary);
    outline-offset: var(--cx-space-1);
}

.cx-tab-collection {
    display: grid;
    gap: var(--cx-space-3);
    min-width: 0;
    padding-inline: var(--cx-space-5);
}

.cx-tab-collection > .cx-button {
    justify-self: start;
}

@media (max-width: 48rem) {
    .cx-tabs-list {
        padding-inline: var(--cx-space-3);
    }

    .cx-tab-panel {
        padding-block: var(--cx-space-4);
    }

    .cx-tab-collection {
        padding-inline: var(--cx-space-3);
    }
}

.cx-tab-panel:has(> .cx-tab-collection--flush-start) {
    padding-block-start: 0;
}