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

@mixin tab-label {
    position: relative;

    box-sizing: border-box;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    text-align: center;
    white-space: nowrap;

    cursor: pointer;

    padding: tokens.kbq-difference-series-css-variables(
            [tabs-size-tab-item-padding-vertical,
            tabs-size-tab-item-focus-outline-width]
        )
        tokens.kbq-difference-series-css-variables(
            [tabs-size-tab-item-padding-horizontal,
            tabs-size-tab-item-focus-outline-width]
        );

    border: {
        width: var(--kbq-tabs-size-tab-item-focus-outline-width);
        style: solid;
        color: transparent;
        radius: var(--kbq-tabs-size-tab-item-border-radius);
    }

    outline: none;

    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
        padding-left: 14px;
        padding-right: 14px;
    }

    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left {
        padding-left: tokens.kbq-difference-series-css-variables(
            [tabs-size-tab-item-padding-horizontal,
            tabs-size-tab-item-focus-outline-width]
        );
    }

    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right {
        padding-right: tokens.kbq-difference-series-css-variables(
            [tabs-size-tab-item-padding-horizontal,
            tabs-size-tab-item-focus-outline-width]
        );
    }

    &.kbq-selected {
        cursor: default;
    }

    &.cdk-keyboard-focused {
        z-index: 1;
    }

    &.kbq-disabled {
        pointer-events: none;
    }

    & .kbq-tab-label__content {
        display: flex;
        align-items: center;
        overflow: hidden;

        gap: var(--kbq-tabs-size-tab-item-content-gap-horizontal);
    }

    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        bottom: -10px;
    }

    &.kbq-tab-label_icon-only {
        width: var(--kbq-size-3xl);
        height: var(--kbq-size-3xl);
        padding: 0 !important;
        margin-inline: var(--kbq-size-xs);
        box-sizing: content-box;

        // Keep the space between icon-only tabs clickable after adding margins.
        &:not(.kbq-tab-label_vertical):after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            // Absolute offsets are calculated from the padding box, so we add
            // focus outline width to fully cover the visual margin gap.
            left: calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
            right: calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
            background: transparent;
        }
    }

    &.kbq-tab-label_vertical {
        justify-content: flex-start;

        & .kbq-tab-label__content:not(.kbq-tab-label__template) {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        &.kbq-tab-label_icon-only {
            margin-inline: 0;
            justify-content: center;
        }
    }
}

// Common styles for paginated tabs, used by `.kbq-tab-header` and `.kbq-tab-nav-bar`
@mixin paginated-tab-header {
    .kbq-tab-header__pagination {
        @include vendor-prefixes.user-select(none);

        position: relative;
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 2;
        -webkit-tap-highlight-color: transparent;
        touch-action: none;
        padding: 0 var(--kbq-size-m);

        .kbq-tab-header__pagination-controls_enabled & {
            display: flex;
        }

        &:not(.kbq-disabled) {
            cursor: pointer;
        }
    }

    .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
        padding: 8px 0;
    }

    .kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        background: var(--kbq-line-contrast-less);
    }

    .kbq-tab-list__active-tab-underline {
        display: none;
    }

    .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline {
        display: block;
        position: absolute;
        bottom: 0;
        height: 3px;
        border-radius: 2px 2px 0 0;
        background: var(--kbq-line-contrast);
        transition: all 0.2s ease-in-out;
    }
}