@use "sass:map";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-badge--theme() {

    .k-badge {
        --INTERNAL--kendo-badge-text: var( --kendo-badge-text, #{$kendo-badge-text} );
        --INTERNAL--kendo-badge-bg: var( --kendo-badge-bg, #{$kendo-badge-bg} );
        --INTERNAL--kendo-badge-border: var( --kendo-badge-border, #{$kendo-badge-border} );

        color: var( --INTERNAL--kendo-badge-text, initial );
        background-color: var( --INTERNAL--kendo-badge-bg, initial );
        border-color: var( --INTERNAL--kendo-badge-border, initial );
    }

    .k-badge-outline {
        background-color: transparent;
    }

    @each $fill-mode, $theme-colors in $kendo-badge-theme-colors {
        @each $theme-color, $color-props in $theme-colors {

            $_text: map.get( $color-props, text );
            $_bg: map.get( $color-props, bg );
            $_border: map.get( $color-props, border );

            .k-badge-#{$fill-mode}-#{$theme-color} {
                --kendo-badge-text: var( --kendo-badge-#{$fill-mode}-#{$theme-color}-text, #{$_text} );
                --kendo-badge-bg: var( --kendo-badge-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
                --kendo-badge-border: var( --kendo-badge-#{$fill-mode}-#{$theme-color}-border, #{$_border} );
            }
        }
    }
}