@use "sass:map";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "../core/functions/index.scss" as *;
@use "@progress/kendo-theme-core/scss/components/chip/_theme.scss" as *;

@mixin kendo-chip--theme() {

    @include kendo-chip--theme-base();

    .k-chip {
        &:focus,
        &.k-focus {
            border-color: $kendo-chip-focus-border;
            outline-color: $kendo-chip-focus-border;
        }


        // Fillmode: solid
        #{k-when-default($kendo-chip-default-fill-mode, "solid")}
        &.k-chip-solid {

            #{k-when-default($kendo-chip-default-theme-color, "base")}
            &.k-chip-base {

                &.k-selected {
                    color: $kendo-chip-selected-text;
                    border-color: $kendo-chip-selected-border;
                }

                &:disabled,
                &.k-disabled {
                    color: $kendo-chip-disabled-text;
                    background-color: $kendo-chip-disabled-bg;
                    border-color: $kendo-chip-disabled-border;
                }
            }

            @each $name in $kendo-chip-theme-colors {
                #{k-when-default($kendo-chip-default-theme-color, $name)}
                &.k-chip-#{$name} {
                    border-color: k-color(#{$name}-subtle);

                    &:active,
                    &.k-active {
                        background-color: k-color(#{$name}-subtle-active);
                        border-color: k-color(#{$name}-subtle-active);
                    }

                    &.k-selected {
                        border-color: k-color(#{$name}-subtle-active);
                    }

                    &:focus,
                    &.k-focus {
                        box-shadow: none;
                    }

                    &:hover,
                    &.k-hover {
                        background-color: k-color(#{$name}-subtle-hover);
                        border-color: k-color(#{$name}-subtle-hover);
                    }
                }
            }
        }

        // Fillmode: outline
        #{k-when-default($kendo-chip-default-fill-mode, "outline")}
        &.k-chip-outline {

            &:focus::after,
            &.k-focus::after {
                outline-color: $kendo-chip-focus-outline;
            }


            @each $name in $kendo-chip-theme-colors {
                #{k-when-default($kendo-chip-default-theme-color, $name)}
                &.k-chip-#{$name} {
                    color: k-color(#{$name}-on-subtle);

                    @if ($name == "warning") {
                        color: k-color(#{$name}-on-surface);
                        background-color: transparent;
                        border-color: currentColor;
                    }

                    @if ($name == "base") {
                        border-color: $kendo-chip-border;
                    }

                    &:hover,
                    &.k-hover {
                        color: k-color(#{$name}-on-subtle);
                        background-color: color-mix(in srgb, k-color(#{$name}-hover) 3%, transparent);
                        border-color: k-color(#{$name}-on-surface);
                    }

                    &:focus,
                    &.k-focus {
                        box-shadow: none;
                    }

                    &:active,
                    &.k-active,
                    &.k-selected {
                        color: k-color(#{$name}-on-subtle);
                        background-color: color-mix(in srgb, k-color(#{$name}-active) 13%, transparent);
                        border-color: k-color(#{$name}-on-surface);
                    }

                    @if ($name == "base") {
                        &:active,
                        &.k-active,
                        &.k-selected {
                            background-color: color-mix(in srgb, k-color(on-base) 13%, transparent);
                            border-color: $kendo-chip-border;
                        }

                        &:hover,
                        &.k-hover {
                            border-color: $kendo-chip-hover-border;
                        }
                    }
                }
            }
        }
    }

}