@import "forms_placeholder";
@import "forms_styles";

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not(.select2-search__field),
textarea, select,
.select2-container.select2-container--default .select2-selection,
.cms-placeholder{
    background-color: $FF_Background;
    border: none;
    color: $FF_Color;
    padding: $FF_Padding;
    line-height: $FF_Height;
    height: $FF_Height;
    font-size: $FF_Font_Size;
    text-align: start;
    outline: none;
    width: 100%;
    @include box-shadow($FF_Border);
    @include border-radius($FF_Border_Radius);
    &:hover,
    &:focus, 
    &:active {
        background-color: $FF_Background_Hover;
        color: $primary_color;
        box-shadow: $FF_Shadow , $FF_Border_Hover;
    }
    [dir="rtl"] &{
        @include border-radius($FF_Border_Radius_rtl);
    }
}
select {
    height: $FF_Height;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/select-arrow.png);
    background-color: $FF_Background;
    background-position: calc(100% - 20px) 50%;
    background-repeat: no-repeat;
    padding-right: 40px;
    [dir="rtl"] &{
        background-position: 10px 50%;
        padding-right: 22px;
        padding-left: 40px;
    }
    option {
        background-color: #fff;
        color: #000;
    }
}
// fix select option color in firefox
.e--ua-firefox select option{
    color: black;
}

textarea {
    padding-top: 22px;
    line-height: normal;
    min-height: 110px;
}
/* input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea, select {
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"]{
    + button, 
    + input[type="button"],
    + input[type="submit"]{
        padding-top: 20px;
        padding-bottom: 20px;
    }
} */
input,
select, 
textarea{
    vertical-align: top;
    position: relative;
    @include transition();
}
fieldset{
    padding: $FF_Padding; 
    border: 2px solid $border-color;
    @include transition();
    overflow: hidden;
    &:hover{
       border-color: $accent-color;
    }
    > legend{
        font-weight: 700;
        font-size: 14px;
        color: var(--heading-font-color);
        display: flex;
        &:before,
        &:after{
            content: '';
            width: 10px;
        }
    }
    select{
        border: 0;
        margin: -8px $FF_Spacing*-1 -3px;
        @include box-shadow(none);
        width: calc(100% + #{$FF_Spacing*2});
        padding: 0 #{$FF_Spacing*2 + 10px} 0 #{$FF_Spacing + 10px};
        background-position: calc(100% - #{$FF_Spacing + 10px}) 50%;
        &:hover,
        &:focus,
        &:active{
           @include box-shadow(none); 
        }
    }
}
// Checkbox + Radio
.cms-custom-checkbox,
.cms-custom-radio{
    position: relative;
    margin-right: 5px;
    width: 17px;
    height: 17px;
    display: inline-block;
    [dir="rtl"] &{
        margin-right: 0;
        margin-left: 5px;
    }
    input[type="checkbox"],
    .cms-checkmark{
        width: 17px;
        height: 17px;
        display: inline-block;
        padding: 0;
        margin: 0;
    }
    input{
        @include opacity(0);
        &:checked + .cms-checkmark:after{
            @include opacity(1);
        }
    }
    .cms-checkmark{
        position: absolute;
        top: 0;
        left: 0;
        border: 2px solid $border-color;
        @include border-radius(4px);
        &:after{
            content: "";
            background-color: $accent-color;
            position: absolute;
            top: 3px;
            left: 3px;
            width: 7px;
            height: 7px;
            @include border-radius(4px);
            @include opacity(0);
        }
    }
    + label{
        display: inline-block;
    }
}
// Radio
.cms-custom-radio{
    input{
        &:checked + .cms-checkmark{
            border-color: $accent-color;
            &:after{
                background-color: $accent-color;
            }
        }
    }
    .cms-checkmark{
        margin-top: 3px;
        @include border-radius(50%);
        &:after{
            background-color: $border-color;
            @include border-radius(50%);
            @include opacity(1);
        }
    }
}
// Checkbox 
.cms-custom-checkbox{
    @include transform(translate(0, 3px));
}

#ui-datepicker-div {
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    @include border-radius(6px);
    @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
    position: absolute;
    top: -9999px;
    min-width: 300px;
    z-index: 10001 !important;
    .ui-datepicker-header {
        position: relative;
        .ui-corner-all {
            display: block;
            height: 30px;
            width: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            position: absolute;
            top: 0;
            padding: 0;
            &:before {
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
            }
            span {
                display: none;
            }
            &.ui-datepicker-prev {
                left: 0;
            }
            &.ui-datepicker-next {
                right: 0;
            }
        }
        .ui-datepicker-title {
            line-height: 30px;
            margin-bottom: 10px;
            min-height: 40px;
            text-align: center;
            text-transform: uppercase;
            span {
                display: inline-block;
                vertical-align: middle;
                line-height: 1;
            }
        }
    }
    .ui-datepicker-calendar {
        margin: 0;
        width: 100%;
        th {
            text-align: center;
        }
        td {
            text-align: center;
            padding: 6px;
            &.ui-state-disabled {
                color: rgba(0, 0, 0, 0.2);
            }
        }
    }
}
// select 2
.select2{
    &.select2-container--default {
        .select2-selection--single {
            .select2-selection__arrow{
                top: 15px !important;
                right: 15px !important;
                [dir="rtl"] &{
                    right: auto!important;
                    left: 15px!important;
                }
            }
            .select2-selection__rendered{
                 line-height: $FF_Height - 2px !important;
            }
        }
        .select2-selection--multiple{
            .select2-selection__rendered{
                padding: 0;
                li{
                    margin: 0;
                }
            }
        }
        // Focus
        &.select2-container--focus{
            .select2-selection--multiple{
                border: none;
            }
        }
    }
}
.woocommerce-widget-layered-nav-dropdown,
.select2{
    + .woocommerce-widget-layered-nav-dropdown__submit{
        margin-top: 20px;
    }
}