//
// Copyright (c) 2018-present, Vonage. All rights reserved.
//

@import 'flatpickr';

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: none;
}

.Vlt-datepicker {
    @extend .Vlt-elevation--3;
    border: 1px solid $grey-light;
    border-radius: 6px;
    width: 329px;

    &.Vlt-datepicker--month-view {
        .flatpickr-weekdays,
        .flatpickr-days {
            display: none;
        }

        .Vlt-datepicker__months {
            display: block;
        }

        .Vlt-datepicker__footer {
            display: none;
        }
    }

    &.rangeMode {
        .Vlt-datepicker__range {
            display: block;
        }

        .flatpickr-day {
            &.selected {
                &:before {
                    animation-name: none;
                    background-color: $black;
                }
            }
        }

        .Vlt-datepicker__months {
            .Vlt-datepicker__month {
                &.selected {
                    color: $black;

                    &:after {
                        background-color: $grey-lighter;
                    }
                }
            }
        }
    }

    .flatpickr {
        &-rContainer,
        &-weekdays,
        &-days,
        &-days .dayContainer,
        &-dayContainer {
            min-width: 279px;
            width: 279px;
        }

        &-weekdays {
            border-bottom: 1px solid $grey-light;
            height: 30px;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        &-weekday {
            color: $black;
            font-size: 1.2rem;
            font-weight: 600;
        }

        &-day {
            border: 0;
            color: $black;
            height: 30px;
            line-height: 30px;
            margin-top: 4px;
            transition: color 0.2s;

            &:before {
                background-color: transparent;
                border-radius: 50%;
                content: '';
                height: 30px;
                left: 50%;
                margin-left: -15px;
                position: absolute;
                transition: background-color 0.2s;
                width: 30px;
                z-index: -1;
            }

            &:nth-child(7n) {
                &.flatpickr-day.inRange {
                    border-bottom-right-radius: 15px;
                    border-top-right-radius: 15px;
                    box-shadow: -5px 0 0 $grey-lighter;
                }
            }

            &:nth-child(7n +1) {
                &.flatpickr-day.inRange {
                    border-bottom-left-radius: 15px;
                    border-top-left-radius: 15px;
                    box-shadow: 5px 0 0 $grey-lighter;
                }

                &.flatpickr-day.endRange {
                    &:after {
                        display: none;
                    }
                }
            }

            &.today {
                border: 0;
            }

            &.prevMonthDay,
            &.flatpickr-disabled {
                color: $grey;
                cursor: default;
                pointer-events: none;
            }

            &.nextMonthDay {
                height: 0;
                visibility: hidden;
            }

            &:hover,
            &.startRange,
            &.endRange,
            &.selected {
                background: none;
                border: 0;
                color: $white;
                font-weight: 600;
                position: relative;

                &:before {
                    background-color: $black;
                }
            }

            &.selected {
                &:before {
                    animation-duration: 0.1s;
                    animation-name: selected;
                    background-color: $indigo;
                }
            }

            @keyframes selected {
                0%   {background-color: $black;}
                100% {background-color: $indigo;}
            }

            &.startRange + .inRange,
            &.endRange {
                &:after {
                    background-color: $grey-lighter;
                    content: '';
                    height: 30px;
                    position: absolute;
                    right: 50%;
                    width: 100%;
                    z-index: -2;
                }
            }

            &.startRange  {
                &.endRange {
                    &:after {
                        display: none;
                    }
                }
            }

            &.inRange,
            &.inRange.today {
                background-color: $grey-lighter;
                border-color: $grey-lighter;
                box-shadow: -5px 0 0 $grey-lighter, 5px 0 0 $grey-lighter;
                font-weight: 600;

                &:hover {
                    color: $grey-darker;
                }
            }
        }

        &-innerContainer {
            padding: 17px 25px 0px;
        }
    }

    .Vlt-datepicker {
        &__header {
            padding: 25px 30px 16px;
            position: relative;
            text-align: left;
        }

        &__header-month,
        &__header-year {
            color: $black;
            font-size: 2.2rem;
            font-weight: 800;
            line-height: 3rem;
            transition: color 0.2s;
        }

        &__header-month {
            cursor: pointer;

            &:hover {
                color: $grey-darker;
            }
        }

        &__nav {
            position: absolute;
            right: 25px;
                top: 25px;

            &-next,
            &-prev {
                $fill-color: encode-hex-code($black);
                background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M3.38326%207.96544C3.58628%207.68629%203.97717%207.62457%204.25632%207.82759L9.99983%2012.0047L15.7433%207.82759C16.0225%207.62457%2016.4134%207.68629%2016.6164%207.96544C16.8194%208.2446%2016.7577%208.63549%2016.4785%208.83851L10.3674%2013.283C10.1483%2013.4423%209.85138%2013.4423%209.63222%2013.283L3.52111%208.83851C3.24195%208.63549%203.18023%208.2446%203.38326%207.96544Z%22%2F%3E%0A%3C%2Fsvg%3E');
                background-position: center center;
                background-repeat: no-repeat;
                background-size: 20px;
                border: 1px solid $grey;
                border-radius: 50%;
                cursor: pointer;
                display: inline-block;
                height: 30px;
                transform: rotate(270deg);
                transition: background-color 0.2s;
                width: 30px;

                &:hover {
                    background-color: rgba($black, 0.1);
                }

                &:active {
                    background-color: rgba($black, 0.2);
                }
            }

            &-prev {
                margin-right: 10px;
                transform: rotate(90deg);
            }
        }

        &__range {
            background: linear-gradient(to right, $gradient-pink, $gradient-peach);
            color: $white;
            display: none;
            font-size: 1.6rem;
            font-weight: 600;
            line-height: 2.4rem;
            padding: 22px 30px 8px;
            position: relative;
            text-align: left;

            &:after {
                background-color: rgba($white, 0.5);
                content: '';
                height: 40px;
                left: 50%;
                margin-left: -1px;
                position: absolute;
                top: 9px;
                transform: rotate(35deg);
                width: 1px;
            }

            &-start,
            &-end {
                display: inline-block;

                &:before {
                    font-size: 1.6rem;
                    font-weight: 400;
                    line-height: 1.6rem;
                    position: absolute;
                    top: 19px;
                    transition: font-size 0.2s, top 0.2s;
                }

                &.selected {
                    &:before {
                        font-size: 1.2rem;
                        top: 10px;
                    }
                }
            }

            &-start {
                width: 165px;

                &:before {
                    content: 'Start';
                }
            }

            &-end {
                white-space: nowrap;
                width: 102px;

                &:before {
                    content: 'End';
                }
            }
        }

        &__months {
            display: none;
            margin: 15px 0;
            max-width: 279px;
            width: 279px;

            .Vlt-datepicker__month {
                color: $black;
                display: inline-block;
                font-size: 1.5rem;
                line-height: 2.1rem;
                margin-bottom: 24px;
                padding: 12px 0;
                position: relative;
                text-transform: uppercase;
                transition: color 0.2s;
                width: 25%;

                &:after {
                    background-color: transparent;
                    border-radius: 50%;
                    bottom: 0;
                    content: '';
                    height: 50px;
                    left: 50%;
                    position: absolute;
                    top: -3px;
                    transform: translateX(-50%);
                    transition: background-color 0.2s;
                    width: 50px;
                    z-index: -1;
                }

                &:hover,
                &.selected {
                    color: $white;
                    cursor: pointer;
                    font-weight: 600;

                    &:after {
                        background-color: $black;
                    }
                }

                &.selected {
                    &:after {
                        background-color: $indigo;
                    }
                }

                &.Vlt-datepicker__month-disabled {
                    color: $grey;
                    cursor: default;
                    pointer-events: none;
                }
            }
        }

        &__footer {
            padding: 0px 25px 20px;
            text-align: right;
        }

        &__clear {
            @extend %Vlt-text-link;
            @extend .reset-button;
            color: $black;
            font-size: 1.2rem;
            line-height: 2.1rem;

            &:hover {
                color: $black;
            }
        }
    }
}