/******************************************************** PICKER */
.c-datetime-picker {
    @include userSelectNone();
    padding: $interiorMarginLg !important;
    display: flex !important; // Override .c-menu display: block;
    flex-direction: column;

    > * + * {
        margin-top: $interiorMargin;
    }

    &__close-button {
        display: none; // Only show when body.phone, see below.
    }

    &__pager {
        flex: 0 0 auto;
    }

    &__calendar {
        border-top: 1px solid $colorInteriorBorder;
        flex: 1 1 auto;
    }
}

.c-pager {
    display: grid;
    grid-column-gap: $interiorMargin;
    grid-template-rows: 1fr;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    .c-icon-button {
        font-size: 0.8em;
    }

    &__month-year {
        text-align: center;
    }
}

/******************************************************** CALENDAR */
.c-calendar {
    $mutedOpacity: 0.5;
    display: grid;
    grid-template-columns: repeat(7, min-content);
    grid-template-rows: auto;
    grid-gap: 1px;

    [class*="__row"] {
        display: contents;
    }

    .c-calendar__row--header {
        pointer-events: none;

        .c-calendar-cell {
            opacity: $mutedOpacity;
        }
    }

    .c-calendar-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: $interiorMargin;
        cursor: pointer;

        @include hover {
            background: $colorMenuHovBg;
        }

        &.is-in-month {
            background: $colorMenuElementHilite;
        }

        &.selected {
            background: $colorKeyBg;
            color: $colorKeyFg;
        }
    }

    &__day {
        &--sub {
            opacity: $mutedOpacity;
            font-size: 0.8em;
        }
    }
}

/******************************************************** MOBILE */
body.phone {
    .c-datetime-picker {
        &.c-menu {
            @include modalFullScreen();
        }

        &__close-button {
            display: flex;
            justify-content: flex-end;
        }
    }

    .c-calendar {
        grid-template-columns: repeat(7, auto);
    }
}