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

@mixin kendo-calendar--layout() {

    // Calendar

    // Base
    .k-calendar {
        inline-size: var( --INTERNAL--kendo-calendar-width, min-content );
        block-size: var( --INTERNAL--kendo-calendar-height, min-content );
        border-width: var( --kendo-calendar-border-width, #{$kendo-calendar-border-width} );
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: var( --kendo-calendar-font-family, #{$kendo-calendar-font-family} );
        font-size: var( --kendo-calendar-font-size, #{$kendo-calendar-font-size} );
        line-height: var( --kendo-calendar-line-height, #{$kendo-calendar-line-height} );
        position: relative;
        overflow: hidden;
        display: inline-flex;
        flex-flow: column nowrap;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;


        // Nested calendar
        > .k-calendar {
            border: 0;
        }

        // Common
        .k-link {
            white-space: normal;
            position: relative;
            overflow: hidden;
        }
    }


    // Calendar table
    .k-calendar-table {
        margin-block: 0;
        margin-inline: auto;
        border-width: 0;
        border-color: inherit;
        border-spacing: 0;
        border-collapse: separate;
        table-layout: fixed;
        text-align: center;
        outline: 0;
        display: table;
        position: relative;
        z-index: 1;
    }

    .k-calendar-caption,
    .k-calendar-caption.k-calendar-th,
    .k-calendar .k-meta-header,
    .k-calendar .k-month-header {
        padding-inline: var( --kendo-calendar-caption-padding-x, #{$kendo-calendar-caption-padding-x} );
        padding-block: var( --kendo-calendar-caption-padding-y, #{$kendo-calendar-caption-padding-y} );
        height: var( --kendo-calendar-caption-height, #{$kendo-calendar-caption-height} );
        box-sizing: border-box;
        font-size: var( --kendo-calendar-caption-font-size, #{$kendo-calendar-caption-font-size} );
        line-height: var( --kendo-calendar-caption-line-height, #{$kendo-calendar-caption-line-height} );
        text-transform: none;
        text-align: center;
        font-weight: var( --kendo-calendar-caption-font-weight, #{$kendo-calendar-caption-font-weight} );
        cursor: default;
    }

    .k-calendar-th,
    .k-calendar-td {
        border-width: 0;
        padding: 0;
        text-align: center;
        border-style: solid;
        border-color: inherit;
        font-weight: normal;
        cursor: default;
    }

    .k-calendar-th {
        padding-inline: var( --kendo-calendar-header-cell-padding-x, #{$kendo-calendar-header-cell-padding-x} );
        padding-block: var( --kendo-calendar-header-cell-padding-y, #{$kendo-calendar-header-cell-padding-y} );
        inline-size: var( --INTERNAL--kendo-calendar-cell-size, var( --kendo-calendar-header-cell-width, #{$kendo-calendar-header-cell-width} ) );
        block-size: var( --INTERNAL--kendo-calendar-cell-size, var( --kendo-calendar-header-cell-height, #{$kendo-calendar-header-cell-height} ) );
        font-size: var( --kendo-calendar-header-cell-font-size, #{$kendo-calendar-header-cell-font-size} );
        line-height: var( --kendo-calendar-header-cell-line-height, #{$kendo-calendar-header-cell-line-height} );
        text-transform: uppercase;
    }

    .k-calendar-td {
        @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ));
        inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
        block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
        border-color: transparent;
        font-size: var( --INTERNAL--kendo-calendar-cell-font-size, inherit );
    }


    // Calendar cell inner
    // Remove .k-calendar once we remove k-link
    .k-calendar .k-calendar-cell-inner {
        @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
        padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, 0 );
        padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, 0 );
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        white-space: normal;
        position: relative;
        overflow: hidden;
    }


    // Calendar header
    .k-calendar .k-header {
        padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
        padding-block: var( --kendo-calendar-header-padding-y, #{$kendo-calendar-header-padding-y} );
        border-bottom-width: var( --kendo-calendar-header-border-width, #{$kendo-calendar-header-border-width} );
        border-bottom-style: solid;
        display: flex;
        flex-flow: row nowrap;
        gap: var( --kendo-calendar-nav-gap, #{$kendo-calendar-nav-gap} );
        align-items: center;
        position: relative;
        z-index: 2;
    }


    // Calendar header
    .k-calendar-header {
        padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
        padding-block: var( --kendo-calendar-header-padding-y, #{$kendo-calendar-header-padding-y} );
        min-width: var( --kendo-calendar-header-min-width, #{$kendo-calendar-header-min-width} );
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;

        .k-calendar-nav {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            gap: var( --kendo-calendar-nav-gap, #{$kendo-calendar-nav-gap} );
        }
    }


    // Calendar footer
    .k-calendar-footer,
    .k-calendar .k-footer {
        padding-inline: var( --kendo-calendar-header-footer-x, #{$kendo-calendar-footer-padding-x} );
        padding-block: var( --kendo-calendar-header-footer-y, #{$kendo-calendar-footer-padding-y} );
        text-align: center;
        clear: both;
    }


    // Calendar view wrapper
    .k-calendar-view {
        margin: auto;
        padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
        padding-block-end: var( --kendo-calendar-view-padding-block-end, #{$kendo-calendar-view-padding-block-end} );
        // setting width / height prevents layout changes in meta views
        inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$kendo-calendar-view-width});
        min-height: $kendo-calendar-view-height;
        box-sizing: content-box;
        gap: var( --kendo-calendar-view-gap, #{$kendo-calendar-view-gap} );
        position: relative;
        z-index: 1;
        overflow: hidden;

        .k-today {
            font-weight: bold;
        }


        .k-link {
            @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
            padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, 0 );
            padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, 0 );
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            white-space: normal;
            position: relative;
            overflow: hidden;
        }

        .k-today .k-link {
            @include border-radius( var( --kendo-calendar-today-border-radius, #{$kendo-calendar-today-border-radius} ) );
        }
    }


    // Month view
    .k-month-calendar,
    .k-calendar-monthview {
        $_month-cell-size: $kendo-calendar-cell-size;

        .k-calendar-td {
            width: $_month-cell-size;
            height: $_month-cell-size;
            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
        }
    }


    // Year view
    .k-year-calendar,
    .k-calendar-yearview {
        $_year-cell-size: ( 2 * $kendo-calendar-cell-size );

        .k-calendar-td {
            width: $_year-cell-size;
            height: $_year-cell-size;
            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
        }
    }


    // Decade view
    .k-decade-calendar,
    .k-calendar-decadeview {
        $_decade-cell-size: ( 2 * $kendo-calendar-cell-size );

        .k-calendar-td {
            width: $_decade-cell-size;
            height: $_decade-cell-size;
            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
        }
    }


    // Century view
    .k-century-calendar,
    .k-calendar-centuryview {
        $_century-cell-size: ( 2 * $kendo-calendar-cell-size );

        .k-calendar-td {
            width: $_century-cell-size;
            height: $_century-cell-size;
            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
        }
        .k-link {
            text-align: start;
        }
    }


    // Calendar in popup
    .k-popup .k-calendar {
        height: 100%;
    }
    .k-calendar-container,
    .k-datetime-container {
        padding: 0;

        .k-calendar {
            border-width: 0;
        }
    }


    .k-calendar .k-content.k-scrollable,
    .k-calendar .k-calendar-content.k-scrollable {
        box-sizing: content-box;
        overflow-x: hidden;
        overflow-y: auto;
        display: block;

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

    // scoped in calendar until it is used elsewhere
    .k-calendar .k-scrollable-placeholder {
        position: absolute;
        z-index: -1;
        width: 1px;
        top: 0;
        right: 0;
    }


    // Infinite calendar
    .k-calendar-infinite {
        box-sizing: content-box;
        display: inline-flex;
        flex-flow: row nowrap;

        .k-calendar-view {
            padding-inline: var( --kendo-infinite-calendar-view-padding-x, #{$kendo-infinite-calendar-view-padding-x} );
            padding-block: var( --kendo-infinite-calendar-view-padding-y, #{$kendo-infinite-calendar-view-padding-y} );
            height: $kendo-infinite-calendar-view-height;
            flex: 0 0 auto;
            display: flex;
            flex-flow: column nowrap;
            gap: 0;
            overflow: hidden;

            .k-content.k-scrollable {
                position: relative;
            }
        }

        .k-calendar-header {
            margin-inline-start: calc( -1 * var( --kendo-infinite-calendar-view-padding-x, #{$kendo-infinite-calendar-view-padding-x} ));
            margin-inline-end: calc( -1 * var( --kendo-infinite-calendar-view-padding-x, #{$kendo-infinite-calendar-view-padding-x} ));
            padding-inline: var( --kendo-infinite-calendar-header-padding-x, #{$kendo-infinite-calendar-header-padding-x} );
            padding-block: var( --kendo-infinite-calendar-header-padding-y, #{$kendo-infinite-calendar-header-padding-y} );
            width: auto;
            min-width: 0;
            flex-direction: row;
        }

        .k-calendar-weekdays {
            flex: 0 0 auto;
        }
    }


    // Calendar navigation
    .k-calendar-navigation {
        width: var( --kendo-calendar-navigation-width, #{$kendo-calendar-navigation-width} );
        text-align: center;
        flex: 0 0 auto;
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 1;

        .k-content,
        .k-calendar-content {
            background: transparent;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;

            ul {
                width: var( --kendo-calendar-navigation-width, #{$kendo-calendar-navigation-width} );
            }

            li {
                height: var( --kendo-calendar-navigation-item-height, #{$kendo-calendar-navigation-item-height} );
                line-height: var( --kendo-calendar-navigation-item-height, #{$kendo-calendar-navigation-item-height} );
                cursor: pointer;
                padding-inline: 1em;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: clip;
            }
        }

        .k-calendar-navigation-marker {
            font-weight: bold;
        }

        .k-calendar-navigation-highlight {
            width: 100%;
            border-width: 1px 0;
            border-style: solid;
            height: var( --kendo-calendar-navigation-item-height, #{$kendo-calendar-navigation-item-height} );
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }

    }


    // Multiview calendar
    .k-calendar-range {
        width: auto;

        .k-calendar-header {
            flex-direction: row;

            &.k-vstack {
                flex-direction: column;
            }
        }

        .k-calendar-view {
            width: auto;
            white-space: nowrap;

            &::after {
                display: none;
            }

            &:focus {
                outline: 0;
            }
        }
    }

    .k-range-start,
    .k-range-end,
    .k-range-mid {

        position: relative;

        &::before {
            content: "";
            position: absolute;
            inset: 0px;
            border-style: solid;
        }

        &:hover .k-link,
        &.k-hover .k-link {
            border-radius: 0;
        }
    }

    .k-range-mid::before {
        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
        border-inline-width: 0;
        border-radius: 0;
    }

    .k-range-start::before,
    .k-range-mid:not(
        .k-range-start + .k-range-mid,
        .k-range-mid + .k-range-mid,
        :last-child
    )::before {
        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
        border-inline-end-width: 0;
        border-radius: 0;

        @if ( $kendo-enable-rounded ) {
            border-start-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
            border-end-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
        }
    }

    .k-range-end::before,
    .k-range-mid:last-child::before {
        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
        border-inline-start-width: 0;
        border-radius: 0;

        @if ( $kendo-enable-rounded ) {
            border-start-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
            border-end-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
        }
    }

    .k-range-start.k-range-end::before {
        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
        border-radius:  var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) ;
    }




    // Calendar sizes
    @each $size, $size-props in $kendo-calendar-sizes {
        $_font-size: map.get( $size-props, font-size );
        $_line-height: map.get( $size-props, line-height );
        $_cell-size: map.get( $size-props, cell-size );
        $_cell-padding-x: map.get( $size-props, cell-padding-x );
        $_cell-padding-y: map.get( $size-props, cell-padding-y );
        $_cell-font-size: map.get( $size-props, cell-font-size );

        $_month-cell-size: $_cell-size;
        $_year-cell-size: ( 2 * $_cell-size );
        $_decade-cell-size: ( 2 * $_cell-size );
        $_century-cell-size: ( 2 * $_cell-size );

        .k-calendar-#{$size} {
            --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
            --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
            --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
            --INTERNAL--kendo-calendar-cell-font-size: var( --kendo-calendar-#{$size}-cell-font-size, #{$_cell-font-size} );
            font-size: $_font-size;
            line-height: $_line-height;

            &.k-month-calendar,
            .k-calendar-monthview {
                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
            }
            &.k-year-calendar,
            .k-calendar-yearview {
                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
            }
            &.k-decade-calendar,
            .k-calendar-decadeview {
                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
            }
            &.k-century-calendar,
            .k-calendar-centuryview {
                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
            }
        }
    }
}