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

@mixin kendo-time-selector--theme() {
    // Time selector
    .k-timeselector {
        @include fill(
            var( --kendo-time-selector-text, #{$kendo-time-selector-text} ),
            var( --kendo-time-selector-bg, #{$kendo-time-selector-bg} ),
            var( --kendo-time-selector-border, #{$kendo-time-selector-border} )
        );
    }


    // Time selector header
    .k-time-header,
    .k-time-selector-header {
        .k-title {
            color:  var( --kendo-time-selector-header-title-text, #{$kendo-time-selector-header-title-text} );
        }

        .k-time-now {
            color: k-color(primary);
        }
        .k-time-now:hover {
            color: k-color(primary-hover);
        }
    }


    // Time list wrapper
    .k-time-list-wrapper {

        .k-title {
            color: var( --kendo-time-list-title-text, #{$kendo-time-list-title-text} );
        }

        &.k-focus {
            .k-title {
                color: var( --kendo-time-list-title-focus-text, #{$kendo-time-list-title-focus-text} );
            }

            &::before,
            &::after {
                background-color: var( --kendo-time-list-focus-bg, #{$kendo-time-list-focus-bg} );
            }
        }
    }


    // Time list
    .k-time-list {
        .k-item:hover {
            color: k-color(primary-hover);
        }
    }

    .k-time-container {
        background: transparent;
    }

    .k-time-highlight {
        @include fill(
            $bg: var( --kendo-time-list-highlight-bg, #{$kendo-time-list-highlight-bg} ),
            $border: var( --kendo-time-list-highlight-border, #{$kendo-time-list-highlight-border} )
        );
    }
}