@charset 'utf-8';
@import "./var";
@import '../../mixins/form';
/**
 * 1.input
 * 2.textarea
 * 3.select
 * 4.宽度
 * 5.组合使用：前缀、后缀
 */


/**
 * 1.input
 */

.#{$prefix}input,
.#{$prefix}textarea,
.#{$prefix}textarea-group {
    @include form-control-base($input-font-size,$input-color-bg,$input-color-border,$input-color-text,$input-border-radius);
    @include form-control-placeholder();
    @include form-control-hover($input-color-border-hover);
    @include form-control-focus($input-color-border-focus);
    @include form-control-disabled();
    @include form-control-readonly();
    @include form-control-invalid();

    padding: 0 $input-padding 0 $input-padding;
    &::-ms-reveal{
        display: none;
    }
}

.#{$prefix}input {
    vertical-align: middle;
    width: $input-width-default;
}

.#{$prefix}input::-ms-clear {
    display: none;
}


/**
 * 2.textarea
 */

.#{$prefix}textarea {
    padding-top: 5px;
    padding-bottom: 5px;
    resize: none;
    width: $input-width-default;
    height: 100px;
}
.#{$prefix}textarea--resize {
    resize: auto;
    max-width:100%;
    max-height:100%;
}

.#{$prefix}textarea-group {
    padding:0px;
    display: inline-block;
    font-size:0;
    position: relative;
    padding-bottom:20px;
    height:auto;

    .#{$prefix}textarea{
        border:none;
    }
    .#{$prefix}textarea__label{
        font-size: $input-font-size;
        position: absolute;
        bottom:1px;
        right:11px;
        color:$input-color-text-label;
    }
    &:focus-within{
        border-color: $input-color-border-focus;
        outline: 0;
    }
}
.is-error .#{$prefix}textarea-group {
    &:focus-within{
        border-color:$color-error;
    }
}


/**
 * 3.select
 */

.#{$prefix}select {
    @include form-control-base($select-font-size,$input-color-bg,$select-color-border,$select-color-text,$select-border-radius);
    @include form-control-invalid();
    background: url(../../assets/image/slice/svg/select-arrow.svg?fill=#{$icon-color-default}) right center no-repeat $select-color-bg;
    color: $select-color-text;
    cursor: pointer;
    line-height: $form-height;
    padding: 0 24px 0 $select-padding-left;
    width: $select-width-default;
    border-radius: $select-border-radius;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
}
.#{$prefix}select::-ms-expand{
    display: none;
}    

.#{$prefix}select[disabled],
.#{$prefix}select[disabled]:hover,
.#{$prefix}select[disabled]:focus {
    cursor: not-allowed;
    border-color: $select-color-border-disabled;
    background-color: $select-color-bg-disabled;
    color: $select-color-text-disabled;
    
}

.#{$prefix}select:hover,
.#{$prefix}select:focus {
    outline: 0 none;
    color: $select-color-text-hover;
    background-color: $select-color-bg-hover;
    border-color: $select-color-border-hover;
}
.#{$prefix}select-refresh{
    font-size: 0;
    display: inline-block;

    &.is-block{
        display: block;
    }
    .#{$prefix}dropdown.size-full-width,
    .#{$prefix}select.size-full-width,
    .size-full-width{
        width:calc(100% - 32px)
    }
    .#{$prefix}btn--icon{
        margin-left: $select-refresh-icon-margin-left;
        border: $select-refresh-icon-border;
        padding: $select-refresh-icon-padding;

        &.is-loading{
            border-color: $select-color-border;
            background-color: transparent;
            min-width: 0;
            padding: $select-refresh-loading-btn-padding;
            cursor: not-allowed;

            .#{$prefix}icon{
                opacity: 0.5;
                -webkit-animation:spin 1s infinite linear ;
            }
            
        }
    }
    &--borderless{
        .#{$prefix}btn--icon{
            border-color: transparent;

            &.is-loading{
                border-color:transparent ;
            }
        }
    }
}

// search 
.#{$prefix}input--search.size-m,
.#{$prefix}input--search {
  overflow-x: hidden;
  overflow-y: hidden;
  //white-space: pre-wrap;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  vertical-align: top; 
  background-color: $search-color-bg;
  border-radius:$search-border-radius ;
  padding: 0 $search-padding-left;
  padding-right: 60px;
  outline: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  line-height: $form-height;
  -webkit-appearance: none;
  // &:focus {
  //   padding-right: 60px;
  // }
}


