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

//--------------------------------------------------------------------------------------------------------------------
//----------------------------------------------- TimePicker ---------------------------------------------------------
//--------------------------------------------------------------------------------------------------------------------
.gtc-rc-timepicker_area-dropdown {
    width: 100%;
    //border: 1px solid $color-border;
    border-radius: 3px;
    color: #909090;
    background-color: white;
    display: flex;
    align-items: center;
    position: relative;
    
    .gtc-rc-timepicker_input {
        font-size: $input-text-size;
        //min-width: 90px;
        width: 100%;
        height: 36px;
        border: 1px solid $color-border;
        border-radius: 3px;
        color: black;
        padding-left: 9px;

        cursor: pointer;
    /*         &:hover {
            box-shadow: 0px 0px 1px 1px $primary-color-px;
            outline: 0 none;
            border: 1px solid $primary-color-px;
        }; */
        &:focus {
            outline: 0 none;
            border: 1px solid $color-border-focused;
            box-shadow: 0px 0px 4px $color-border-focused;
        } 

    }
    
    .gtc-rc-timepicker_icon {
        position: absolute;
        right: 8px;
        top: 10px;
        cursor: pointer;
    }
}

.gtc-rc-timepicker_menu-dropdown {
    //width: 100%;
    //min-width: 100px;

    .react-datepicker {
        border: 0px none;
    }

    .react-datepicker__time-list-item--selected{
        background-color: $primary-color-px !important;
    }

    .react-datepicker__time-container {
        width: 100%
    }

    .gtc-rc-datepicker_container {
        width: 100%;
        display: flex !important;
        justify-content: space-evenly;
    }

    .gtc-rc-datepicker_container > div:nth-child(1) {
        width: 100%
    }

    .react-datepicker__header {
        display: none;
    }

    .react-datepicker--time-only {
        width: 100%;
    } 

    .react-datepicker__time {
        width: 100%;
    }

    .react-datepicker__time-box{
        width: 100%;
    }

    .react-datepicker__time-list{
        width: 100%;
        text-align: left;
        -ms-overflow-style: none;  // Internet Explorer 10+
        scrollbar-width: none;  // Firefox
    }
    
    .react-datepicker__time-list::-webkit-scrollbar { 
        display: none;  // Safari and Chrome
    }

    .react-datepicker__time-list-item{
        display: flex;
        align-items: center;
        justify-content: center;
        //flex-direction: column
        padding: 5px 5px !important;
        white-space: nowrap;
        font-size: 14px !important;
    }

}

.gtc-rc-timePicker-variant-inputs-wrap {
    display: flex;
    align-items: center;

    .timePicker-inputs-icon{
        padding: 1px 3px 0px 0px;
    }

    .timePicker-inputs-time{
        text-align: center;
        width: 56px;
        height: 30px;
    
        font-size: 13px;
        font-weight: 400;
        font-style: normal;
    
        border: 1px solid #EAEAEA;
        border-radius: 3px;
        color: black;

        &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: #909090;
        }
    
        &:focus {
            outline: 0 none;
            border: 1px solid $color-border-focused;
            box-shadow: 0px 0px 4px $color-border-focused;
        } 
    }

    .timePicker-inputs-label {
        padding: 0px 3px 0px 3px;
        font-weight: 700;
    }
    
    .timePicker-inputs-AmPmSelect{
        margin-left: 6px;
        height: 34px;
    
        font-size: 13px;
        font-weight: 400;
        font-style: normal;
    
        border: 1px solid #EAEAEA;
        border-radius: 3px;
        color: #909090;
    
        &:focus {
            outline: 0 none;
            border: 1px solid $color-border-focused;
            box-shadow: 0px 0px 4px $color-border-focused;
        } 
    }
}

.gtc-rc-timePicker-inputs-disabled {
    background-color: rgba(239, 239, 239, 0.3) !important;
}

.gtc-rc-timePicker-inputs-wrap {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    border: 1px solid hsl(0, 0%, 80%);

    .timePicker-inputs-time{
        background-color: transparent;
        text-align: center;
        width: 35px;
        min-height: 32px;
    
        font-size: 13px;
        font-weight: 400;
        font-style: normal;
    
        //border: 1px solid hsl(0, 0%, 80%);
        border: unset;
        border-radius: 3px;
        color: $text-color-black;

        &:hover {
            border: unset;
        }
    
        &:focus {
            outline: 0 none;
        } 
    }

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    .timePicker-inputs-label {
        padding: 0px 0px 3px 0px;
        font-size: 20px;
        font-weight: 700;
        align-self: center !important;
    }
    
    .timePicker-inputs-AmPmSelect{
        border-radius: 3px;
        color: $text-color-black;
    
        &:focus {
            outline: 0 none;
            border: 1px solid $primary-color-px;
            box-shadow: 0px 0px 4px $primary-color-px;
        } 

        .react-select__single-value{
            font-size: 13px;
            font-weight: 400;
        }
    
        .react-select__control {
            background-color: transparent;
            border: none;
            box-shadow: none;
            &:focus-within{
                box-shadow: none;
            }
        }
        .react-select__menu {
            padding: 1px;
        }
    
        .react-select__option {
            padding: 8px;
        }
    }
}