_calendar-month-body.scss

// sass/components/calendar-month-body.scss
@import '../utils/_mixins.scss';
@import '../base/_variables.scss';
@import '../utils/_animations.scss';


.calendar {

    &__week-days div {
        &:hover {
            color: var(--text-light);
            transform: scale(1.2);

            @include transition(all, 0.2s, ease-in-out);
        }
    }

    &__days div {
        animation: to-top 1s forwards;

        &.calendar__day--todo-hover-created {
            color: var(--text-dark) !important;
            background-color: var(--background-calendar-days-hover) !important;
            border: 1px solid var(--primary-color) !important;
            box-shadow: 0px 0px 30px 0 rgba(227, 228, 237, 0.37) !important;

            @include border-radius(20%);
            @include transition(background-color, 0.3s, ease-in-out);
            @include box-shadow(0px 0px 30px 0 rgba(227, 228, 237, 0.37));
        }

        &:hover {
            color: var(--text-dark);
            background-color: var(--background-calendar-days-hover);
            border: 1px solid var(--primary-color);

            @include border-radius(20%);
            @include transition(width, 0.2s, ease-in-out);
            @include transition(height, 0.2s, ease-in-out);
        }

        &.calendar__day--current-date {
            color: var(--text-light);
            background-color: var(--primary-color);
            border: 1px solid var(--secondary-color);

            @include border-radius(20%);
            @include transition(background-color, 0.3s, ease-in-out);
            @include box-shadow(0px 0px 30px 0 rgba(227, 228, 237, 0.37));
        }
    }

    &__month-list {
        position: relative;
        top: -20px;
        background-color: var(--light-btn);
        color: var(--tertiary-color);
        display: grid;
        grid-template-columns: repeat(3, auto);
        border-radius: 20px;
        border: 2px solid var(--primary-color);

        @include box-shadow(var(--shadow));

        div {
            display: grid;
            place-items: center;
            margin: 5px;
            font-family: var(--font-family-secondary-black);

            cursor: pointer;
            @include border-radius(12px);
        }

        &.calendar__month-list--show {
            display: grid;
            animation: showtime 1s forwards;
            backdrop-filter: blur(30px);
            border: 2px solid rgba(255, 255, 255, 0.18);
            padding: 10px;
            top: -30px;
            font-family: var(--font-family-primary);

            @include box-shadow(0px 0px 30px 0 rgba(227, 228, 237, 0.37));
        }

        &:hover {
            border: 2px solid var(--tertiary-color);

            @include box-shadow(0px 0px 30px 0 rgba(227, 228, 237, 0.37));
        }
    }

    &__month-list--hideonce {
        visibility: hidden;
    }

    &__month-list--hide {
        animation: to-right 1s forwards;
        visibility: hidden;
        pointer-events: none;
    }

    &__month-item--active {
        background-color: var(--primary-color);
        color: var(--text-muted);
    }

    &__month-item {
        &:hover {
            background-color: var(--primary-color);
            color: var(--text-muted);
        }
    }
}