@import './theme/index.less';
@import './mixins/config.less';
@import './color/colors.less';
@input-prefix-name: ~'@{namespace}-input';

.@{input-prefix-name} {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    &--lg {
        .el-input__inner{
            height: 48px;
            line-height: 48px;
        }
    }

    &--xl {
        .el-input__inner{
            height: 56px;
            line-height: 56px;
        }
    }
    .el-input__inner{
        color:#000;
        border: 1px solid #D8D8D8;
        padding:0 12px;
    }
    .el-input__inner::placeholder {
        color: @black-2;
        font-family: @font-medium;
        font-style: normal;
        font-size: 14px;
    }
    .el-input__inner:hover {
        outline: none;
        border: 2px solid @black-3;
    }
    .el-input__inner:active,
    .el-input__inner:focus {
        outline: none;
        border: 2px solid @green-0;
    }
    .el-input{
        font-size: 14px;
        width: 528px;
        font-family: @font-medium;
        color: #000000; 
        text-align: left;
        height: 40px;
        line-height: 40px;
    }
    .el-input.is-disabled .el-input__inner{
        background: rgba(216,216,216, 0.32);
        border: 1px solid @black-3;

    }
    .el-input .el-input__count{
        color:@black-0;
        font-size: 14px;
        font-family: @font-medium;
    }
    .onestop-input--suffix .el-input__inner{
        padding-right: 55px;
    }
    .onestop-input--prefix .el-input__inner{
        padding-left: 50px;
    }
    .onestop-input-textarea--count .el-textarea__inner{
        padding-bottom: 22px !important;
    }
    .onestop-input__prefix{
        position: absolute;
        left: 12px;
        top: 3px;
        transition: all .3s;
        z-index: 9999;
    }
    .onestop-input__suffix{
        position: relative;
        right:46px;
        top: 3px;
        z-index: 9999;
        transition: all .3s;
    }
    .onestop-input__suffix_icon{
        right: 30px;
        position: relative;
        top: 3px;
        // z-index: 9999;
        transition: all .3s;
    }
    .onestop-input__prefix_icon{
        top:auto;
        position: absolute;
        left: 22px;
        transition: all .3s;
        z-index: 9999;
    }
    .el-textarea{
        // border: 1px solid @black-3;
        // border-radius: 4px;
    }
    .el-textarea .el-input__count{
        color:@black-0;
        font-size: 14px;
        font-family: @font-medium;
        left: 2px;
        position: relative;
        bottom: 20px;
        width: 97%;
        display: inline-block;
        background: @black-5;
        text-align: right;
    }
    .el-textarea__inner:hover{
        outline: none;
        border: 2px solid @black-3;
    }
    .el-textarea__inner:active,
    .el-textarea__inner:focus{
        outline: none;
        border: 2px solid @green-0;
    }
    .el-textarea__inner{
        // border:none;
        border: 1px solid @black-3;
        padding: 8px 12px !important;
        width: 528px;
        font-family: @font-medium;
        font-size: 14px;
        text-align: left;
        color: #000000; 
    }
    .el-textarea.is-disabled .el-textarea__inner{
        background: rgba(216,216,216, 0.32);
        border: 1px solid @black-3;
    }
    // number类型小箭头隐藏
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
}
// error 
.el-form-item.is-error .el-input__inner{
    border: 2px solid @red-1;
}
.el-form-item.is-error .el-input__validateIcon{
    color: @red-1;
}
.el-form-item__error{
    color: @red-1 !important;
    font-family: @font-medium;
    padding: 0;
}