@use'../variables' as*;

// start flatpickr
.flatpickr-calendar {
    padding: 1rem !important;
    border-radius: 0.85rem !important;
    box-shadow: 0px 9px 28px $gray-400 !important;
    &::before{
        border-width: 13px !important;
        border-bottom-color:$white !important;
    }
    &::after{
        border-width: 12px !important;
    }
    .flatpickr-months {
        margin-bottom: 0.9rem;
        .flatpickr-prev-month, .flatpickr-next-month {
            top: 0.8rem;
        }
        .flatpickr-next-month {
            right: 1rem !important;
        }
        .flatpickr-prev-month {
            left: 1rem !important;
        }
    }
    .flatpickr-day{
        &.today {
            border-color: $primary !important;
            background-color: $primary;
            color: $white !important;
        }
        &.selected{
            background: $primary !important;
            color: $white !important;
            border-color: $primary !important;
        }
        &.startRange{
            background: $primary !important;
            color: $white !important;
            border-color: $primary !important;
        }
    }
    .flatpickr-day{
        &:hover{
            border-color: $primary;
            background-color: $white !important;
            color: $primary !important;
        }
    }
    
}
// end flatpickr

// start date range picker
.daterangepicker{
    padding: .5rem !important;
    border-radius: 0.85rem !important;
    box-shadow: 0px 9px 28px $gray-400 !important;
    border: unset !important;
    &.opensright:before {
        left: 25px !important;
    }
    &.opensright:after {
        left: 25px !important;
    }
    &.opensleft:before {
        right: 25px !important;
    }
    &.opensleft:after {
        right: 25px !important;
    }
    &::before{
        border-width: 13px !important;
        border-bottom-color:$white !important;
        top: -11px !important;
    }
    &::after{
        border-width: 12px !important;
    }
    .calendar-table th, .calendar-table td {
        width: 35px !important;
        height: 35px !important;
        &.active{
            background-color: $primary !important;
        }
    }
    .drp-calendar {
        &.left{
            padding-bottom: 20px !important;
        }
        &.right{
            padding-bottom: 20px !important;
        }
        .calendar-time{
            margin-top: 15px !important;
            select.hourselect, select.minuteselect, select.secondselect, select.ampmselect {
                width: 65px;
                background: $white;
                padding: 6px 10px;
            }
        }
    }
    .drp-buttons {
        padding: 0.9rem !important;
        border-top: 1px solid $gray-200 !important;
        .btn {
            padding: 6px 18px !important;
            border-radius: 0.3rem !important;
            margin-bottom: 5px;
        }
        .cancelBtn {
            border: 1px solid $gray-200;
        }
    }
    .ranges{
        ul{
            li{
                &.active {
                    background-color: $primary;
                }
            }
        }
    }
}
// end date range picker