@use "sass:math";
@use "../../mixins/index.scss" as *;
@use "../../color-system/_functions.scss" as *;
@use "./variables.scss" as *;

@mixin kendo-time-selector--theme-base() {

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


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

        .k-time-now {
            color: $kendo-time-selector-header-time-now-text;
        }
        .k-time-now:hover {
            color: $kendo-time-selector-header-time-now-hover-text;
        }
    }


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

        .k-title {
            color: $kendo-time-list-title-text;
        }

        &.k-focus {
            .k-title {
                color: $kendo-time-list-title-focus-text;
            }

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


    // Time list
    .k-time-list {
        &::before,
        &::after {
            $shadow-size: 3em;
            box-shadow: 0 0 $shadow-size math.div( $shadow-size, 2 ) $kendo-time-selector-bg;
        }

        .k-item:hover {
            color: k-color(primary-on-surface);
        }
    }

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

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

}