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

@mixin kbq-risk-level-filled-color($type, $sub-type, $style-name) {
    $base: risk-level-#{$type}-#{$sub-type}-#{$style-name};
    border: transparent;

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

@mixin kbq-risk-level-outline-color($type, $sub-type, $style-name) {
    $base: risk-level-#{$type}-#{$sub-type}-#{$style-name};

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

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

@mixin kbq-risk-level-theme() {
    .kbq-risk-level_filled {
        &.kbq-risk-level_fade-contrast {
            @include kbq-risk-level-filled-color(filled, fade-on, contrast);
        }

        &.kbq-risk-level_fade-success {
            @include kbq-risk-level-filled-color(filled, fade-on, success);
        }

        &.kbq-risk-level_fade-warning {
            @include kbq-risk-level-filled-color(filled, fade-on, warning);
        }

        &.kbq-risk-level_fade-error {
            @include kbq-risk-level-filled-color(filled, fade-on, error);
        }

        &.kbq-risk-level_success {
            @include kbq-risk-level-filled-color(filled, fade-off, success);
        }

        &.kbq-risk-level_warning {
            @include kbq-risk-level-filled-color(filled, fade-off, warning);
        }

        &.kbq-risk-level_error {
            @include kbq-risk-level-filled-color(filled, fade-off, error);
        }
    }

    .kbq-risk-level_outline {
        &.kbq-risk-level_fade-contrast {
            @include kbq-risk-level-outline-color(outline, fade-on, contrast);
        }

        &.kbq-risk-level_fade-success {
            @include kbq-risk-level-outline-color(outline, fade-on, success);
        }

        &.kbq-risk-level_fade-warning {
            @include kbq-risk-level-outline-color(outline, fade-on, warning);
        }

        &.kbq-risk-level_fade-error {
            @include kbq-risk-level-outline-color(outline, fade-on, error);
        }
    }
}

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