@use 'sass:color';
@use 'sass:math';

$calendarBackground: #fff;
$daySize: 39px;
$radius: 4px;
$padding: math.div($daySize, 16);
$dayMargin: 2px;
$calendarWidth: ($daySize*7 + $dayMargin*14 + $padding*2 + 2);
$calendarBorderColor: #e6e6e6;
$controls-parent-width: 45%;
$controls-btn-size: 1.5rem;
$controls-btn-padding: math.div($controls-btn-size, 6);
$invertedBg: invert($calendarBackground);
$calendarForeground: color.change($invertedBg, $alpha: 0.9);
$activeColor: #569ff7;
$mobileQuerySize:481px;

jdp-overlay{
    width: 0px;
    height: 0px;
    @media only screen and (max-width: $mobileQuerySize) {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.3);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        display: none;
    }
}
jdp-container {
    position: absolute;
    max-width: $calendarWidth;
    min-width: $calendarWidth;
    background: $calendarBackground;
    display: none;
    direction: rtl;
    padding: .5rem 0;
    box-shadow: 0 1px 6px rgb(0 0 0 / 12%), 0 1px 4px rgb(0 0 0 / 24%);
    border-radius: $radius;
    overflow: hidden;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -moz-animation: jdpOpenAnimation 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-animation: jdpOpenAnimation 300ms cubic-bezier(0.23, 1, 0.32, 1);
    animation: jdpOpenAnimation 300ms cubic-bezier(0.23, 1, 0.32, 1);

    @media only screen and (max-width: $mobileQuerySize) {
        max-width: 100%;
        width: 100%;
        left: 50% !important;
        bottom: 0% !important;
        top: unset !important;
        transform: translateX(-50%) !important;
        min-width: 280px;
        border-radius: $radius $radius 0 0;
        -moz-animation: jdpOpenAnimationMobile 300ms cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-animation: jdpOpenAnimationMobile 300ms cubic-bezier(0.23, 1, 0.32, 1);
        animation: jdpOpenAnimationMobile 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    &, *, *::after, *::before {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .jdp {
        &-icon {
            &-plus, &-minus {
                display: inline-block;
                text-align: center;
                cursor: pointer;
                vertical-align: middle;
                overflow: hidden;
                flex: none;
                text-decoration: none;
                border: 1px solid $calendarBorderColor;
                border-radius: $radius;

                svg {
                    width: $controls-btn-size;
                    height: $controls-btn-size;
                    padding: $controls-btn-padding;
                    vertical-align: middle;
                }

                &.not-in-range {
                    cursor: not-allowed;

                    svg {
                        opacity: 0.3;
                    }
                }
            }
        }

        &-years, &-months {
            display: -webkit-inline-box;
            display: -webkit-flex;
            display: -ms-inline-flexbox;
            display: inline-flex;
            margin: 0 math.div((math.div(100%, 2)-$controls-parent-width), 2);
            font-size: 120%;
            color: $calendarForeground;
            fill: $calendarForeground;
        }

        &-months {
            width: $controls-parent-width + 5;
        }

        &-years {
            width: $controls-parent-width - 5;
        }

        &-year, &-month, &-time {
            &, input, select {
                width: 100%;
                height: auto;
                text-align: center;
                background: $calendarBackground;
                border: none;
                border-radius: 0;
                padding: 0;
                margin: 0;
                display: inline-block;
                font-size: inherit;
                font-family: inherit;
                vertical-align: initial;
                font-weight: 300;
                color: inherit;
                line-height: inherit;
                outline: none;

                &:focus, &:active {
                    outline: none
                }

                option {
                    font-size: 95%;
                    min-height: 1.3rem;
                    outline: none;
                    padding: 0;
                }
            }

            &:hover {
                filter: brightness(.9);
            }

            input {
                cursor: text;
                -webkit-appearance: none;
                -moz-appearance: textfield;

                &::-webkit-outer-spin-button,
                &::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                }
            }

            select {
                cursor: pointer;
                position: relative;
                -webkit-appearance: menulist;
                -moz-appearance: menulist;
            }
        }

        &-days {
            padding: .5rem 0 0 0;
            outline: 0;
            text-align: left;
            width: 100%;
            display: inline-block;
            display: -ms-flexbox;
            display: flex;
            flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            -ms-flex-pack: justify;
            justify-content: space-around;
        }

        &-day, &-day-name {
            background: none;
            border: 1px solid transparent;
            font-weight: 400;
            width: 14.2857143%;
            flex-basis: 14.2857143%;
            height: $daySize - 8;
            line-height: $daySize - 8;
            margin: 2px 0;
            display: inline-block;
            position: relative;
            justify-content: center;
            text-align: center;
            color: $calendarForeground;

            &.today {
                border-color: color.change($invertedBg, $alpha: 0.3);
            }

            &.selected {
                background-color: $activeColor !important;
                color: #fff !important;
                opacity: 1 !important;
            }

            &.last-week,&.holly-day {
                color: #f44336;
            }
        }

        &-day {
            &.not-in-month {
                opacity: .4;
            }

            &.disabled-day {
                opacity: .15;
                cursor: not-allowed;
            }

            &:not(.disabled-day) {
                cursor: pointer;
                border-radius: $radius;
                transition: linear .1s;

                &:hover {
                    background: color.change($invertedBg, $alpha: 0.1);
                    transform: scale(1.15);
                    z-index: 1;
                }
            }
        }

        &-day-name {
            border-radius: 0;
            font-weight: 900;
            font-size: 90%;
            background-color: color.change($invertedBg, $alpha: 0.1);
            cursor: default;
        }

        &-footer {
            padding: 0.5rem .5rem 0 .5rem;
            outline: 0;
            width: 100%;
            display: inline-block;
            display: -ms-flexbox;
            display: flex;
            flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            -ms-flex-pack: justify;
            justify-content: space-between;
            @media only screen and (max-width: $mobileQuerySize) {
                margin: .5rem 0;
            }
        }

        &-btn {

            &-today,
            &-empty,
            &-close {
                background: $activeColor;
                font-size: 90%;
                padding: .3em .6em;
                border-radius: 5px;
                font-weight: 400;
                display: inline-block;
                text-align: center;
                color: #fff;
                cursor: pointer;

                @media only screen and (max-width: $mobileQuerySize) {
                    padding: 0.5em 0.8em;
                    font-size: 100%;
                }

                &.disabled-btn {
                    opacity: .2;
                    cursor: not-allowed;
                }
            }

            &-today ~ .jdp-btn-empty{
                @media only screen and (max-width: $mobileQuerySize) {
                    margin-right: 1em;
                    margin-left: auto;
                }
            }
        }

        &-time-container {
            display: flex;
            padding: 0;

            .jdp-time {
                flex: auto;
                margin: 0 .5rem;
                position: relative;

                select {
                    padding: 0.5rem 1rem 0.5rem 7px;
                    background: color.change($invertedBg, $alpha: 0.03);
                    border-radius: 5px;
                }

                &:after {
                    content: ":";
                    position: absolute;
                    right: -.7rem;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: 1.5rem;
                    height: 100%;
                }

                &:first-child:after {
                    display: none
                }
            }

            &.jdp-only-time{
                .jdp-time{
                    select {
                        padding: .8rem 1rem .8rem 7px;
                        font-size: 1.5rem;
                    }

                    &:after {
                        position: absolute;
                        right: -.8rem;
                        font-size: 2.3rem;
                    }
                }

            }
        }
    }
}

@-webkit-keyframes jdpOpenAnimation {
    from {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jdpOpenAnimation {
    from {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes jdpOpenAnimationMobile {
    from {
        bottom: -10%;
        opacity: 0;
    }

    to {
        bottom: 0%;
        opacity: 1;
    }
}

@keyframes jdpOpenAnimationMobile {
    from {
        margin-bottom: -20%;
        opacity: 0;
    }

    to {
        margin-bottom: 0%;
        opacity: 1;
    }
}