@use '../core/styles/common/vendor-prefixes';
@use './tabs-common';

@include tabs-common.paginated-tab-header;

.kbq-tab-header {
    display: flex;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.kbq-tab-list__content {
    display: flex;

    .kbq-tab-group_align-labels-center & {
        justify-content: center;
    }

    .kbq-tab-group_align-labels-end & {
        justify-content: flex-end;
    }
}

.kbq-tab-header_vertical .kbq-tab-list__content {
    flex-direction: column;
}

.kbq-tab-header__container {
    display: flex;
    flex-grow: 1;
    z-index: 1;
    overflow: hidden;
}

.kbq-tab-list {
    position: relative;
    width: 100%;
    transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
}

.kbq-tab-label {
    @include tabs-common.tab-label;
    @include vendor-prefixes.user-select(none);

    .kbq-tab-group_stretch-labels & {
        flex-basis: 0;
        flex-grow: 1;
    }
}