@include exports("calendar/layout") {

    // Base
    .k-calendar {
        @include use-background-clip();
        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-block;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-popup & {
            height: 100%;
        }

        // Common
        .k-link {
            outline: 0;
            color: inherit;
            text-decoration: none;
            white-space: normal;
            cursor: pointer;
            overflow: hidden;
        }

        .k-calendar-view table {
            margin: 0;
            border-width: 0;
            border-color: inherit;
            border-spacing: 0;
            border-collapse: separate;
            table-layout: fixed;
            outline: 0;
            position: relative;
            z-index: 1;
        }
        .k-calendar-view td,
        .k-calendar-view th {
            border-width: 0;
            padding: 0;
            text-align: center;
            border-style: solid;
            border-color: inherit;
            font-weight: normal;
            cursor: default;
        }
        .k-calendar-view th {
            padding: $calendar-header-cell-padding-y $calendar-header-cell-padding-x;
            font-size: $calendar-header-cell-font-size;
            line-height: $calendar-header-cell-line-height;
            text-transform: uppercase;
            opacity: $calendar-header-cell-opacity;
        }
        .k-calendar-view tbody th {
            padding-left: $button-padding-x;
            padding-right: $button-padding-x;
            height: $calendar-header-height;
            font: inherit;
            font-weight: bold;
            text-transform: none;
            text-align: left;
        }


        // Header
        .k-header {
            padding: $calendar-header-padding-y-sm $calendar-header-padding-x-sm;
            border-bottom-width: $calendar-header-border-width;
            border-bottom-style: solid;
            text-align: center;
            display: flex;
            flex-direction: row;
            position: relative;
            z-index: 2;

            .k-link {
                @include border-radius();
                padding: $calendar-header-padding-y-sm;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }
        }

        .k-nav-prev,
        .k-nav-next {
            width: ($calendar-line-height * 1em);
            height: ($calendar-line-height * 1em);
            box-sizing: content-box;
        }

        .k-nav-fast {
            margin: 0 $calendar-header-padding-x-sm;
            flex: 1 1 auto;
        }


        // Calendar header
        @at-root .k-calendar-header {
            padding: $calendar-header-padding-y $calendar-header-padding-x;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 0 0 auto;

            .k-title {
                font-weight: bold;
            }
            .k-today {
                cursor: pointer;
            }

            .k-calendar-nav {
                display: flex;
                flex-direction: row;
                align-items: center;
                flex-wrap: nowrap;
            }

            .k-button { @extend .k-button-flat; }
        }

        > .k-calendar-header {
            min-width: $calendar-header-min-width;
            box-sizing: border-box;
        }

        // Footer
        .k-footer,
        .k-calendar-footer {
            text-align: center;
            clear: both;
        }
        .k-nav-today,
        .k-footer > .k-state-disabled {
            padding: $calendar-header-padding-y $calendar-header-padding-x;
            display: block;
        }
        .k-nav-today:hover {
            text-decoration: underline;
        }


        // View wrapper
        .k-calendar-view {
            // setting width / height prevents layout changes in meta views
            width: (7 * $calendar-cell-size);
            height: (7 * $calendar-cell-size);
            position: relative;
            z-index: 1;
            overflow: hidden;
            margin: auto;
        }
        &.k-week-number .k-calendar-view {
            width: (8 * $calendar-cell-size);
        }
        &-infinite .k-calendar-view {
            width: $calendar-view-width;
            height: $calendar-view-height;
        }


        // Content
        .k-content,
        .k-calendar-content {
            width: 100%;
            margin: 0;
            text-align: center;
            flex: 1 1 auto;
            position: relative;

            > table {
                table-layout: fixed;
                margin-right: -17px; // scrollbar-size
            }

            td {
                @include border-radius( $calendar-cell-border-radius );
                border-color: transparent;
            }
            .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;
            }


            // Special days
            .k-weekend {
                @include border-radius( 0 );
                opacity: $calendar-weekend-opacity;
            }
            .k-alt {
                opacity: $calendar-week-number-opacity;
            }
            .k-other-month .k-link {
                opacity: $calendar-other-month-opacity;
            }
            .k-state-disabled {
                opacity: $disabled-opacity;
            }
        }
        table.k-content {
            display: inline-table;
            vertical-align: top;
        }


        // Month view
        .k-month,
        .k-calendar-monthview {

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


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

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


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

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


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

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




        // Angular
        &-infinite {
            box-sizing: content-box;
            width: auto;
            display: inline-flex;
            vertical-align: bottom;

            .k-calendar-view,
            .k-calendar-monthview { // <- BACKCOMPAT: ensures backwards compatibility for previous versions of kendo-angular-dateinputs
                padding: 0 $calendar-content-padding-x;
                display: flex;
                flex: 1 0 auto;
                flex-direction: column;
                overflow: hidden;
                box-sizing: content-box;

                &::after {
                    display: block;
                    position: absolute;
                    bottom: 0;
                    content: " ";
                    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: -$calendar-content-padding-x;
                margin-right: -$calendar-content-padding-x;
            }

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

            .k-calendar-yearview,
            .k-calendar-decadeview,
            .k-calendar-centuryview {
                .k-content {
                    $cell-size: $calendar-view-width / 5;

                    td {
                        width: auto;
                        height: auto;
                    }

                    .k-link,
                    td.k-empty {
                        width: $cell-size;
                        height: $cell-size;
                    }
                }
            }

        }
    }




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

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




    .k-calendar .k-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;
    }

    .k-calendar-navigation {
        position: relative;
        display: block;
        overflow: hidden;
        width: $calendar-navigation-width;
        z-index: 2;

        &::before,
        &::after {
            display: block;
            position: absolute;
            content: " ";
            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 {
            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;
            }
        }

        .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("multiviewcalendar/layout") {


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

        .k-calendar-view {
            height: auto;
            min-height: (7 * $calendar-cell-size);
            width: auto;
            white-space: nowrap;

            &::after {
                display: none;
            }
        }
        table {
            width: auto;
        }
        table.k-content {
            padding: $multiviewcalendar-content-padding-y $multiviewcalendar-content-padding-x;
        }
        table.k-meta-view {
            margin: 0 -1px;
        }

        .k-meta-header,
        .k-month-header {
            margin: 0 $multiviewcalendar-content-padding-x;
            padding: $calendar-header-cell-padding-y $button-padding-x;
            font-size: $calendar-header-cell-font-size;
            line-height: $calendar-header-cell-line-height;
            text-align: left;
            opacity: $calendar-header-cell-opacity;
            cursor: default;
        }

        .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;
        }

        // jQuery
        &:not(.k-calendar-infinite) {
            .k-calendar-view {
                display: flex;
                flex-direction: row;

                .k-animation-container-sm & {
                    flex-direction: column;
                }
            }
        }

        // Angular
        &.k-calendar-infinite {
            table {
                padding: 0;
                display: flex;
                flex-direction: row;

                > tbody {
                    display: inline-block;
                    vertical-align: top;
                }
                > tbody + tbody {
                    margin-left: $multiviewcalendar-gap;
                }
            }

            &:not(.k-calendar-minimal) {
                @if $multiviewcalendar-button-style == stretched {
                    > .k-button {
                        @extend .k-button-flat;
                        border-radius: 0;
                        width: $multiviewcalendar-button-size;
                    }

                    > .k-calendar-view {
                        border-width: 0 1px;
                        border-style: solid;
                        border-color: inherit;
                    }
                } @else if $multiviewcalendar-button-style == detached {
                    background-color: transparent;
                    border-width: 0;
                    overflow: visible;

                    > .k-calendar-view {
                        $half-size: $multiviewcalendar-button-size / 2;

                        border-width: $calendar-border-width;
                        border-style: solid;
                        border-color: inherit;
                        padding: 0 calc( #{$half-size} + #{$spacer-x} );
                        margin: 0 (-$half-size);
                    }

                    > .k-button {
                        align-self: center;
                        width: $multiviewcalendar-button-size;
                        height: $multiviewcalendar-button-size;
                        border-radius: 50%;
                        z-index: 2;
                    }
                }
            }
        }
    }
}



@include exports("daterangepicker/layout") {

    //jQuery DateRangePicker
    .k-widget.k-daterangepicker {
        border: 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 {
            @include hide-scrollbar("left");
        }

        tbody th {
            text-align: right;
        }

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

    }

}