/* ==========================================================
   YEAR VIEW
   Google Calendar inspired
========================================================== */


/* ==========================================================
   YEAR ROOT
========================================================== */

.year-root {

    width: 100%;

    display: grid;

    /*
       Desktop:
       3 months per row
    */
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    /*
       IMPORTANT:
       Do not allow rows to shrink based on viewport height.
    */
    grid-auto-rows:
            300px;

    gap:
            20px;

    padding:
            20px;

    box-sizing:
            border-box;

    overflow-y:
            auto;

    overflow-x:
            hidden;

    align-content:
            start;

}


/* ==========================================================
   MONTH CARD
========================================================== */

.year-month {

    width: 100%;

    /*
       FIXED HEIGHT

       This is the key fix.

       The month card will always have enough
       vertical space for:

       Header
       Weekday header
       6 calendar rows
    */
    height:
            300px;

    min-height:
            300px;

    max-height:
            300px;

    box-sizing:
            border-box;

    background:
            #2b2c2f;

    border:
            1px solid #4a4d51;

    border-radius:
            14px;

    overflow:
            hidden;

    display:
            flex;

    flex-direction:
            column;

}


/* ==========================================================
   MONTH HEADER
========================================================== */

.year-month-header {

    height:
            58px;

    min-height:
            58px;

    flex-shrink:
            0;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    padding:
            0 12px;

    box-sizing:
            border-box;

}


.year-month-title {

    font-size:
            16px;

    font-weight:
            600;

    color:
            #e8eaed;

    cursor:
            pointer;

    user-select:
            none;

}


.year-month-title:hover {

    color:
            #8ab4f8;

}


/* ==========================================================
   WEEKDAY HEADER
========================================================== */

.year-weekdays {

    height:
            34px;

    min-height:
            34px;

    flex-shrink:
            0;

    display:
            grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    border-top:
            1px solid #3c4043;

    border-bottom:
            1px solid #3c4043;

}


.year-weekday {

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    color:
            #9aa0a6;

    font-size:
            10px;

    font-weight:
            500;

    border-right:
            1px solid #3c4043;

}


.year-weekday:last-child {

    border-right:
            none;

}


/* ==========================================================
   CALENDAR GRID
========================================================== */

.year-month-grid {

    /*
       Remaining height:

       300px
       - 58px header
       - 34px weekdays
       = 208px

       208px / 6 rows
       ≈ 34.67px per row
    */

    flex:
            1;

    min-height:
            0;

    display:
            grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    /*
       ALWAYS 6 ROWS
    */
    grid-template-rows:
        repeat(6, minmax(0, 1fr));

    overflow:
            hidden;

}


/* ==========================================================
   DAY CELL
========================================================== */

.year-day {

    min-width:
            0;

    min-height:
            0;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    position:
            relative;

    border-right:
            1px solid #3c4043;

    border-bottom:
            1px solid #3c4043;

    color:
            #e8eaed;

    font-size:
            11px;

    cursor:
            pointer;

    box-sizing:
            border-box;

}


/*
   Remove right border from
   last column
*/

.year-day:nth-child(7n) {

    border-right:
            none;

}


/*
   Remove bottom border from
   final row
*/

.year-day:nth-last-child(-n + 7) {

    border-bottom:
            none;

}


/* ==========================================================
   DAY NUMBER
========================================================== */

.year-day-number {

    width:
            24px;

    height:
            24px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    border-radius:
            50%;

    position:
            relative;

    z-index:
            1;

}


/* ==========================================================
   HOVER
========================================================== */

.year-day:hover
.year-day-number {

    background:
            #3c4043;

}


/* ==========================================================
   DAYS WITH EVENTS
========================================================== */

.year-day.year-has-events
.year-day-number {

    background:
            #1a73e8;

    color:
            white;

}


/* ==========================================================
   OTHER MONTH DAYS
========================================================== */

.year-other-month {

    color:
            #6f7378;

}


.year-other-month.year-has-events
.year-day-number {

    background:
            rgba(26, 115, 232, 0.45);

    color:
            #dbe7ff;

}


/* ==========================================================
   TODAY
========================================================== */

.year-today
.year-day-number {

    outline:
            2px solid #8ab4f8;

    outline-offset:
            1px;

}


/* ==========================================================
   SELECTED DAY
========================================================== */

.year-selected
.year-day-number {

    box-shadow:
            0 0 0 2px
            rgba(138, 180, 248, 0.45);

}


/* ==========================================================
   RESPONSIVE YEAR VIEW
========================================================== */


/*
   Medium screens:
   2 months per row
*/

@media (max-width: 1200px) {

    .year-root {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows:
                300px;

    }

}


/*
   Small screens:
   1 month per row
*/

@media (max-width: 760px) {

    .year-root {

        grid-template-columns:
            1fr;

        grid-auto-rows:
                300px;

        padding:
                12px;

        gap:
                16px;

    }

}


/*
   Very small screens

   Keep the month height fixed.
   Only reduce horizontal padding/gaps.
*/

@media (max-width: 520px) {

    .year-root {

        padding:
                8px;

        gap:
                12px;

    }

}