@import '../common/var-nb.scss';
@import '../mixins/utils.scss';
@import '../mixins/mixins.scss';

$--input-mini-height: 30px !default; 
$--input-small-height: 40px !default; 

$--input-default-font-color: $--color-font !default;
$--input-disabled-font-color: $--color-font !default;

$--input-border-color: $--color-border-weight !default; 
$--input-disabled-background-color: $--color-background-lighter !default;
/* input
 ----------------------------*/
@include b(input) {
  width: 100%;
  &.el-input {
    .el-input__inner {
      border-color: $--color-border-weight;
      &:focus {
        border-color: $--color-primary;
      }
    }

    .el-input-group__append, .el-input-group__prepend {
      background-color: $--color-white;
    }

    &.is-active {
      .el-input-group__append, .el-input-group__prepend {
        border-color: $--color-primary;
      }
    }
    .nb-button.el-button {
      background-color: $--color-primary;
      color: $--color-white;
    }
  }
  &.el-input--mini,
  &.el-input--small{
    .nb-button.nb-button-search{
      padding: 0;
      width: 42px;
      height: 30px;
      margin-left: -22px;
      margin-right: -24px;
      border-radius: 0 4px 4px 0;
      position: relative;
      left: -1px;
      top: 1px;
      font-size: 14px;
    }
    .el-input__inner{
      cursor: pointer;
    }
  }
  &.el-input--small{
    .nb-button.nb-button-search{
      height: 40px;
      font-size: 16px;
    }
  }
}

.el-input.is-disabled .el-input__inner {
  background-color: $--input-disabled-background-color;
  color: $--input-disabled-font-color;
}
.el-input__inner {
  border: 1px solid $--input-border-color;
  color: $--input-default-font-color;
}
.el-input--small .el-input__inner {
  height: $--input-small-height;
}
.el-input--mini .el-input__inner {
  height: $--input-mini-height;
}