@charset "UTF-8";

@import (reference) 'mixin';
@import (reference) 'font';
@import (reference) 'color';


input[type="text"]{
    font-family: @default-font;
    font-size: 1.2rem;
}
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="checkbox"],
input[type="radio"],
input[type="date"],
input[type="radio"],
input[type="datetime"],
input[type="search"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea{
    border-color:@color-cc;
    background: @color-f2;
    transition: all .3s ease;
    &:focus{
        border-color: @color-pp; 
    }
}
.required{
    label{
        position: relative;
        &::after{
            content: "\2731";
            font-size: @fs-14;
            color: @color-1f;
            position: absolute;
            top: -2px;
            right: -16px;
        }
    }
}
.error{
    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="datetime"],
    input[type="search"],
    input[type="time"],
    input[type="url"],
    .message-textarea,
    .file-upload{
        border-color:@color-1f !important;
    }
}
.input-form .readonly .input-control{
    background: #ccc;
}
.empty-value{
    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="checkbox"],
    input[type="radio"],
    input[type="date"],
    input[type="radio"],
    input[type="datetime"],
    input[type="search"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    textarea,
    .select2-container--default .select2-selection--single{
        border-color:@color-1f;
        &:focus{
            border-color: @color-pp; 
        }
    }
}

.input-form{
    input[type="submit"]{
        .anviz-btn-variant(@color-ff,@color-e8,@color-e8);
        &:focus{
            outline:none;
            border:none;
        }
    }
    
    .input-fill-x {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin-bottom: 10px;
        position: relative;
    }
    
    .input-fill-x {
        width: 100%;
        &::after{
            content: '';
            position: absolute;
            left: 0; 
            right: 0; 
            bottom: -1px;
            transform: scaleX(0);
            transition: transform .25s;
        }
        &:focus-within{
            &::after{
                transform: scaleX(1);
            }
        }
    }
    .input-control {
        width: 100%;
        margin: 0;
        font-size: 22px;
        line-height: 1.5;
        outline: none;
        background: @color-ff;
        &::-webkit-input-placeholder{
            color: transparent;/* default placeholder color */
        }
        &::-moz-placeholder{
            color: transparent;/* default placeholder color */
        }
        &:-ms-input-placeholder{
            color: transparent;/* default placeholder color */
        }
        &::-ms-input-placeholder{
            color: transparent;/* default placeholder color */
        }
        &::placeholder{
            color: transparent;/* default placeholder color */
        }
        &::-webkit-input-placeholder{
            color: transparent;
            opacity: 0;
        }
        &::placeholder,
        &::-webkit-input-placeholder,
        &::-moz-placeholder,
        &::-moz-placeholder,
        &::-ms-input-placeholder{
            color: transparent;
            opacity: 0;
        }
        
        &:placeholder-shown{
            &::-webkit-input-placeholder{
                color: transparent;/* default placeholder color */
            }
            &::-moz-placeholder{
                color: transparent;/* default placeholder color */
            }
            &:-ms-input-placeholder{
                color: transparent;/* default placeholder color */
            }
            &::-ms-input-placeholder{
                color: transparent;/* default placeholder color */
            }
            &::placeholder{
                color: transparent;/* default placeholder color */
            }
            transform: translate(-2px, -4px);
        }
    }
    @input-padding: 6px;
    .input-fill {
        padding: @input-padding+14 @input-padding+10 @input-padding;
        border: 1px solid transparent;
        background: @color-f5;
    }
    .input-outline {
        padding: @input-padding+7 @input-padding+10 @input-padding+7;
        border: 1px solid @color-d0;
        border-radius: 4px;
        transition: border-color .25s;
        &:focus{
            border-color: @color-e8;
        }
    }
    .input-label {
        position: absolute;
        font-size: @fs-16;
        line-height: 1.5;
        left: @fs-16; 
        top: @fs-14;
        color: @color-wuwu;    
        padding: 0 2px;
        font-weight: @fw-300;
        transform-origin: 0 0;
        pointer-events: none;
        transition: all .25s;
    }
    .required{
        .input-label{
            &:after{
                content: "\273D";
                font-size: @fs-12;
                color: @color-1f;
                position: absolute;
                top: 0;
            }
        }
    }
    /* label position */
    .input-control:not(:placeholder-shown) ~ .input-label,
    .input-control:focus ~ .input-label {
        color: @color-wuwu;
        transform: scale(0.75) translate(-2px, -16px);
    }
    .radio-label{
        position: relative;
        &:after{
            content: "\273D";
            font-size: @fs-12;
            color: @color-1f;
            position: absolute;
            top: 0;
        }
    }
}
.input-fill-x{
    .radio input[type="radio"]{
        opacity: 0;
    }
    .radio input[type="radio"]+.radio-label:before{
        content: '';
        background: #f4f4f4;
        border-radius: 100%;
        border: 1px solid #b4b4b4;
        display: inline-block;
        width: 2em;
        height: 2em;
        position: relative;
        top: 0;
        margin-right: 1em;
        vertical-align: top;
        cursor: pointer;
        text-align: center;
        transition: all 250ms ease;
    }
    .radio input[type="radio"]:checked+.radio-label:before{
        background-color: #3197ee !important;
        box-shadow: inset 0 0 0 4px #f4f4f4 !important;
    }
}




// 静态页面中form表单的特殊样式
#getFreeCode{
    #inquiryForm .input-label{
        color:#999;
    }
    #inquiryForm.input-form .input-control:not(:placeholder-shown)~.input-label, #inquiryForm.input-form .input-control:focus~.input-label{
        color: #555;
        transform: scale(.75) translate(-2px, -16px);
    }
    .anviz-btn, .anviz-primary-btn, .is-plain-primary, input[type="submit"]{
        display:block;
        margin: 0 auto;
    }
    button.anviz-btn{
        padding: 15px 80px
    }
    .input-form .select-fill-x.error .select2-selection--single{
        border: 1px solid @color-1f !important;
    }
    .input-form .input-label, .required label, .required .words-num {
        color: #999;
    }
}

// 黑色版本
#getFreeCode.static-form-black{
    textarea.form-control{
        background: #1f1e1e;
        color: #aaa;
    }
    .input-form .input-control,
    .select2-container--default .select2-selection--single{
        background: #1f1e1e;
        color:#aaa;
    }
    .input-form .input-outline,
    .select-fill-x .select2-container .select2-selection--single,
    textarea.form-control{
        border:1px solid #4d4d4e;
        padding: 12.5px 16px 12.5px;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected]{
        background-color:#4d4d4e;
        color:#aaa;
    }
    .select-fill-x .select2-container .select2-selection--single .select2-selection__rendered,
    .select-fill-x select {
        line-height: 30px;
        font-size: 18px;
        padding: 0;
        color:#aaa;
    }
}

// 白色版本
#getFreeCode.static-form-white{
    textarea.form-control{
        background: #ddd;
    }
    .input-form .input-control,
    .select2-container--default .select2-selection--single{
        background: #ddd;
        color:#555;
        font-weight: 400;
    }
    .input-form .input-outline,
    .select-fill-x .select2-container .select2-selection--single,
    textarea.form-control{
        border:1px solid #ddd;
        padding: 12.5px 16px 12.5px;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected]{
        background-color:#3c8dbc;
        color:#fff;
    }
}


// partner
.input-form .input-outline{
    padding: 12.5px 16px 12.5px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder{
    font-size: 18px;
}

.select-fill-x .select2-container .select2-selection--single .select2-selection__rendered, .select-fill-x select{
    font-size: 18px !important; 
}