/*
|--------------------------------------------------------------------------
| Calendar inside the Word Intelligence mobile navigation
|--------------------------------------------------------------------------
*/

.mobile-nav-calendar {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Mobile and tablet navigation
|--------------------------------------------------------------------------
*/

@media (max-width: 1203px) {
    /*
     * The mount becomes visible only when the calendar
     * has actually been moved into it.
     */
    .mobile-nav-calendar.has-calendar {
        display: block;

        width: 100%;

        margin:
            28px
            0
            100px;

        padding-top: 28px;

        border-top:
            1px solid
            var(--border-line);

        text-align: left;
    }

    /*
     * Fit the existing calendar cleanly within the
     * slide-out mobile navigation.
     */
    .mobile-nav-calendar
    .word-calendar-widget {
        width: 100%;

        margin: 0;

        border:
            1px solid
            var(--border-line);

        background:
            var(--card-bg);

        box-shadow: none;
    }

    .mobile-nav-calendar
    .word-calendar-widget
    > header {
        padding:
            22px
            18px
            10px;
    }

    .mobile-nav-calendar
    .word-calendar-widget
    .current-date {
        font-size: 1rem;
        color:
            var(--text-color);
    }

    .mobile-nav-calendar
    .word-calendar-widget
    .calendar {
        padding:
            8px
            10px
            12px;
    }

    .mobile-nav-calendar
    .word-calendar-widget
    .calendar-footer {
        margin:
            -6px
            10px
            16px;
    }

    /*
     * Slightly reduce calendar-day text for narrower
     * mobile navigation widths.
     */
    .mobile-nav-calendar
    .word-calendar-widget
    .days li {
        padding:
            5px
            2px;

        font-size: 0.78rem;
    }

    /*
     * Keep the calendar above the theme and account
     * controls positioned near the bottom of the menu.
     */
    .mobile-sidebar {
        padding-bottom: 110px;
    }
}

@media (max-width: 420px) {
    .mobile-nav-calendar.has-calendar {
        margin-top: 5px;
        margin-bottom: 2rem;
    }
}