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

@mixin kendo-input--theme() {

    .k-input {
        --INTERNAL--kendo-input-text: var( --kendo-input-text );
        --INTERNAL--kendo-input-bg: var( --kendo-input-bg );
        --INTERNAL--kendo-input-border: var( --kendo-input-border );

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

        &:hover,
        &.k-hover {
            --INTERNAL--kendo-input-text: var( --kendo-input-hover-text );
            --INTERNAL--kendo-input-bg: var( --kendo-input-hover-bg );
            --INTERNAL--kendo-input-border: var( --kendo-input-hover-border );
        }

        &:focus,
        &.k-focus,
        &:focus-within {
            --INTERNAL--kendo-input-text: var( --kendo-input-focus-text );
            --INTERNAL--kendo-input-bg: var( --kendo-input-focus-bg );
            --INTERNAL--kendo-input-border: var( --kendo-input-focus-border );

            &::after {
                border-color: var( --kendo-input-focus-border, transparent );
            }
        }

        &:focus:hover,
        &:focus.k-hover,
        &.k-focus:hover,
        &.k-focus.k-hover {
            --INTERNAL--kendo-input-text: var( --kendo-input-hover-focus-text );
            --INTERNAL--kendo-input-bg: var( --kendo-input-hover-focus-bg );
            --INTERNAL--kendo-input-border: var( --kendo-input-hover-focus-border );
        }

        &:disabled,
        &[disabled],
        &.k-disabled {
            --INTERNAL--kendo-input-text: var( --kendo-input-disabled-text );
            --INTERNAL--kendo-input-bg: var( --kendo-input-disabled-bg );
            --INTERNAL--kendo-input-border: var( --kendo-input-disabled-border );

            .k-input-prefix {
                color: var( --kendo-input-prefix-disabled-text, #{$kendo-input-prefix-disabled-text} );
            }

            .k-input-suffix {
                color: var( --kendo-input-suffix-disabled-text, #{$kendo-input-suffix-disabled-text} );
            }

            @if($kendo-enable-color-system) {
                .k-input-button {
                    color: inherit;
                    background: none;
                }
            }
        }

        // Invalid
        &.k-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            --INTERNAL--kendo-input-border: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );

            &::after {
                border-color: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );
            }

            .k-input-validation-icon {
                color: var( --kendo-input-invalid-text, #{$kendo-input-invalid-text} );
            }

            &:focus:hover,
            &.k-focus:hover,
            &:focus.k-hover,
            &.k-focus.k-hover {
                --INTERNAL--kendo-input-border: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );

                .k-input-validation-icon {
                    color: var( --kendo-input-invalid-text, #{$kendo-input-invalid-text} );
                }
            }
        }

        // Prefix & Suffix
        .k-input-prefix {
            color: var( --kendo-input-prefix-text, #{$kendo-input-prefix-text} );
        }

        .k-input-suffix {
            color: var( --kendo-input-suffix-text, #{$kendo-input-suffix-text} );
        }

        .k-input-separator {
            border-color: var( --kendo-input-separator-text, #{$kendo-input-separator-text} );
        }
    }

    .k-picker {
        --INTERNAL--kendo-picker-text: var( --kendo-picker-text );
        --INTERNAL--kendo-picker-bg: var( --kendo-picker-bg );
        --INTERNAL--kendo-picker-border: var( --kendo-picker-border );

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

        &:hover,
        &.k-hover {
            --INTERNAL--kendo-picker-text: var( --kendo-picker-hover-text );
            --INTERNAL--kendo-picker-bg: var( --kendo-picker-hover-bg );
            --INTERNAL--kendo-picker-border: var( --kendo-picker-hover-border );
        }

        &:focus,
        &.k-focus,
        &:focus-within {
            --INTERNAL--kendo-picker-text: var( --kendo-picker-focus-text );
            --INTERNAL--kendo-picker-bg: var( --kendo-picker-focus-bg );
            --INTERNAL--kendo-picker-border: var( --kendo-picker-focus-border );

            &::after {
                border-color: var( --kendo-picker-focus-border );
            }
        }

        &:focus:hover,
        &:focus.k-hover,
        &.k-focus:hover,
        &.k-focus.k-hover {
            --INTERNAL--kendo-picker-text: var( --kendo-picker-hover-focus-text );
            --INTERNAL--kendo-picker-bg: var( --kendo-picker-hover-focus-bg );
            --INTERNAL--kendo-picker-border: var( --kendo-picker-hover-focus-border );
        }

        &:disabled,
        &[disabled],
        &.k-disabled {
            --INTERNAL--kendo-picker-text: var( --kendo-picker-disabled-text );
            --INTERNAL--kendo-picker-bg: var( --kendo-picker-disabled-bg );
            --INTERNAL--kendo-picker-border: var( --kendo-picker-disabled-border );
        }

        // Invalid
        &.k-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            --INTERNAL--kendo-picker-border: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );

            &::after {
                border-color: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );
            }

            .k-input-validation-icon {
                color: var( --kendo-input-invalid-text, #{$kendo-input-invalid-text} );
            }

            &:focus:hover,
            &.k-focus:hover,
            &:focus.k-hover,
            &.k-focus.k-hover {
                --INTERNAL--kendo-picker-border: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );

                .k-input-validation-icon {
                    color: var( --kendo-input-invalid-text, #{$kendo-input-invalid-text} );
                }
            }
        }
    }

    @each $component, $fill-modes in $kendo-input-theme-colors {
        @each $fill-mode, $color-props in $fill-modes {

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

            $_hover-text: map.get( $color-props, hover-text );
            $_hover-bg: map.get( $color-props, hover-bg );
            $_hover-border: map.get( $color-props, hover-border );

            $_focus-text: map.get( $color-props, focus-text );
            $_focus-bg: map.get( $color-props, focus-bg );
            $_focus-border: map.get( $color-props, focus-border );

            $_hover-focus-text: map.get( $color-props, hover-focus-text );
            $_hover-focus-bg: map.get( $color-props, hover-focus-bg );
            $_hover-focus-border: map.get( $color-props, hover-focus-border );

            $_disabled-text: map.get( $color-props, disabled-text );
            $_disabled-bg: map.get( $color-props, disabled-bg );
            $_disabled-border: map.get( $color-props, disabled-border );

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


                --kendo-#{$component}-hover-text: var( --kendo-#{$component}-#{$fill-mode}-hover-text, #{$_hover-text} );
                --kendo-#{$component}-hover-bg: var( --kendo-#{$component}-#{$fill-mode}-hover-bg, #{$_hover-bg} );
                --kendo-#{$component}-hover-border: var( --kendo-#{$component}-#{$fill-mode}-hover-border, #{$_hover-border} );



                --kendo-#{$component}-focus-text: var( --kendo-#{$component}-#{$fill-mode}-focus-text, #{$_focus-text} );
                --kendo-#{$component}-focus-bg: var( --kendo-#{$component}-#{$fill-mode}-focus-bg, #{$_focus-bg});
                --kendo-#{$component}-focus-border: var( --kendo-#{$component}-#{$fill-mode}-focus-border, #{$_focus-border} );



                --kendo-#{$component}-hover-focus-text: var( --kendo-#{$component}-#{$fill-mode}-hover-focus-text, #{$_hover-focus-text} );
                --kendo-#{$component}-hover-focus-bg: var( --kendo-#{$component}-#{$fill-mode}-hover-focus-bg, #{$_hover-focus-bg} );
                --kendo-#{$component}-hover-focus-border: var( --kendo-#{$component}-#{$fill-mode}-hover-focus-border, #{$_hover-focus-border} );


                --kendo-#{$component}-disabled-text: var( --kendo-#{$component}-#{$fill-mode}-disabled-text, #{$_disabled-text} );
                --kendo-#{$component}-disabled-bg: var( --kendo-#{$component}-#{$fill-mode}-disabled-bg, #{$_disabled-bg} );
                --kendo-#{$component}-disabled-border: var( --kendo-#{$component}-#{$fill-mode}-disabled-border, #{$_disabled-border} );

            }
        }
    }
}