/*
 * Calendars styles
 */

@datepicker-color:         @text-color;

@datepicker-alt-color:     #fff;
@datepicker-alt-bg:        @brand-primary;

@datepicker-padding:       15px;
@datepicker-grid-border:   @dropdown-divider-bg; // #eee

// text height + padding height + border height
@day-names-row-computed-height: @line-height-small*10px + 2px + 1px; // 18
@day-btn-computed-height: (@line-height-small*@font-size-small) + 2*(1px+3px); // 26
// btn height + padding height + border height
@week-row-computed-height: @day-btn-computed-height + 2px + 1px; // 29
// table head height + nbRows * row height + padding top
@days-grid-computed-height: @day-names-row-computed-height + 6*@week-row-computed-height + 10px; // 203

.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;
            padding: 0;
            font-size: @font-size-h3;
            font-weight: 900;

            small {
                display: block;
                margin-bottom: 5px;
                font-weight: normal;
                color: fadeOut(@datepicker-alt-color, 25%);
            }
        }

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

        .btn-now {
            color: fadeOut(@datepicker-alt-color, 25%);
            border: 1px solid fadeOut(@datepicker-alt-color, 25%);
            background: transparent;

            &:active,
            &:hover,
            &:focus {
                color: @datepicker-alt-color;
                border: 1px solid @datepicker-alt-color;
                background: transparent;
            }
        }
    }

    .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;

        .btn {
            padding: 0 @padding-base-horizontal;

            .fa {
                margin: 0;
            }
        }
    }

    .calendar-current {
        color: @datepicker-color;
        font-family: @headings-font-family;
        font-size: @font-size-large;
    }

    .calendar-previous,
    .calendar-next {
        color: fadeOut(@datepicker-color, 50%);

        &.disabled {
            opacity: 0;
        }

        &:hover,
        &:focus {
            color: @datepicker-color;
        }
    }

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

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

        .btn {
            color: fadeOut(@datepicker-alt-color, 25%);

            &:not(.disabled):hover,
            &:not(.disabled):focus {
                color: @datepicker-alt-color;
            }
        }

        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;
    min-height: @days-grid-computed-height;

    .btn {
        padding: 3px 7px;
        font-size: @font-size-small;
        line-height: @line-height-small;
        border-radius: @border-radius-small;

        &.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: #BBBBBB;
        }

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


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

.calendar-days {
    padding-top: 10px;
    .btn {
        // fill cell
        display: block;
        width: 100%;
    }

    .day-name,
    .week-num {
        font-size: 10px;
        font-weight: normal;
    }

    .day-name {
        color: @datepicker-alt-bg;
        text-transform: uppercase; // todo : use a var
    }

    .week-num {
        color: @text-muted;
        min-width: 15px;
    }

    table {
        margin: 0 auto;

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

        th {
            border: 1px solid transparent;
            line-height: @line-height-small;
        }

        td {
            border: 1px solid @datepicker-grid-border;
        }

        // removes outside border
        tbody {
            tr {
                th + td {
                    border-left: transparent !important;
                }

                td:last-child {
                    border-right: transparent !important;
                }

                &:first-child td {
                    border-top: transparent !important;
                }

                &:last-child td {
                    border-bottom: transparent !important;
                }
            }
        }
    }
}

.calendar-years,
.calendar-months {
    .btn {
        position: relative;
        flex: 1;
        min-width: 60px; // todo temp fix to avoid too huge resize on view changes
        margin: 1px 1px 1px 2px;

        &:first-child {
            margin-left: 0;
        }

        &:not(:last-child):after {
            position: absolute;
            display: block;
            content: " ";
            width: 1px;
            right: -3px;
            top: -2px;
            bottom: -2px;
            background: @datepicker-grid-border;
        }
    }

    .calendar-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        border-bottom: 1px solid @datepicker-grid-border;

        &:last-child {
            border-bottom: none;
        }
    }
}


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

.calendar-container.dark {
    color: @datepicker-color;

    .calendar-current {
        color: @datepicker-color;
    }
}

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

    .calendar-current {
        color: @toolbar-link-color;
    }

    .calendar-previous,
    .calendar-next {
        color: fadeOut(@toolbar-color, 50%);

        &:hover,
        &:focus {
            color: @toolbar-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;
            }
        }

        table {
            td {
                border: 1px solid @toolbar-link-hover-bg;
            }
        }
    }
}

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


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

.dropdown-menu {
    .calendar-container {
        margin: -@dropdown-menu-padding-v -@dropdown-menu-padding-h;
    }
}

// vertical layout for XS screens
@media (max-width: @screen-xs-max) {
    .calendar-container {
        .calendar-vertical-variant();
    }
}

.calendar-vertical-variant() {
    flex-direction: column;

    .current-container,
    .calendar {
        flex: auto; // otherwise it breaks on IE
        width: 100%;
    }
}