/* Datepicker
   ========================================================================== */

/**
 * jQuery UI Datepicker.
 *
 * Some classes and HTML elements generally added via JavaScript, more info -
 * https://jqueryui.com/datepicker/
 *
 * Example HTML:
 *
 * <div class="ui-datepicker">
 *     <div class="ui-datepicker-header">
 *         <a class="ui-datepicker-prev">
 *             <span>Prev</span>
 *         </a>
 *         <a class="ui-datepicker-next">
 *             <span>Next</span>
 *         </a>
 *         <div class="ui-datepicker-title">
 *             <span class="ui-datepicker-month">April</span>
 *             <span class="ui-datepicker-year">2014</span>
 *         </div>
 *     </div>
 *     <table class="ui-datepicker-calendar">
 *         <thead>
 *             <tr>
 *                 <th class="ui-datepicker-week-end">
 *                     <span>Su</span>
 *                 </th>
 *                 <th>
 *                     <span>Mo</span>
 *                 </th>
 *                 <th>
 *                     <span>Tu</span>
 *                 </th>
 *                 <th>
 *                     <span>We</span>
 *                 </th>
 *                 <th>
 *                     <span>Th</span>
 *                 </th>
 *                 <th>
 *                     <span>Fr</span>
 *                 </th>
 *                 <th class="ui-datepicker-week-end">
 *                     <span>Sa</span>
 *                 </th>
 *             </tr>
 *         </thead>
 *         <tbody>
 *             <tr>
 *                 <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable">
 *                     &nbsp;
 *                 </td>
 *                 <td class="ui-datepicker-other-month ui-datepicker-unselectable">
 *                     &nbsp;
 *                 </td>
 *                 <td>
 *                     <a>1</a>
 *                 </td>
 *                 <td>
 *                     <a>2</a>
 *                 </td>
 *                 <td>
 *                     <a>3</a>
 *                 </td>
 *                 <td class="ui-datepicker-days-cell-over ui-datepicker-current-day ui-datepicker-today">
 *                     <a class="ui-state-highlight ui-state-active">4</a>
 *                 </td>
 *                 <td>
 *                     <a>5</a>
 *                 </td>
 *             </tr>
 *             ...etc...
 *         </tbody>
 *     </table>
 * </div>
 */

.ui-datepicker {
    display: none;
    width: 17em;
    padding: 0.2em 0.2em 0;

    @if $flat-theme < 1 {
        box-shadow: $standard-shadow;
    }

    .ui-datepicker-header {
        position: relative;
        padding: 0.2em 0;
    }

    .ui-datepicker-prev,
    .ui-datepicker-next {
        position: absolute;
        top: 50%;
        width: 1.8em;
        height: 1.8em;
        margin-top: -0.9em;

        @if $border-radius > 0 {
            border-radius: $border-radius;
        }

        background-color: transparent;
    }

    .ui-datepicker-prev {
        left: 0.2em;
    }

    .ui-datepicker-next {
        right: 0.2em;
    }

    .ui-datepicker-prev span,
    .ui-datepicker-next span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -8px;
    }

    .ui-datepicker-prev-hover,
    .ui-datepicker-next-hover {
        background-color: $color-background-box;
    }

    .ui-datepicker-title {
        margin: 0 2.2em;
        line-height: 1.846153846153846; // 24px / 13px
        text-align: center;

        select {
            margin: 0;
        }
    }

    select.ui-datepicker-month,
    select.ui-datepicker-year {
        width: 45%;
    }

    table {
        width: 100%;
        margin: 0 0 0.2em;
    }

    th {
        padding: 0.5em 0.2em;
        border: 0;
        text-align: center;
    }

    td {
        padding: 1px;
        border: 0;

        a,
        span {
            display: block;
            padding: 0.2em;
            text-align: center;
        }

        a.ui-state-active {
            border-color: lighten($color-link, 42%);
            background-color: $color-selected;
        }

        a.ui-state-highlight:hover {
            border-color: lighten($color-warning-text, 8%);
        }

        a.ui-state-active:hover {
            border-color: lighten($color-link, 27%);
        }

        &.ui-datepicker-week-col {
            padding: 0.32em 0;
            text-align: center;
        }
    }

    .ui-datepicker-buttonpane {
        margin: 0.7em 0 0;
        padding: 0 0.2em;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        background-image: none;

        button {
            width: auto;
            margin: 0.5em 0.2em 0.4em;
            padding: 0.2em 0.6em 0.3em;
            float: right;
            overflow: visible;
            cursor: pointer;

            &.ui-datepicker-current {
                float: left;
            }
        }
    }

    .ui-icon {
        display: block;
        top: 0.3em;
        left: 0.5em;
    }
}

@include dark-mode {
    .ui-datepicker {
        box-shadow: $dark-standard-shadow;

        .ui-datepicker-prev-hover,
        .ui-datepicker-next-hover {
            background-color: $dark-color-background-box;
        }

        td {
            a.ui-state-highlight {
                border-color: $color-warning-text;
            }

            a.ui-state-active {
                border-color: $dark-color-link;
                background-color: $dark-color-selected;
            }

            a.ui-state-active:hover {
                border-color: $dark-color-link-hover;
            }
        }
    }
}

/**
 * Multiple calendars.
 */

.ui-datepicker.ui-datepicker-multi {
    width: auto;
}

.ui-datepicker-multi {
    .ui-datepicker-group {
        float: left;

        table {
            width: 95%;
            margin: 0 auto 0.4em;
        }
    }

    .ui-datepicker-group-last .ui-datepicker-header,
    .ui-datepicker-group-middle .ui-datepicker-header {
        border-left-width: 0;
    }

    .ui-datepicker-buttonpane {
        clear: left;
    }
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}

.ui-datepicker-row-break {
    width: 100%;
    clear: both;
    font-size: 0;
}

/**
 * Datepicker RTL support.
 */

[dir="rtl"] {
    .ui-datepicker-prev {
        right: 0.2em;
        left: auto;

        span {
            transform: rotate(180deg);
        }
    }

    .ui-datepicker-next {
        right: auto;
        left: 0.2em;

        span {
            transform: rotate(180deg);
        }
    }

    .ui-datepicker-buttonpane {
        clear: right;
    }

    .ui-datepicker-buttonpane button {
        float: left;
    }

    .ui-datepicker-buttonpane button.ui-datepicker-current,
    .ui-datepicker-group {
        float: right;
    }

    .ui-datepicker-group-last .ui-datepicker-header,
    .ui-datepicker-group-middle .ui-datepicker-header {
        border-right-width: 0;
        border-left-width: 1px;
    }
}