@use '../core/styles/common/tokens';

@mixin kbq-tab-item-state($type, $sub-type, $style-name) {
    $base: tabs-tab-item-#{$type}-#{$sub-type}-#{$style-name};

    background: var(--kbq-#{$base}-background);
    color: var(--kbq-#{$base}-text-color);

    & .kbq-icon.kbq-empty {
        color: var(--kbq-#{$base}-icon-color);
    }
}

@mixin kbq-tab-item-style($type, $sub-type) {
    @include kbq-tab-item-state($type, $sub-type, default);

    &:is(:hover, .kbq-hover):not(.kbq-disabled) {
        @include kbq-tab-item-state($type, $sub-type, states-hover);
    }

    &.kbq-tab-label_empty {
        color: var(--kbq-foreground-contrast-secondary);
    }

    &.kbq-selected {
        @include kbq-tab-item-state($type, $sub-type, states-selected);

        &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
            background: none;
        }

        &:is(:hover, .kbq-hover) {
            @include kbq-tab-item-state($type, $sub-type, states-selected-hover);

            &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
                background: none;
            }
        }
    }

    &.cdk-keyboard-focused {
        border-color: var(--kbq-tabs-tab-item-#{$type}-#{$sub-type}-states-focused-focus-outline-color);
    }

    &.kbq-disabled {
        @include kbq-tab-item-state($type, $sub-type, states-disabled);

        &.kbq-selected {
            @include kbq-tab-item-state($type, $sub-type, states-selected-disabled);
        }
    }
}

@mixin kbq-tabs-theme() {
    .kbq-tab-group {
        &.kbq-tab-group_filled {
            &.kbq-tab-group_on-background {
                .kbq-tab-header {
                    background: var(--kbq-tabs-tab-stack-filled-on-background-background);
                }

                & .kbq-tab-label {
                    @include kbq-tab-item-style(filled, on-background);
                }
            }

            &.kbq-tab-group_on-surface {
                .kbq-tab-header {
                    background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
                }

                // FIXME: need check, tab-group has different subtype
                & .kbq-tab-label {
                    @include kbq-tab-item-style(filled, on-background);
                }
            }
        }

        &.kbq-tab-group_transparent {
            &.kbq-tab-group_on-background {
                .kbq-tab-header {
                    background: var(--kbq-tabs-tab-stack-transparent-on-background-background);
                }

                & .kbq-tab-label {
                    @include kbq-tab-item-style(transparent, on-background);
                }
            }

            &.kbq-tab-group_on-surface {
                .kbq-tab-header {
                    background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);
                }

                & .kbq-tab-label {
                    @include kbq-tab-item-style(transparent, on-background);
                }
            }
        }
    }

    .kbq-tab-nav-bar {
        &.kbq-tab-nav-bar_filled {
            &.kbq-tab-nav-bar_on-background {
                background: var(--kbq-tabs-tab-stack-filled-on-background-background);

                & .kbq-tab-link {
                    @include kbq-tab-item-style(filled, on-background);
                }
            }

            &.kbq-tab-nav-bar_on-surface {
                background: var(--kbq-tabs-tab-stack-filled-on-surface-background);

                & .kbq-tab-link {
                    @include kbq-tab-item-style(filled, on-background);
                }
            }
        }

        &.kbq-tab-nav-bar_transparent {
            &.kbq-tab-nav-bar_on-background {
                background: var(--kbq-tabs-tab-stack-transparent-on-background-background);

                & .kbq-tab-link {
                    @include kbq-tab-item-style(transparent, on-background);
                }
            }

            &.kbq-tab-nav-bar_on-surface {
                background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);

                & .kbq-tab-link {
                    @include kbq-tab-item-style(transparent, on-background);
                }
            }
        }
    }
}

@mixin kbq-tabs-typography() {
    .kbq-tab-label,
    .kbq-tab-link {
        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
    }
}