@use '~@/style/globals';

.MonthCalendar {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;

    &__header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: globals.$content-padding-small-vertical;

        &__current-month {
            min-width: 110px;
            margin: 0 globals.$content-padding-large-horizontal;
            color: globals.$text-base-color;
            text-align: center;
            text-transform: capitalize;
        }

        &__total {
            position: absolute;
            left: 0;
        }
    }

    /* stylelint-disable selector-class-pattern */
    &__body {
        &.cv-wrapper {
            flex: 1;
            height: auto;
            min-height: 0;
        }

        .cv-header-day:last-of-type {
            margin-right: 15px;
        }

        .cv-weekdays {
            overflow-y: scroll;
        }

        .cv-day,
        .cv-header-day,
        .cv-header-days,
        .cv-item,
        .cv-week,
        .cv-weeks {
            border-color: globals.$text-muted-color;
        }

        .cv-day:not(.outsideOfMonth) {
            background-color: globals.$calendar-main-background-color;

            .cv-day-number {
                color: globals.$text-base-color;
            }

            &.today {
                background-color: globals.$calendar-current-date-background-color;

                .cv-day-number {
                    color: globals.$text-warning-color;
                }
            }
        }

        .cv-item {
            height: 48px;
            margin-top: 5px;
            margin-left: 5px;
            padding: 7px 10px;
            border: none;
            border-radius: 4px;
            background-color: globals.$calendar-event-normal-color;
            color: globals.$text-base-color;
            line-height: 1.5;
            white-space: pre-wrap;

            &--not-confirmed {
                background-color:
                    rgba(
                        globals.$calendar-event-normal-color,
                        globals.$calendar-event-not-confirmed-opacity
                    );
            }

            &--past {
                border-radius: 5px;
                background-color: globals.$calendar-event-past-color;
            }

            @for $i from 1 through 7 {
                &.span#{$i} {
                    width: calc(((100% / 7) * #{$i}) - 11px);
                }
            }

            &.continued {
                border-start-start-radius: 0;
                border-end-start-radius: 0;
            }

            &.toBeContinued {
                border-end-end-radius: 0;
                border-start-end-radius: 0;
            }
        }
    }
    /* stylelint-enable selector-class-pattern */
}
