@use "sass:map";
@use "sass:list";
@use "../../color-system/_constants.scss" as *;
@use "../../mixins/index.scss" as *;
@use "../../functions/index.scss" as *;
@use "./variables.scss" as *;
@use "../button/_variables.scss" as *;
@use "../../z-index/index.scss" as *;

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

    // Time selector
    .k-timeselector {
        border-width: $kendo-time-selector-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-time-selector-font-family;
        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;

        // 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( calc( #{$_font-size} * #{$_line-height} ) + calc( #{ $_list-item-padding-y} * 2 ) );

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

                .k-time-highlight,
                .k-time-list-highlight {
                    height: $_highlight-height;
                }

                .k-time-separator {
                    height:  $_highlight-height;
                }

                .k-time-list-item,
                .k-time-list .k-item {
                    padding-block: $_list-item-padding-y;
                    padding-inline: $_list-item-padding-x;
                }
            }
        }

        font-size: $kendo-time-selector-font-size;
        line-height: $kendo-time-selector-line-height;
    }

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

    // Time selector header
    .k-time-header,
    .k-time-selector-header {
        padding-block: $kendo-time-selector-header-padding-y;
        padding-inline: $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-block: $kendo-button-md-padding-y;
            padding-inline: $kendo-button-md-padding-x;
            font-weight: bold;
            display: inline-block;
        }

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

    // Fast selection
    .k-actions.k-time-fast-selection {
        margin-block-start: 0;
    }


    // 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 {
        width: 100%;
        height: $kendo-time-list-highlight-height;
        border-width: $kendo-time-list-highlight-border-width;
        border-style: solid;
        box-sizing: border-box;
        position: absolute;
        inset-block-start: calc( 50% + #{list.slash( $kendo-time-list-title-height, 2 )});
        inset-inline-start: 0;
        inset-inline-end: 0;
        transform: translateY(-50%);
        z-index: k-z-index("base", 1);
    }


    // Time list wrapper
    .k-time-list-wrapper {
        min-width: $kendo-time-list-width;
        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 {
            font-size: $kendo-time-list-title-font-size;
            line-height: $kendo-time-list-title-line-height;
            font-weight: bold;
            text-align: center;
            text-transform: capitalize;
            display: block;
        }

        &.k-focus {
            &::before,
            &::after {
                display: block;
                content: "";
                position: absolute;
                width: 100%;
                inset-inline-start: 0;
                pointer-events: none;
                height: calc( 50% - #{list.slash( $kendo-time-list-title-height, 2 )} );
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
            }

            &::before {
                inset-block-start: $kendo-time-list-title-height;
            }

            &::after {
                inset-block-end: 0;
            }
        }
    }


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

        &::before,
        &::after {
            display: block;
            position: absolute;
            content: "";
            height: 0;
            line-height: 0;
            z-index: k-z-index("base", 1);
            width: 200%;
            inset-inline-start: -50%;
        }

        &::before { inset-block-start: 0; }
        &::after { inset-block-end: 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("right");

        > ul {
            height: auto;
            width: $kendo-time-list-width;
            margin: auto;
        }

        .k-scrollable-placeholder {
            position: absolute;
            width: 1px;
            inset-block-start: 0;
            inset-inline-end: 0;
        }
    }


    // Time list item
    .k-time-list-item,
    .k-time-list .k-item {
        padding-block: $kendo-time-list-item-padding-y;
        padding-inline: $kendo-time-list-item-padding-x;
    }


    // Time separator
    .k-time-separator {
        width: 0;
        height: $kendo-time-list-highlight-height;
        align-self: center;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: k-z-index("base", 1);
        inset-block-start: calc( #{list.slash( $kendo-time-list-title-height, 2 )} );
    }
}