.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
}

.calendar-weekday {
    padding: 8px 10px;
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
    background: var(--bs-light);
    border-right: 1px solid var(--bs-border-color);
}

.calendar-weekday:last-child {
    border-right: 0;
}

.calendar-weekday.weekend {
    color: var(--bs-secondary-color);
}


/*
 * Сетка календаря
 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(110px, 1fr));

    border-left: 1px solid var(--bs-border-color);
    border-top: 1px solid var(--bs-border-color);
}


/*
 * Ячейка дня
 */
.calendar-day {
    min-width: 0;
    min-height: 110px;

    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);

    background: var(--bs-body-bg);

    overflow: hidden;
}


/*
 * Дни предыдущего и следующего месяца
 *
 * Все дни, включая субботы и воскресенья,
 * имеют одинаковый серый фон.
 */
.calendar-day-outside {
    background: var(--bs-tertiary-bg);
}

.calendar-day-outside .calendar-day-number {
    opacity: .4;
}


/*
 * Суббота и воскресенье текущего месяца
 *
 * Только выходные текущего месяца получают
 * светло-розовый фон.
 */
.calendar-day-weekend-current {
    background-color: rgba(var(--bs-danger-rgb), .08);
}


/*
 * Сегодня
 *
 * Светло-голубой фон имеет приоритет над
 * фоном выходного дня.
 */
.calendar-day-today {
    background-color: rgba(var(--bs-info-rgb), .10);
}


/*
 * Шапка ячейки
 *
 * Слева:
 *   17 Ср
 *
 * Справа:
 *   +
 */
.calendar-day-header {
    height: 32px;
    padding: 3px 5px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/*
 * Номер дня + сокращённый день недели
 *
 * Например:
 * 17 Ср
 * 18 Чт
 * 19 Пт
 */
.calendar-day-number {
    display: inline-flex;
    align-items: center;

    height: 26px;
    padding: 0 5px;

    font-size: .85rem;
    white-space: nowrap;
}


/*
 * Сегодняшний день
 *
 * День + день недели выделяются голубой
 * "таблеткой".
 */
.calendar-day-today .calendar-day-number {
    color: var(--bs-white);
    background: var(--bs-info);

    border-radius: 13px;

    font-weight: 600;
}


/*
 * Кнопка "+"
 */
.calendar-day-add {
    width: 22px;
    height: 22px;

    padding: 0;
    border: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    color: var(--bs-secondary-color);

    font-size: 18px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
    border-radius: 4px;

    transition:
        background-color .15s ease,
        color .15s ease;
}

.calendar-day-add:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-primary);
}

.calendar-day-add:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}

.calendar-day-add:active {
    background: var(--bs-secondary-bg);
}


/*
 * Содержимое дня
 */
.calendar-day-content {
    padding: 0 4px 4px;
}


/*
 * Маленькие экраны
 */
@media (max-width: 768px) {

    .calendar-grid {
        grid-template-rows: repeat(6, minmax(90px, 1fr));
    }

    .calendar-day {
        min-height: 90px;
    }

    .calendar-weekday {
        padding: 6px 4px;
        font-size: .75rem;
    }

    .calendar-day-header {
        padding: 2px 4px;
    }

    .calendar-day-number {
        height: 24px;
        padding: 0 4px;
        font-size: .8rem;
    }

    .calendar-day-add {
        width: 20px;
        height: 20px;
        font-size: 17px;
    }
}