@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/components/slider/_theme.scss" as *;

@mixin kendo-slider--theme() {

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

    // Slider
    .k-slider {
        color: $kendo-slider-text;

        .k-slider-thumb {

            &::after {
                background: k-color(primary);
            }

            &:hover::after,
            &.k-hover::after {
                background: k-color(primary-hover);
            }

            &:active::after,
            &.k-active::after,
            &.k-selected::after {
                background: k-color(primary-active);
            }
        }

        .k-label {
            color: k-color(subtle);
        }

        &.k-disabled {
            color: $kendo-slider-disabled-text;

            .k-slider-track {
                background-color: $kendo-slider-track-disabled-bg;
            }

            .k-slider-selection {
                background-color: $kendo-slider-selection-disabled-bg;
            }

            .k-slider-thumb {
                border-color: $kendo-slider-thumb-disabled-border;

                &::after {
                    background: color-mix(in srgb, k-color(on-app-surface) 30%, transparent);
                }
            }
        }

    }


    // Slider thumb
    .k-slider-thumb {
        color: $kendo-slider-thumb-text;
        background-color: $kendo-slider-thumb-bg;
        border-color: $kendo-slider-thumb-border;
        background-image: linear-gradient( $kendo-slider-thumb-gradient, transparent, transparent );

        &:hover,
        &.k-hover {
            background-color: $kendo-slider-thumb-hover-bg;
            color: $kendo-slider-thumb-hover-text;
            border-color: $kendo-slider-thumb-hover-border;
            background-image: linear-gradient( $kendo-slider-thumb-hover-gradient, transparent, transparent );
        }

        &:active,
        &.k-active {
            background-color: $kendo-slider-thumb-active-bg;
            color: $kendo-slider-thumb-active-text;
            border-color: $kendo-slider-thumb-active-border;
            background-image: linear-gradient( $kendo-slider-thumb-active-gradient, transparent, transparent );
        }

        &:focus,
        &.k-focus {
            background-color: $kendo-slider-thumb-focus-bg;
            color: $kendo-slider-thumb-focus-text;
            border-color: $kendo-slider-thumb-focus-border;
            background-image: linear-gradient( $kendo-slider-thumb-focus-gradient, transparent, transparent );
        }
    }

}