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

@mixin kbq-alert-style($type, $style-name) {
    background: var(--kbq-alert-#{$type}-#{$style-name}-container-background);

    .kbq-alert__title {
        color: var(--kbq-alert-#{$type}-#{$style-name}-container-title);
    }

    .kbq-alert__text {
        color: var(--kbq-alert-#{$type}-#{$style-name}-container-text);
    }
}

@mixin kbq-alert-theme() {
    .kbq-alert__close:focus {
        outline: none;
    }

    .kbq-alert.kbq-alert_default {
        &.kbq-alert_error {
            @include kbq-alert-style(default, error);
        }

        &.kbq-alert_warning {
            @include kbq-alert-style(default, warning);
        }

        &.kbq-alert_success {
            @include kbq-alert-style(default, success);
        }

        &.kbq-alert_info {
            @include kbq-alert-style(default, info);
        }
    }

    .kbq-alert.kbq-alert_colored {
        &.kbq-alert_error {
            @include kbq-alert-style(colored, error);
        }

        &.kbq-alert_warning {
            @include kbq-alert-style(colored, warning);
        }

        &.kbq-alert_success {
            @include kbq-alert-style(colored, success);
        }

        &.kbq-alert_info {
            @include kbq-alert-style(colored, info);
        }
    }
}

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

        .kbq-alert__title {
            @include kbq-typography-level-to-styles-css-variables(typography, subheading);
        }

        &.kbq-alert_compact .kbq-alert__title {
            @include kbq-typography-level-to-styles-css-variables(typography, text-big-strong);
        }
    }
}