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

@mixin kbq-icon-item-style($type, $style-name) {
    $base: icon-item-filled-#{$type}-#{$style-name};

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

@mixin kbq-icon-item-theme() {
    .kbq-icon-item.kbq-icon-item_filled {
        // set default color
        @include kbq-icon-item-style(fade-on, contrast);

        &.kbq-icon-item_fade-off {
            &.kbq-theme {
                @include kbq-icon-item-style(fade-off, theme);
            }

            &.kbq-contrast {
                @include kbq-icon-item-style(fade-off, contrast);
            }

            &.kbq-error {
                @include kbq-icon-item-style(fade-off, error);
            }

            &.kbq-warning {
                @include kbq-icon-item-style(fade-off, warning);
            }

            &.kbq-success {
                @include kbq-icon-item-style(fade-off, success);
            }
        }

        &.kbq-icon-item_fade-on {
            &.kbq-theme {
                @include kbq-icon-item-style(fade-on, theme);
            }

            &.kbq-contrast {
                @include kbq-icon-item-style(fade-on, contrast);
            }

            &.kbq-error {
                @include kbq-icon-item-style(fade-on, error);
            }

            &.kbq-warning {
                @include kbq-icon-item-style(fade-on, warning);
            }

            &.kbq-success {
                @include kbq-icon-item-style(fade-on, success);
            }
        }
    }
}