/* Datepicker */
.popover {
    .theme-datepicker__mobile.datepicker,
    .theme-datepicker__mobile.ui-datepicker {
        padding: 0;
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }
}

.theme-datepicker.datepicker,
.theme-datepicker.ui-datepicker {
    --icon-nav-size: 14px;
    --icon-arrow: url('../../images/icons/arrow-right-icon.svg');
    --item-font-size: 14px;
    --item-text-color: #333;
    --item-background-default: #eee;

    table {
        font-size: var(--item-font-size);

        th, td {
            vertical-align: middle;
            font-size: var(--item-font-size);
            border: none;
            border-radius: 0;
            transition: 0.2s ease-in-out;
            transition-property: background, color;
        }

        tr.selected td,
        td {
            background: #fff !important;
        }

        tbody td,
        td .ui-state-default {
            color: var(--item-text-color);
        }
    }

    tr td span.active,
    tr td.active,
    tr td span.active:hover,
    .ui-state-active {
        background: var(--clr-primary) !important;
        color: #fff !important;
    }

    th.prev,
    th.next,
    .ui-datepicker-next,
    .ui-datepicker-prev {
        cursor: pointer;
        font-size: 0 !important;

        &::before {
            content: '';
            mask-image: var(--icon-arrow);
            mask-size: contain;
            -webkit-mask-image: var(--icon-arrow);
            -webkit-mask-size: contain;
            background-color: #fff;
            width: var(--icon-nav-size);
            height: var(--icon-nav-size);
            display: inline-block;
            vertical-align: middle;
        }

        i {
            display: none;
        }
    }
}

.theme-datepicker.datepicker {
    min-width: 17em;

    &::before,
    &::after {
        display: none;
    }

    th.prev {
        &::before {
            transform: scaleX(-1);
        }
    }

    table {
        width: 100%;

        thead {
            color: white;
            background: var(--clr-primary);
        }

        thead tr:first-child th:hover {
            background: var(--clr-primary);
            color: #fff;
        }

        th.datepicker-switch {
            background: var(--clr-primary);
            color: #fff;
        }

        tbody td:not(.active):hover,
        tbody td:not(.active).today {
            background-color: var(--item-background-default) !important;
        }

        tbody {
            background: #fff;
        }
    }
}

.theme-datepicker.ui-datepicker {
    --icons-nav-spacing: 4px;

    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

    .ui-datepicker-title {
        font-size: var(--item-font-size);
        margin: 0 auto;
    }

    .ui-datepicker-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
    }

    .ui-datepicker-prev {
        margin-left: var(--icons-nav-spacing);
    }

    .ui-datepicker-next {
        order: 6;
        margin-right: var(--icons-nav-spacing);
    }

    table {
        font-size: var(--item-font-size);
        border: 0;
    }

    .ui-datepicker-next,
    .ui-datepicker-prev {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        min-height: 24px;
        inset: 0;
        position: relative;

        .ui-icon {
            display: none;
        }
    }

    .ui-datepicker-prev {
        &::before {
            transform: scaleX(-1);
        }
    }

    td .ui-state-hover {
        background: var(--item-background-default);
        color: var(--item-text-color);
    }

    .ui-datepicker-header, th,
    td .ui-state-active {
        background: var(--clr-primary) !important;
        color: #fff !important;
        border-radius: 0;
        text-shadow: none;
        box-shadow: none;
    }

    td.ui-datepicker-today {
        a:not(.ui-state-active) {
            background: var(--item-background-default);
            color: var(--item-text-color);
        }
    }

    td .ui-state-default {
        text-shadow: none;
        box-shadow: none;
    }

    .ui-widget-header .ui-state-default,
    .ui-widget-content .ui-state-default {
        border-radius: 0;
        box-shadow: none;
        border: 0;
    }

    td .ui-state-default {
        border-radius: 0;
        font-size: var(--item-font-size);
        border: 0;
    }
}

@media (width < 768px) {
    .theme-datepicker__mobile.datepicker,
    .theme-datepicker__mobile.ui-datepicker {
        --icon-nav-size: 16px;
        --item-font-size: 18px;

        width: 100%;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        z-index: 9999999 !important;
        position: fixed !important;
        border: 0;
        opacity: 0;
        border-radius: 0;
        transform: translateY(100%);
        transition: 0.3s ease-in-out;
        transition-delay: .4ms;
        transition-property: opacity, transform;

        &.theme-datepicker__opened {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .popover {
        .theme-datepicker__mobile.datepicker,
        .theme-datepicker__mobile.ui-datepicker {
            position: relative !important;
            transform: none !important;
            opacity: 1 !important;
        }

        &:has(.theme-datepicker) {
            min-width: 98%;

            .editable-date {
                width: 100%;
            }
        }
    }

    .theme-datepicker__mobile.datepicker {
        &::before,
        &::after {
            display: none;
        }

        table {
            width: 100%;

            th, td {
                width: 40px;
                height: 40px;
            }
        }
    }

    .theme-datepicker__mobile.ui-datepicker {
        --icons-nav-spacing: 18px;

        .ui-datepicker-next,
        .ui-datepicker-prev {
            height: 100%;
        }

        td .ui-state-default {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}