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

@mixin kendo-time-selector--layout() {

    .k-timeselector {
        border-width: var( --kendo-time-selector-border-width, $kendo-time-selector-border-width );
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: var( --kendo-time-selector-font-family, $kendo-time-selector-font-family );
        font-size: var( --kendo-time-selector-font-size, $kendo-time-selector-font-size );
        line-height: var( --kendo-time-selector-line-height, $kendo-time-selector-line-height );
        position: relative;
        overflow: hidden;
        display: flex;
        flex-flow: column nowrap;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
    }

    .k-popup > .k-timeselector {
        border-width: 0;
    }


    // Time selector header
    .k-time-header,
    .k-time-selector-header {
        padding: var( --kendo-time-selector-header-padding-y, $kendo-time-selector-header-padding-y ) var( --kendo-time-selector-header-padding-x, $kendo-time-selector-header-padding-x );
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;

        .k-title,
        .k-time-selector-header-title {
            padding: var( --kendo-button-md-padding-y, $kendo-button-md-padding-y ) var( --kendo-button-md-padding-x, $kendo-button-md-padding-x );
            font-weight: bold;
            display: inline-block;
        }

        .k-time-now {
            border-width: 0;
            line-height: inherit;
            cursor: pointer;
        }
    }


    // Time selector footer
    // .k-time-footer {}
    // .k-time-selector-footer {}


    // Time list container
    .k-time-list-container {
        display: flex;
        position: relative;
        flex: 1 1 auto;
        overflow: hidden;
    }


    // Time list highlight
    .k-time-highlight,
    .k-time-list-highlight {
        --INTERNAL--kendo-time-list-title-height: var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} );
        width: 100%;
        height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
        border-width: var( --kendo-time-list-highlight-border-width, $kendo-time-list-highlight-border-width );
        border-style: solid;
        box-sizing: border-box;
        position: absolute;
        top: calc( 50% + var( --INTERNAL--kendo-time-list-title-height ) / 2);
        left: 0;
        right: 0;
        transform: translateY(-50%);
        z-index: 1;
    }


    // Time list wrapper
    .k-time-list-wrapper {
        min-width: var( --kendo-time-list-width, $kendo-time-list-width );
        height: var( --kendo-time-list-height, $kendo-time-list-height );
        box-sizing: content-box;
        display: inline-flex;
        flex-flow: column nowrap;
        align-items: stretch;
        overflow: hidden;
        position: relative;
        text-align: center;
        flex: 1 1 auto;

        .k-title {
            padding-block-end: var( --kendo-time-list-title-spacing, $kendo-time-list-title-spacing );
            font-size: var( --kendo-time-list-title-font-size, $kendo-time-list-title-font-size );
            line-height: var( --kendo-time-list-title-line-height, $kendo-time-list-title-line-height );
            font-weight: 600;
            text-align: center;
            text-transform: capitalize;
            display: block;
        }

        &.k-focus {
            &::before,
            &::after {
                --INTERNAL--kendo-time-list-title-highlight-height: var( --kendo-time-list-highlight-height, #{$kendo-time-list-highlight-height} );
                display: block;
                content: "\200b";
                position: absolute;
                width: 100%;
                left: 0;
                pointer-events: none;
                height: calc( 50% - ( var( --INTERNAL--kendo-time-list-title-highlight-height ) / 2) );
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
            }

            &::before {
                top: var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) ;
            }

            &::after {
                bottom: 0;
            }
        }
    }


    // Time list
    .k-time-list {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        flex: 1;
        position: relative;
        z-index: 1;
        outline: 0;
        overflow: hidden;

        &::before,
        &::after {
            display: block;
            position: absolute;
            content: "\200b";
            height: 0;
            line-height: 0;
            z-index: 1;
            width: 200%;
            left: -50%;
        }

        &::before { top: 0; }
        &::after { bottom: 0; }
    }


    // Time list content
    .k-time-container,
    .k-time-list-content {
        position: relative;
        flex: 1 1 auto;
        display: block;
        overflow-x: hidden;
        overflow-y: scroll;

        @include hide-scrollbar-dir-agnostic();

        > ul {
            height: auto;
            width: var( --kendo-time-list-width, $kendo-time-list-width );
            margin: auto;
        }

        .k-scrollable-placeholder {
            position: absolute;
            width: 1px;
            top: 0;
            right: 0;
        }
    }


    // Time list item
    .k-time-list-item,
    .k-time-list .k-item {
        padding: var( --kendo-time-list-item-padding-y, $kendo-time-list-item-padding-y ) var( --kendo-time-list-item-padding-x, $kendo-time-list-item-padding-x );
    }


    // Time separator
    .k-time-separator {
        --INTERNAL--kendo-time-list-title-height: var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} );
        width: 0;
        height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
        align-self: center;
        display: var( --kendo-time-list-separator-display, #{$kendo-time-list-separator-display} );
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 11;
        top: calc( var( --INTERNAL--kendo-time-list-title-height ) / 2);
    }


    // Time selector sizes
    @each $size, $size-props in $kendo-time-selector-sizes {
        $_font-size: map.get( $size-props, font-size );
        $_line-height: map.get( $size-props, line-height );
        $_list-item-padding-x: map.get( $size-props, list-item-padding-x );
        $_list-item-padding-y: map.get( $size-props, list-item-padding-y );
        $_highlight-height: calc( #{$_font-size} * #{$_line-height} + calc( #{ $_list-item-padding-y} * 2 ) );


        .k-timeselector-#{$size} {
            font-size: var( --kendo-time-selector-#{$size}-font-size, #{$_font-size} );
            line-height: var( --kendo-time-selector-#{$size}-line-height, #{$_line-height} );

            .k-time-highlight,
            .k-time-list-highlight {
                height: var( --kendo-time-selector-#{$size}-highlight-height, #{$_highlight-height} );
            }

            .k-time-separator {
                height: var( --kendo-time-selector-#{$size}-highlight-height, #{$_highlight-height} );
            }

            .k-time-list-item,
            .k-time-list .k-item {
                padding: var( --kendo-list-#{$size}-item-padding-y, #{$_list-item-padding-y} ) var( --kendo-list-#{$size}-item-padding-x, #{$_list-item-padding-x} );
            }
        }
    }
}