_theme.scss

// Styling of today date
// color - mark the today date with a different text color
// box - instead of changing the text color, show a box around the date

@include exports("calendar/theme") {
    .k-calendar {
        @include fill(
            $calendar-text,
            $calendar-bg,
            $calendar-border
        );


        // Header / footer
        .k-header {
            @include fill(
                $calendar-header-text,
                $calendar-header-bg,
                inherit,
                $calendar-header-gradient
            );
            @include box-shadow( $calendar-header-shadow );
        }

        .k-nav-prev,
        .k-nav-next,
        .k-nav-fast {
            &:hover,
            &.k-state-hover {
                @include fill(
                    $calendar-header-button-hovered-text,
                    $calendar-header-button-hovered-bg,
                    $calendar-header-button-hovered-border,
                    $calendar-header-button-hovered-gradient
                );
            }

            &:active,
            &.k-state-active {
                @include fill(
                    $calendar-header-button-pressed-text,
                    $calendar-header-button-pressed-bg,
                    $calendar-header-button-pressed-border,
                    $calendar-header-button-pressed-gradient
                );
                @include box-shadow( $calendar-header-button-pressed-shadow );
            }
        }


        // Today navigation
        .k-footer .k-nav-today,
        .k-calendar-header .k-today {
            color: $calendar-today-nav-text;

            &:hover,
            &.k-state-hover,
            &:focus,
            &.k-state-focus {
                color: $calendar-today-nav-hovered-text;
            }
        }


        // Header cells
        .k-content th,
        .k-calendar-content th,
        .k-content .k-calendar-th,
        .k-calendar-content .k-calendar-th,
        .k-calendar-view th,
        .k-calendar-view .k-calendar-th
        .k-meta-header,
        .k-month-header {
            color: $calendar-header-cell-text;
        }


        // Special days
        .k-content .k-today,
        .k-calendar-content .k-today {
            @if $calendar-today-style == box {
                .k-link {
                    box-shadow: inset 0 0 0 1px $calendar-today-color;
                }
                &.k-state-focused .k-link {
                    box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
                }
            } @else if $calendar-today-style == color {
                color: $calendar-today-color;
            }
        }
        .k-other-month {
            @include fill(
                $calendar-other-month-text,
                $calendar-other-month-bg
            );
        }
        .k-weekend {
            @include fill(
                $calendar-weekend-text,
                $calendar-weekend-bg
            );
        }
        .k-alt {
            @include fill(
                $calendar-week-number-text,
                $calendar-week-number-bg
            );
        }
        .k-out-of-range {
            pointer-events: none;
            visibility: hidden;
        }


        // Interactive states
        .k-state-hover .k-link,
        td:hover .k-link,
        td.k-state-hover .k-link,
        .k-calendar-td:hover .k-link,
        .k-calendar-td.k-state-hover .k-link {
            @include fill(
                $calendar-cell-hovered-text,
                $calendar-cell-hovered-bg,
                $calendar-cell-hovered-border
            );
        }
        .k-state-selected .k-link {
            @include fill(
                $calendar-cell-selected-text,
                $calendar-cell-selected-bg,
                $calendar-cell-selected-border
            );
        }
        .k-state-selected.k-state-hover .k-link,
        .k-state-selected:hover .k-link {
            @include fill(
                $calendar-cell-selected-text,
                try-shade( $calendar-cell-selected-bg ),
                try-shade( $calendar-cell-selected-border )
            );
        }
        .k-state-focused .k-link,
        .k-state-focus .k-link  {
            box-shadow: $calendar-cell-focused-shadow;
        }
        .k-state-selected.k-state-focused .k-link,
        .k-state-selected.k-state-focus .k-link {
            box-shadow: $calendar-cell-selected-focus-shadow;
        }


        // Calendar navigation
        .k-calendar-navigation {
            @include fill(
                $calendar-navigation-text,
                $calendar-navigation-bg
            );
            box-shadow: inset -1px 0 $calendar-navigation-border;

            li:hover,
            li.k-state-hover {
                color: $calendar-today-nav-hovered-text;
            }
        }
        .k-calendar-navigation-highlight {
            @include fill(
                $calendar-text,
                $calendar-bg,
                $calendar-border
            );
        }


        &[dir="rtl"],
        .k-rtl & {
            .k-calendar-navigation {
                box-shadow: inset 1px 0 $calendar-navigation-border;
            }
        }

        // Invalid
        &.k-invalid,
        &.k-invalid:hover,
        &.k-state-invalid,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            border-color: $invalid-border;
        }
    }

}




@include exports("multiviewcalendar/theme") {

    .k-calendar.k-calendar-range {

        $calendar-range-gap: 1px !default;
        $calendar-range-bg: rgba( $calendar-cell-selected-bg, .25 );
        $calendar-range-split-size: 5px !default;

        .k-range-start,
        .k-range-end,
        .k-range-mid {
            // sass-lint:disable-block indentation
            background-image: linear-gradient(
                transparent $calendar-range-gap,
                $calendar-range-bg $calendar-range-gap,
                $calendar-range-bg calc(100% - #{$calendar-range-gap}),
                transparent calc(100% - #{$calendar-range-gap})
            );

            .k-ie &,
            .k-edge & {
                background-image: none;
                background-color: $calendar-range-bg;
            }
        }

        .k-range-start.k-range-end {
            background-image: none;
            background-color: transparent;
        }

        .k-range-start,
        .k-range-end {
            .k-link {
                background-color: $calendar-cell-selected-bg;
            }
        }

        .k-range-start.k-state-active,
        .k-range-end.k-state-active {
            .k-link {
                box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
            }
        }

        .k-range-split-start,
        .k-range-split-end {
            position: relative;

            &::after {
                content: "";
                display: block;
                position: absolute;
                top: $calendar-range-gap;
                bottom: $calendar-range-gap;
                width: $calendar-range-split-size;
            }
        }

        .k-range-split-start::after {
            left: -$calendar-range-split-size;
            right: auto;
            background-image: linear-gradient(to left, $calendar-range-bg, transparent 100%);
        }

        .k-range-split-end::after {
            right: -$calendar-range-split-size;
            left: auto;
            background-image: linear-gradient(to right, $calendar-range-bg, transparent 100%);
        }
    }

}

@include exports("daterangepicker/theme") {

    //jQuery DateRangePicker
    .k-daterangepicker {
        // Invalid
        &.k-state-invalid {
            .k-dateinput-wrap {
                border-color: $invalid-border;
            }
        }
    }

}