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

@mixin _icon($left-icon, $right-icon) {
    .kbq-icon.kbq-empty {
        color: $left-icon;

        &.kbq-icon_left {
            color: $left-icon;
        }

        &.kbq-icon_right {
            color: $right-icon;
        }
    }
}

@mixin kbq-button-type($type, $sub-type) {
    $base-path: button-#{$type}-#{$sub-type};

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

    @include _icon(var(--kbq-#{$base-path}-left-icon), var(--kbq-#{$base-path}-right-icon));

    &:hover:not(.kbq-disabled),
    &.kbq-hover:not(.kbq-disabled) {
        background: var(--kbq-#{$base-path}-states-hover-background);
    }

    &:active:not(.kbq-disabled),
    &.kbq-active:not(.kbq-disabled) {
        background: var(--kbq-#{$base-path}-states-active-background);
    }

    &.kbq-disabled {
        color: var(--kbq-#{$base-path}-states-disabled-foreground);
        background: var(--kbq-#{$base-path}-states-disabled-background);
        border-color: var(--kbq-#{$base-path}-states-disabled-border);

        @include _icon(
            var(--kbq-#{$base-path}-states-disabled-left-icon),
            var(--kbq-#{$base-path}-states-disabled-right-icon)
        );
    }
}

@mixin kbq-button-theme() {
    .kbq-button,
    .kbq-button-icon {
        -webkit-font-smoothing: antialiased;

        &.kbq-button_filled {
            &.kbq-contrast {
                @include kbq-button-type(filled, contrast-fade-off);
            }

            &.kbq-contrast-fade {
                @include kbq-button-type(filled, contrast-fade-on);
            }
        }

        &.kbq-button_outline {
            &.kbq-theme-fade {
                @include kbq-button-type(outline, theme-fade-on);
            }

            &.kbq-contrast-fade {
                @include kbq-button-type(outline, contrast-fade-on);
            }
        }

        &.kbq-button_transparent {
            &.kbq-theme {
                @include kbq-button-type(transparent, theme-fade-on);
            }

            &.kbq-contrast {
                @include kbq-button-type(transparent, contrast-fade-on);
            }
        }

        &.kbq-button_filled,
        &.kbq-button_outline,
        &.kbq-button_transparent {
            // :not(.kbq-disabled): a disabled <a kbq-button> can keep DOM focus (tabindex=-1 does
            // not blur it), and FocusMonitor stays attached for the whole component lifetime.
            &.cdk-keyboard-focused:not(.kbq-disabled) {
                $focused-color: var(--kbq-states-line-focus-theme);
                outline: 1px solid $focused-color;
                border-color: $focused-color;
            }
        }
    }
}

@mixin kbq-button-typography() {
    .kbq-button,
    .kbq-button-icon {
        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
    }
}