@use '../abstract' as *;

/*----------------------------------------*/
/*  11. AVAILIBILITY CSS START
/*----------------------------------------*/

.availibility{
    &__wrapper{
        padding: 50px 30px;
    }
    &__input{
        position: relative;
        display: inline-block;
        &.width-280{
            width: 280px;
            @media #{$md}{
                width: 49%;
                margin-right: 4px;
            }
            @media #{$sm}{
                width: 48%;
                margin-right: 4px;
            }
            @media #{$xs}{
                width: 100%;
                margin-right: 0;
            }
        }
        &.width-210{
            width: 210px;
            @media #{$md}{
                width: 49%;
                margin-right: 0;
            }
            @media #{$sm}{
                width: 48%;
                margin-right: 4px;
            }
            @media #{$xs}{
                width: 100%;
                margin-right: 0;
            }
        }
        &.width-190{
            width: 190px;
            @media #{$md}{
                width: 49%;
                margin-right: 4px;
            }
            @media #{$sm}{
                width: 48%;
                margin-right: 4px;
            }
            @media #{$xs}{
                width: 100%;
                margin-right: 0;
            }
            & .nice-select{
                padding-left: 15px;
            }
        }
        & input,
        & .nice-select{
            width: 100%;
            height: 50px;
            line-height: 50px;
            border: none;
            border-radius: 0;
            padding-left: 40px;
            color: $black;
            &::after{
                right: 15px;
                top: 50%;
                width: 0; 
                height: 0; 
                border: none;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 4px solid $d-text-3;
                margin-top: 0;
                @include transform(rotate(0deg) translateY(-50%));
            }
            &.open{
                &::after{
                    top: 43%;
                    @include transform(rotate(-180deg));
                }
            }
            & .list{
                width: 100%;
                border-radius: 0;
                margin-top: 0;
            }
        }
        & button{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            font-weight: 700;
            color: $white;
            background: $d-yellow-2;
            &:hover{
                background: $white;
                color: $black;
            }
        }
        & i{
            position: absolute;
            top: 50%;
            left: 15px;
            @include transform(translateY(-50%));
        }
    }
}