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

@mixin _kbq-hint-color($type, $style-name) {
    color: var(--kbq-hint-#{$type}-#{$style-name}-text);

    & .kbq-icon.kbq-empty {
        color: var(--kbq-hint-#{$type}-#{$style-name}-icon) !important;
    }
}

@mixin kbq-hint-theme() {
    .kbq-hint {
        &.kbq-contrast-fade {
            @include _kbq-hint-color(fill-text-on, fade-contrast);
        }

        &.kbq-success {
            @include _kbq-hint-color(fill-text-on, success);
        }

        &.kbq-warning {
            @include _kbq-hint-color(fill-text-on, warning);
        }

        &.kbq-error {
            @include _kbq-hint-color(fill-text-on, error);
        }

        &.kbq-hint_fill-text-off {
            &.kbq-contrast-fade {
                @include _kbq-hint-color(fill-text-off, fade-contrast);
            }

            &.kbq-success {
                @include _kbq-hint-color(fill-text-off, success);
            }

            &.kbq-warning {
                @include _kbq-hint-color(fill-text-off, warning);
            }

            &.kbq-error {
                @include _kbq-hint-color(fill-text-off, error);
            }
        }
    }
}

@mixin kbq-hint-typography() {
    .kbq-hint .kbq-hint__text {
        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
    }

    .kbq-hint.kbq-hint_compact .kbq-hint__text {
        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
    }
}