$prefix-input : #{$prefix}input;
.#{$prefix-input}{
    width: $form-dom-width;
    $gap-x : 0.5em;
    display: inline-block;
    position: relative;
    border-radius: $border-radius-button;
    // size对应的样式分类
    @include form-dom-size();
    &>input{
        width: 100%;
        height: 100%;
        border: 1px solid;
        @include get-color-border();
        border-radius: $border-radius-button;
        transition: color $transition-hover-time $bezier,
                    background-color $transition-hover-time $bezier,
                    border $transition-hover-time $bezier,
                    box-shadow $transition-hover-time $bezier;
        &:hover{
            border-color: $color-light-primary;
        }
        @include outline();
        @include disabled();
    }
    &-prefix,&-suffix{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        @include get-color-sub();
    }
    &-prefix{
        left: 0;
        &>*{
            margin-left: $gap-x;
        }
    }
    &-suffix{
        right: 0;
        &>*{
            margin-right: $gap-x;
        }
        &-tool{
            transition: color $transition-hover-time $bezier;
            cursor: pointer;
            &:hover{
                @include get-color-sub-hover()
            }
        }
    }
    @for $i from 0 through 3 {
        $gap : $gap-x + ($i * 1.5);
        @if($i < 2){
            &-prefix-#{$i}{
                padding-left: $gap;
            }
        }
        &-suffix-#{$i}{
            padding-right: $gap;
        }
    }
}