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

@mixin kbq-tooltip-color($style-name) {
    & .kbq-tooltip__inner {
        color: var(--kbq-tooltip-#{$style-name}-text);

        background-image: linear-gradient(
            var(--kbq-tooltip-#{$style-name}-background),
            var(--kbq-tooltip-#{$style-name}-background)
        );
        background-color: var(--kbq-background-bg);
    }

    & .kbq-tooltip__arrow {
        background-color: var(--kbq-tooltip-#{$style-name}-background);
    }

    &.kbq-tooltip_arrowless {
        box-shadow: var(--kbq-tooltip-#{$style-name}-shadow);
    }
}

@mixin kbq-tooltip-theme() {
    .kbq-tooltip.kbq-theme {
        @include kbq-tooltip-color(theme-fade-off);
    }

    .kbq-tooltip.kbq-contrast {
        @include kbq-tooltip-color(contrast-fade-off);
    }

    .kbq-tooltip.kbq-contrast-fade {
        @include kbq-tooltip-color(contrast-fade-on);

        &.kbq-tooltip,
        & .kbq-tooltip__arrow {
            box-shadow: var(--kbq-shadow-popup);
        }
    }

    .kbq-tooltip.kbq-warning {
        @include kbq-tooltip-color(warning-fade-off);
    }

    .kbq-tooltip.kbq-error {
        @include kbq-tooltip-color(error-fade-off);
    }
}

@mixin kbq-tooltip-typography() {
    .kbq-tooltip {
        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);

        .kbq-tooltip__header {
            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
        }
    }
}