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

$calendarBackground: #fff;
$daySize: 39px;
$radius: 4px;
$padding: math.div($daySize,16);
$dayMargin: 2px;
$daysWidth: ($daySize*7 + $dayMargin*14 + $padding*2 + 2);
$calendarWidth: $daysWidth;
$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;

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

    &, *, *::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 {
            &, 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: 90%;
                }
            }

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

            &.last-week {
                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;
        }

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

@-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);
    }
}

@media only screen and (max-width: $calendarWidth ){
    jdp-container {
        max-width: 90%;
        min-width: 80%;
    }
}