@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/components/calendar/_theme.scss" as *;

@mixin kendo-calendar--theme() {
    @include kendo-calendar--theme-base();

    .k-calendar {
        .k-calendar-th {
            color: $kendo-calendar-header-cell-text;
        }

        .k-calendar-caption,
        .k-meta-header,
        .k-month-header {
            color: $kendo-calendar-caption-color;
        }

        .k-calendar-td {

            &.k-today .k-link {
                @include fill(
                    $kendo-calendar-today-text,
                    $kendo-calendar-today-bg
                );
                box-shadow: none;
            }

            &:hover,
            &.k-hover {
                @include fill(
                    $kendo-calendar-cell-hover-text,
                    $kendo-calendar-cell-hover-bg
                );
            }

            &:focus,
            &.k-focus {
                box-shadow: $kendo-calendar-cell-focus-shadow;
            }


            &.k-selected {
                @include fill(
                    $kendo-calendar-cell-selected-text,
                    $kendo-calendar-cell-selected-bg,
                    $kendo-calendar-cell-selected-border
                );
                box-shadow: $kendo-calendar-cell-selected-shadow;
            }

            &.k-selected:focus,
            &.k-selected.k-focus {
                box-shadow: $kendo-calendar-cell-selected-focus-shadow;
            }

            &.k-selected:hover,
            &.k-selected.k-hover {
                @include fill(
                    $kendo-calendar-cell-selected-hover-text,
                    $kendo-calendar-cell-selected-hover-bg
                );
            }

            &.k-today:hover .k-link,
            &.k-today.k-hover .k-link {
                @include fill(
                    $kendo-calendar-today-hover-text,
                    $kendo-calendar-today-hover-bg
                );
            }

            &.k-weekend .k-link {
                @include fill(
                    $kendo-calendar-weekend-text,
                    $kendo-calendar-weekend-bg
                );
            }

            &.k-other-month .k-link {
                @include fill(
                    $kendo-calendar-other-month-text,
                    $kendo-calendar-other-month-bg
                );
            }

            &:focus .k-link,
            &.k-focus .k-link,
            &.k-selected:focus .k-link,
            &.k-selected.k-focus .k-link {
                box-shadow: none;
            }

            &.k-disabled {
                @include fill(
                    color-mix(in srgb, k-color(on-app-surface) 30%, transparent),
                    $kendo-calendar-bg
                );
            }
        }

        &.k-invalid,
        &.k-invalid:hover,
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-dirty {
            border-color: k-color(error-emphasis);
        }
    }

    .k-calendar .k-calendar-td  {

        &.k-range-start,
        &.k-range-end,
        &.k-range-mid {
            @include fill(
                $kendo-calendar-range-text,
                $kendo-calendar-range-bg
            );

            .k-link {
                background-color: transparent;

                &.k-selected {
                    background-color: transparent;
                    box-shadow: none;
                }
            }

            &.k-disabled {
                @include fill(
                    color-mix(in srgb, k-color(on-app-surface) 30%, transparent),
                    $kendo-calendar-bg
                );
            }

            &:hover .k-link,
            &.k-hover .k-link {
                background-color: $kendo-calendar-cell-selected-hover-bg;
            }
        }
    }

}