/**
 * 密码输入框 尺寸设置 内外两层都会加上
 */
 .#{$prefix}input-password{
     display: inline-block;
     font-size: 0;
    position: relative;

    .#{$prefix}input{
        padding-right: 56px;
    }

    &__op{
        position: absolute;
        right: 4px;
        top:2px;
        .#{$prefix}btn:hover{
            background-color: transparent;
        }
    }
    &.size-full-width{
        width: 100%;
    }
 }
 .#{$prefix}input-password-bubble{
    .#{$prefix}icon{
        margin-right: 4px;
        vertical-align: -4px;
    }
     .#{$prefix}list li > .#{$prefix}list{
         padding-left: 24px;
     }
     .#{$prefix}list--bullet > li.is-success::before{
         background-color: $color-success;
        
     }
 }

/**
 * 宽度
 */

.#{$prefix}input.size-l,
.#{$prefix}textarea.size-l{
    width:$input-width-l
}
.#{$prefix}select.size-l {
    width:$input-width-l
}

.#{$prefix}input.size-m,
.#{$prefix}textarea.size-m{
    width:$input-width-default
}
.#{$prefix}select.size-m {
    width: $select-width-default
}
.#{$prefix}input.size-s,
.#{$prefix}textarea.size-s{
    width: $input-width-s;
    min-width: 0;
}
.#{$prefix}select.size-s {
    width: $select-width-s;
    min-width: 0;
}
.#{$prefix}select.size-xs{
    width: $select-width-xs;
}
.#{$prefix}input.size-xs,
.#{$prefix}textarea.size-xs{
    width: $input-width-xs;
}

.#{$prefix}select.size-auto-width {
    width: auto;
}

.#{$prefix}input.size-full-width,
.#{$prefix}textarea.size-full-width,
.#{$prefix}select.size-full-width {
    width: 100%;
}


/**
 * 5.组合使用：前缀、后缀
 */

.#{$prefix}input-group {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
}

.#{$prefix}input-group__text {
    @include form-control-base($input-font-size,$input-color-bg,$input-color-border,$input-color-text,$input-border-radius);

    padding: 0 $input-padding 0 $input-padding;
    background-color: $input-color-bg-disabled;
    line-height: $form-height;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    border-radius: $input-border-radius;
}

.#{$prefix}input-group__addon {
    margin-right: -1px;
    display: inline-block;
    vertical-align: middle;

    .#{$prefix}dropdown__header{
        border: 1px solid $input-color-border;
        border-radius: $input-border-radius;
        padding-left: 10px;
        background-color: $input-color-bg;

        .#{$prefix}dropdown__value{
            line-height: $form-height - 2px;
        }
    }
}

.#{$prefix}input-group__addon:last-child {
    margin-right: 0;
    margin-left: -1px;

    & .#{$prefix}select,
    & .#{$prefix}dropdown .#{$prefix}dropdown-btn,
    & .#{$prefix}input-group__text{
        border-radius: 0 $input-border-radius $input-border-radius 0;
    }
}
.#{$prefix}input-group__addon:first-child {

    & .#{$prefix}select,
    & .#{$prefix}dropdown .#{$prefix}dropdown-btn,
    & .#{$prefix}input-group__text {
        border-radius: $input-border-radius 0 0 $input-border-radius;
    }
}

.#{$prefix}input-group .#{$prefix}input,
.#{$prefix}input-group__addon {
    position: relative;
}

.#{$prefix}input-group__addon .#{$prefix}select {
    // background-color: var(--bg-gray-color);
}

.#{$prefix}input-group>.#{$prefix}select:nth-child(2),
.#{$prefix}input-group>.#{$prefix}input:nth-child(2){
    border-radius: 0;
}
.#{$prefix}input-group>.#{$prefix}select:first-child,
.#{$prefix}input-group>.#{$prefix}input:first-child {
    border-radius: $input-border-radius 0 0 $input-border-radius;
}
.#{$prefix}input-group>.#{$prefix}select:last-child,
.#{$prefix}input-group>.#{$prefix}input:last-child {
    border-radius: 0 $input-border-radius $input-border-radius 0;
}

.is-error .#{$prefix}input,
.is-success .#{$prefix}input,
.#{$prefix}input-group .#{$prefix}input:hover,
.#{$prefix}input-group .#{$prefix}input:focus {
    z-index: 1;
    
}