_layout.scss

@include exports("calendar/layout") {

    // Base
    .k-calendar {
        border-width: $calendar-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $calendar-font-family;
        font-size: $calendar-font-size;
        line-height: $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: $rgba-transparent;


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

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


    // Calendar table
    .k-calendar-table {
        margin: 0;
        border-width: 0;
        border-color: inherit;
        border-spacing: 0;
        border-collapse: separate;
        table-layout: fixed;
        text-align: center;
        outline: 0;
        display: inline-table;
        vertical-align: top;
        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: $calendar-caption-padding-y $calendar-caption-padding-x;
        height: $calendar-caption-height;
        box-sizing: border-box;
        font-size: $calendar-caption-font-size;
        line-height: $calendar-caption-line-height;
        text-transform: none;
        text-align: left;
        font-weight: $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: $calendar-header-cell-padding-y $calendar-header-cell-padding-x;
        width: $calendar-header-cell-width;
        height: $calendar-header-cell-height;
        font-size: $calendar-header-cell-font-size;
        line-height: $calendar-header-cell-line-height;
        text-transform: uppercase;
        opacity: $calendar-header-cell-opacity;
    }
    .k-calendar-td {
        @include border-radius( $calendar-cell-border-radius );
        border-color: transparent;
    }


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


    // Calendar header
    .k-calendar-header {
        padding: $calendar-header-padding-y $calendar-header-padding-x;
        min-width: $calendar-header-min-width;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;

        .k-title,
        .k-calendar-title {
            font-weight: bold;
        }
        .k-today,
        .k-nav-today {
            text-decoration: none;
            cursor: pointer;
            outline: none;
        }

        .k-calendar-nav {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            gap: $calendar-nav-gap;
        }
    }


    // Calendar footer
    .k-calendar-footer,
    .k-calendar .k-footer {
        padding: $calendar-footer-padding-y $calendar-footer-padding-x;
        text-align: center;
        clear: both;
    }


    // Calendar view wrapper
    .k-calendar-view {
        margin: auto;
        padding: 0 $calendar-header-padding-x;
        // setting width / height prevents layout changes in meta views
        width: $calendar-view-width;
        min-height: $calendar-view-height;
        box-sizing: content-box;
        gap: $calendar-view-gap;
        position: relative;
        z-index: 1;
        overflow: hidden;

        .k-link {
            @include border-radius( $calendar-cell-border-radius );
            padding: $calendar-cell-padding-y $calendar-cell-padding-x;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
    }
    .k-week-number .k-calendar-view {
        width: (8 * $calendar-cell-size);
    }


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

        .k-calendar-td {
            width: $_month-cell-size;
            height: $_month-cell-size;
        }
        .k-link {
            width: $_month-cell-size;
            height: $_month-cell-size;
        }
    }


    // Year view
    .k-calendar-yearview {
        $_year-cell-size: ( (7 / 4) * $calendar-cell-size);

        .k-calendar-td {
            width: auto;
            height: auto;
        }
        .k-link {
            width: $_year-cell-size;
            height: $_year-cell-size;
        }
    }


    // Decade view
    .k-calendar-decadeview {
        $_decade-cell-size: ( (7 / 4) * $calendar-cell-size);

        .k-calendar-td {
            width: auto;
            height: auto;
        }
        .k-link {
            width: $_decade-cell-size;
            height: $_decade-cell-size;
        }
    }


    // Century view
    .k-calendar-centuryview {
        $_century-cell-size: ( (7 / 4) * $calendar-cell-size);

        .k-calendar-td {
            width: auto;
            height: auto;
        }
        .k-link {
            width: $_century-cell-size;
            height: $_century-cell-size;
            text-align: left;
        }
    }


    // 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("right");
    }

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




@include exports( "infinite-calendar/layout" ) {


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

        .k-calendar-view {
            padding: $infinite-calendar-view-padding-y $infinite-calendar-view-padding-x;
            height: $infinite-calendar-view-height;
            flex: 0 0 auto;
            display: flex;
            flex-flow: column nowrap;
            gap: 0;
            overflow: hidden;

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

            &::after {
                display: block;
                position: absolute;
                bottom: 0;
                content: "\200b";
                height: 0;
                line-height: 0;
                z-index: 1;
                width: 150%;
                left: -25%;
                box-shadow: 0 0 $calendar-cell-size ($calendar-cell-size / 2) $calendar-bg;
            }
        }

        .k-calendar-header {
            margin-left: -$infinite-calendar-view-padding-x;
            margin-right: -$infinite-calendar-view-padding-x;
            padding: $infinite-calendar-header-padding-y $infinite-calendar-header-padding-x;
            width: auto;
            min-width: 0;
        }

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


    // Calendar navigation
    .k-calendar-navigation {
        width: $calendar-navigation-width;
        text-align: center;
        flex: 0 0 auto;
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 2;

        &::before,
        &::after {
            display: block;
            position: absolute;
            content: "\200b";
            height: 0;
            line-height: 0;
            z-index: 1;
            width: 200%;
            left: -50%;
            $shadow-size: 3 * $calendar-navigation-item-height;
            box-shadow: 0 0 $shadow-size ($shadow-size / 2) $calendar-navigation-bg;
        }

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

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

            ul {
                width: $calendar-navigation-width;
            }

            li {
                height: $calendar-navigation-item-height;
                line-height: $calendar-navigation-item-height;
                cursor: pointer;
                padding: 0 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: $calendar-navigation-item-height;
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }

        // // styles are applied to the k-link element inside
        // .k-state-selected {
        //     color: inherit;
        //     background: transparent;
        //     border-color: transparent;
        // }
    }

}




@include exports( "multiview-calendar/layout" ) {

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

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

            &::after {
                display: none;
            }
        }

        .k-range-start {
            border-color: inherit;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .k-range-end {
            border-color: inherit;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .k-range-mid {
            border-color: inherit;
            border-radius: 0;
        }
    }

}



@include exports("calendar/layout/rtl") {

    .k-rtl .k-calendar,
    .k-calendar[dir="rtl"] {

        .k-nav-prev,
        .k-nav-next,
        .k-prev-view,
        .k-next-view {
            transform: scaleX(-1);
        }

        .k-content.k-scrollable,
        .k-calendar-content.k-scrollable {
            @include hide-scrollbar("left");
        }

        tbody th,
        .k-calendar-tbody .k-calendar-th {
            text-align: right;
        }

        // Content
        .k-content,
        .k-calendar-content {
            > table,
            > .k-calendar-table {
                margin-right: 0;
                margin-left: -17px; // scrollbar-size
            }
        }

    }

}