@import "../../../assets/sass/core/vars.scss";
@import "../../../assets/sass/global.scss";

.date-rangepicker-modal-component_wrapper{
//-------------------------------------------------- INPUT --------------------------------------------------
    .date-rangepicker-modal_input-wrapper {
        width: 100%;
        //border: 1px solid $color-border;
        border-radius: 3px;
        color: $text-color-black;
        background-color: white;
        display: flex;
        align-items: center;
        position: relative;
        
        .date-rangepicker-modal_input {
            font-size: 13px;
            //min-width: 90px;
            width: 100%;
            height: 36px;
            border: 1px solid #c3c3c3;
            border-radius: 3px;
            color: $text-color-black;
            padding-left: 9px;

            cursor: pointer;

            &:focus {
                outline: 0 none;
                border: 1px solid $color-outline;
                box-shadow: 0px 0px 4px $color-outline;
            } 

        }
        
        .date-rangepicker-modal_icon {
            position: absolute;
            right: 8px;
            top: 8px;
            color:black;
            cursor: pointer;
        }
    }
}

.modal-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: fit-content;
    max-height: fit-content; 
    background-color: white;
    padding: 10px;
    border-radius: 7px;
    border: 2px solid #DEDEDE;

    &:focus-visible {
        outline: unset;
    }

    .top-date-selector-no-time{
        width: 330px !important;
    }

    .top-date-selector {
        width: 400px; 
        height: 62px; 
        background-color: #DEDEDE ;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 5px;

        .material-icons:hover {
            color: darkgray !important;
        }

        .reset-data_icon {
            padding-right: 10px; 
            font-size: 18px;
            color: lightgray;
        }

        .date-selector {
            width: 50%; 
            height: 58px; 
            border-radius: 5px;
            margin: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .selector-option {
            display: flex; 
            flex-direction: column; 
            padding-left: 10px;
            font-size: 14px;

            .option-title{
                font-weight: 400;
                padding-bottom: 5px;
            }

            .selected-option-title {
                font-weight: 600;
                padding-bottom: 5px;
            }

            .option-date {
                color: black;
                font-weight: 400;
            }

            .selected-option-date {
                color: #0277BD;
                font-weight: 600;
            }
        }

        .selected-option {
            background-color: white;
            -webkit-transition: background-color 400ms linear;
            -ms-transition: background-color 400ms linear;
            transition: background-color 400ms linear;
        }
    }

    .two-months-modifier{
        min-width: 606px !important; 
        min-height: 365px !important;

        .react-datepicker__month-container {
            margin: 0px 7px !important;
        }

        .react-datepicker__navigation--previous {
            left: 0px !important;
        }

        .react-datepicker__current-month {
            padding-left: 0px !important;
            text-align: center !important;

        }
    }

    .two-months-buttom-modifier{
        justify-content: space-around !important;
        //padding: 17px 0px 10px 0px !important;
    }

    .mid-date-and-time-selector{
        //width: 505px; 
        min-height: 358px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        .date-rangepicker-wrapper {
            //padding-top: 10px;
            //padding-left: 8px;
            background-color: #fff;
            height: 320px;
        
            > div:nth-child(1) {
                display: flex;
                justify-content: center;
            }
        
            .react-datepicker {
        
                background-color: #fff;
                border: none;
                display: inline-block;
        
                .react-datepicker__header {
                    text-align: center;
                    background-color: #fff;
                    border-bottom: none;
                    border-top-left-radius: none;
                }
        
                .react-datepicker__current-month {
                    text-transform: capitalize;
                    padding-left: 10px;
                    text-align: left;
                    color: black; //#0277BD;
                    font-size: 20px;
                }
        
                .react-datepicker__navigation--previous {
                    right: 31px;
                    left: unset;
                }
        
                .react-datepicker__navigation-icon::before {
                    border-color: #0277BD; //#03A9F4;
                    border-width: 2px 2px 0 0;
                }
        
                .react-datepicker__day--outside-month {
                    color: transparent !important;
                    pointer-events: none;
                    //background: unset;
                    visibility: hidden;
        
/*                     &--in-selecting-range,
                    &--in-range {
                        border-radius: 0px;
                        background-color: #B3E5FC;
                        color: #545456;
        
                    }
                    &--disabled {
                        color: #ccc
                    }
        
                    &--selected,
                    &--keyboard-selected {
                        //border-radius: $datepicker__border-radius;
                        background-color: #03A9F4;
                        color: #fff !important;
                    }  */
                }
        
                .react-datepicker__day-names {
                    margin: 15px 0px -20px 0px;
                    text-transform: capitalize;
        
        
                }
                .react-datepicker__day-name {
                    color: black !important;
                    margin: 5px 5px;
                }
        
                .react-datepicker__day {
                    padding: 5px 5px;
                    margin: 5px 0px;
                    font-size: 16px;
                    color: black;
                    background-color: white;
        
                    &--in-selecting-range,
                    &--in-range {
                        border-radius: 0px;
                        background-color: #B3E5FC; // #B3E5FC;
                        color: black;
        
                    }
                    &--disabled {
                        color: #ccc
                    }
        
                    &--selected,
                    &--keyboard-selected {
                        border-radius: 50%;
                        background-color: #0089D7; //#03A9F4;
                        color: #fff !important;
                    }

                    &:hover{
                        border-radius: 50%;
                        background-color: #0089D7;
                        color: #fff;
                    }
                }

                .react-datepicker__day--highlighted {
                    border-radius: 50%;
                    background-color: #0089D7; //#03A9F4;
                    color: white;
                    //font-size: 14px;
                    font-weight: 600;
                }
        
                .react-datepicker__day--range-start {
                    border-radius: 50%;
                    background-color: #0089D7; //#03A9F4;
                    color: white;
                    //font-size: 14px;
                    font-weight: 600;
                    //background: linear-gradient(to right, #03A9F4 , #CBE2FB);
                }
        
                .react-datepicker__day--range-end {
                    border-radius: 50%;
                    background-color: #0089D7;//#03A9F4;
                    color: white;
                    //font-size: 14px;
                    font-weight: 600;
                    //background: linear-gradient(to left, #03A9F4 , #CBE2FB);
                }
            }
        }

        .timepicker-wrapper {
            width: 100%; 
            height: 90px; 
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-left: 15px;
        }
    }

    .bottom-buttons {
        width: 100%; 
        display: flex;
        justify-content: flex-end;
        background-color: white;
        border-top: 1px solid lightgrey;
        margin-top: 36px;
        padding-top: 10px;

        .btn-cancel {
            text-decoration: none;
            color: $color-button-text-cancel;
            border: none;
            background-color: $color-button-cancel;
            border-radius: 3px;
        
            &:hover {
                color: #000;
                background-color: $color-button-focused-cancel;
            }
        }
        
        .btn-blue {
            border-radius: 3px;
            border: none;
            background-color: $color-button-blue;
            color: $color-button-text-blue;
        
            &:hover {
                background-color: $color-button-focused-blue;
            }
        }
    }
}