/*
 * Calendars styles
 */

$datepicker-color:         $body-color;
$datepicker-alt-color:     #fff;
$datepicker-alt-bg:        $primary;
$datepicker-padding:       $spacer;
$datepicker-btn-border-radius: $btn-border-radius;

.calendar-container {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    color: $datepicker-color;
    max-width: 100%;

    .current-container {
        flex: 1; // ratio : 1/3
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        padding: $datepicker-padding;
        color: $datepicker-alt-color;
        background: $datepicker-alt-bg;

        .current-date {
            margin-top: 0;
            margin-bottom: $spacer;
            padding: 0;
            white-space: nowrap;
        }

        .current-time {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            font-size: $font-size-lg;
            font-weight: bold;
            margin-top: auto;
        }
    }

    .calendar {
        flex: 2; // ratio : 2/3
        max-width: 100%;
        padding: $datepicker-padding;
    }

    .calendar-nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .time-input {
        flex: 1;
        max-width: 60px;

        input,
        .btn {
            display: block;
            width: 100%;
            font-weight: normal;
        }

        .btn {
            opacity: .75;
            //color: rgba($datepicker-alt-color, .25);

            &:not(.disabled):hover,
            &:not(.disabled):focus {
                opacity: 1;
            }
        }

        input {
            color: $datepicker-alt-color;
            line-height: 1;
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
            text-align: center;

            &:focus {
                border: none;
                box-shadow: none;
            }
        }
    }
}

.calendar-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .btn {
        //padding: $btn-padding-y-sm $btn-padding-x-sm;
        box-shadow: none;

        // precise selector to override .input-group .btn
        &.day,
        &.month,
        &.year {
            @include border-radius($datepicker-btn-border-radius);
        }

        &.now {
            color: $datepicker-alt-bg !important;
            border: 1px solid $datepicker-alt-bg !important;
            background: transparent !important;
        }

        &.selected {
            color: $datepicker-alt-color !important;
            background: $datepicker-alt-bg !important;
        }

        &.fill {
            color: var(--#{$prefix}tertiary-color);
        }

        &:not(.disabled):hover,
        &:not(.disabled):focus {
            color: $dropdown-link-hover-color;
            background-color: $dropdown-link-hover-bg;
        }
    }
}


// -
// Calendar views
// ---

.calendar-days {
    .btn {
        // fill cell
        display: block;
        width: 100%;
        padding: $btn-padding-y-sm $btn-padding-x-sm;
    }

    .day-name {
        font-size: .75rem;
        font-weight: $font-weight-base;
        color: var(--#{$prefix}tertiary-color);
        text-transform: uppercase; // todo : use a var
    }

    table {
        margin: 0 auto;
    }

    th,
    td {
        padding: 2px;
        text-align: center;
        vertical-align: middle;
    }
}

.calendar-years,
.calendar-months {
    .btn {
        flex: 1;
    }

    .calendar-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: map-get($spacers, 1);

        margin: map-get($spacers, 1) 0;
    }
}


// -
// Calendar variants
// ---

.calendar-container.light {
    color: $toolbar-color;

    .calendar-current,
    .calendar-previous,
    .calendar-next {
        color: $toolbar-link-color;

        &:hover,
        &:focus {
            color: $toolbar-link-hover-color;
        }
    }

    .calendar-grid {
        .btn {
            color: $toolbar-link-color;

            &.fill {
                color: $toolbar-link-disabled-color;
            }

            &:not(.disabled):hover,
            &:not(.disabled):focus {
                color: $toolbar-link-hover-color;
                background-color: $toolbar-link-hover-bg;
            }
        }
    }

    .day-name {
        color: $toolbar-link-disabled-color;
    }
}

.calendar-vertical {
    @include calendar-vertical-variant();
}


// -
// Calendar picker
// ---

.dropdown-menu {
    .calendar-container {
        margin: (-$dropdown-padding-y) (-$dropdown-padding-x);
        border-radius: $dropdown-inner-border-radius;
        overflow: hidden;
    }
}

// vertical layout for XS screens
@media (max-width: map-get($grid-breakpoints, 'sm')) {
    .calendar-container {
        @include calendar-vertical-variant();
    }
}
