@import 'mixins/mixins';
// @import "common/var";

@include b(textarea) {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: $--font-size-base;


  @include e(wrap) {
    width: 100%;
  }

  .el-input__wrap{
    &:hover {
      .el-textarea__inner {
        // border:$--border-width-base $--border-style-base $--color-border-5;

        &:not([readonly="readonly"]):not([disabled="disabled"]){
          border:$--border-width-base $--border-style-base $--color-border-5;
        }
      }
    }
    &:focus{
      @include e(inner) {
        outline: none;
        border-color: $--input-focus-border!important;
        background-color: $--input-background-color;
      }
    }
  }

  & .el-input__clear {
    position: absolute;
    color: $--color-text-placeholder;
    font-size: $--input-font-size;
    cursor: pointer;
    // transition: $--color-transition-base;
    top: 4px;
    right: 6px;
    width: 20px;
    height: 20px !important;
    line-height: 20px !important;
    // border-radius: 50%;
    border-radius: $--border-radius-circle;
    &:hover {
      background-color: $--color-secondary;
    }
  }
  .autosize-clear{
    //top: 8px;
    top: 6px;
  }
  @include e(inner) {
    display: block;
    resize: vertical;
    padding: 4px 12px;
    line-height: 21px;
    box-sizing: border-box;
    width: 100%;
    font-size: $--font-size-base;
    color: $--color-text-primary;
    background-color: $--input-background-color;
    background-image: none;
    border: $--input-border;
    font-family: auto;
    // border-radius: $--input-border-radius;
    border-radius: $--border-radius-medium;
    // transition: $--border-transition-base;
    cursor: unset;
    scrollbar-width: thin;
    //overflow: hidden;
    &::placeholder {
      color: $--color-text-3;
    }

    &:not([readonly="readonly"]):not([disabled="disabled"]):hover {
      border:$--border-width-base $--border-style-base $--color-border-5;
    }

    &:focus {
      outline: none;
      border-color: $--input-focus-border!important;
      background-color: $--input-background-color;
    }
    //&:hover {
    //  overflow: auto!important;
    //}
    // 滚动条
    //&::-webkit-scrollbar {/*滚动条整体样式*//*高宽分别对应横竖滚动条的尺寸*/
    //  width: 10px;
    //  background-color: transparent;
    //}
    //&::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    //    border-radius: 6px;
    //    border: $--border-2 $--border-style-base transparent;
    //    background: rgba($color: var(--color-neutral-9), $alpha: 0.3) content-box;
    //}
    //&:hover::-webkit-scrollbar-track-piece{
    //  background-color: #fff;
    //  border-radius: 6px;
    //}
  }

  & .el-input__count {
    color: $--color-text-3;
    position: absolute;
    font-size: $--font-size-body-1;
    bottom: 0;
    right: 12px;
    line-height: 20px;
    background: $--color-white;
    background-color: #fff;
  }

	@include when(readonly) {
    .el-textarea__inner, .el-input-group__append, .el-input-prepend {
      background-color: $--input-disabled-fill;
      border-color: $--input-disabled-border;
      color: $--input-font-color;

      &::placeholder {
        color: $--input-disabled-placeholder-color;
      }

      button.el-button{
        background-color: $--color-disabled-background;
      }
    }

    .el-input__icon {
      cursor: not-allowed;
      color: $--color-text-3;
    }
  }

  @include when(disabled) {
    .el-textarea__inner {
      background-color: $--input-disabled-fill;
      // border-color: $--input-disabled-border;
       color: $--input-disabled-color;
      cursor: not-allowed;

      &::placeholder {
        color: $--input-disabled-placeholder-color;
      }
    }
    .el-input__count{
      background-color: $--color-fill-2;
      color: $--color-text-4;
    }
    @include e(wrap) {
      &:hover {
        .el-textarea__inner {
          background-color: $--input-disabled-fill;
          // border-color: $--input-disabled-border;
          // color: $--input-disabled-color;
          cursor: not-allowed;

          &::placeholder {
            color: $--input-disabled-placeholder-color;
          }
        }
      }
    }

  }

  @include when(exceed) {
    .el-textarea__inner {
      border-color: $--color-danger;
    }

    .el-input__count {
      color: $--color-danger;
    }
  }
  &.is-readable {
    & .el-textarea__inner {
      cursor: pointer;
      color: $--color-text-regular;
      &:hover {
        border-color: $--select-disabled-border;
        background: $--color-secondary-disabled-background;
      }
    }
    & .el-textarea__inner::placeholder {
      color: $--color-info3;
    }
    .el-textarea__icon{
      cursor: pointer;
      color: $--color-text-placeholder;
    }
    .el-input__count {
      color: $--color-text-3;
    }
  }
}

@include b(input) {
  position: relative;
  font-size: $--font-size-base;
  display: inline-block;
  width: 100%;
  //@include scroll-bar;

  @include e(wrap) {
    width: 100%;
    // &:hover {
    //   @include e(inner) {
    //     &:not([readonly="readonly"]):not([disabled="disabled"]) {
    //       border-color: $--color-border-5;

    //       .el-input-group__append {
    //         border-color: $--color-text-placeholder;
    //       }
    //     }
    //   }
    // }
    &:focus{
      @include e(inner) {
        .el-input-group__append {
          outline: none;
          border-color: $--input-focus-border;
          background-color: $--input-background-color;
        }
      }
    }
  }

  &.is-focus {
    .el-input__inner {
      z-index: 3;
    }
  }

  .input-border {
    border-color: $--color-text-placeholder !important;
  }

  & .el-input__clear {
    color: $--color-text-placeholder;
    font-size: $--input-font-size;
    cursor: pointer;
    // transition: $--color-transition-base;
    height: 20px; // 禅道bug 10742
    line-height: 20px;
    // +.el-icon-search{
    //   margin-left: 8px;
    // }
    &:hover {
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: $--color-secondary;
      // border-radius: 50%;
      border-radius: $--border-radius-circle;
      //margin-top: 8px;
      cursor: pointer;
    }
  }

  & .el-input__count {
    height: 100%;
    display: inline-flex;
    align-items: center;
    color: $--color-text-placeholder;
    font-size: $--font-size-body-1;

    .el-input__count-inner {
      line-height: initial;
      display: inline-block;
      padding: 0;
    }
  }
  & .el-input__character {
    color: $--color-secondary-active;
  }
  @include e(inner) {
    -webkit-appearance: none;
    background-color: $--input-background-color;
    background-image: none;
    // border-radius: $--input-border-radius;
    border-radius: $--border-radius-medium;
    border: $--input-border;
    box-sizing: border-box;
    color: $--color-text-primary;
    display: inline-block;
    font-size: $--font-size-base;
    height: $--input-height;
    line-height: $--input-line-height;
    outline: none;
    padding: 0 12px;
    // padding: 0 32px 0 12px;
    // transition: $--border-transition-base; // 影响到选择器、级联选择器多选时hover
    width: 100%;
    // min-width: 224px;

    &::-ms-reveal {
      display: none;
    }
    &::placeholder {
      color: $--color-text-3;
    }
    &:not([readonly="readonly"]):not([disabled="disabled"]):hover {
      border-color: $--color-border-5;

      .el-input-group__append {
        border-color: $--color-text-placeholder;
      }
    }
    &:focus {
      .el-input-group__append {
        outline: none;
        border-color: $--input-focus-border;
        background-color: $--input-background-color;
      }
    }
  }
  @include e(suffix) {
    position: absolute;
    height: $--input-height;
    right: 10px; // icon宽度是20，一般情况font-size是16，距离右侧是12px，所以right是10px
    top: 0;
    text-align: center;
    //display: flex;
    //align-items: center;
    // 影响很多组件后缀颜色，比如date-picker、transfer等
    // color: $--input-icon-color;
    pointer-events: none;
    // &:hover {
    //    &:not(.is-disabled) .el-input__inner {
    //      border: solid 1px red !important;
    //    }
    // }
    z-index: 3; // 保证在输入框组合中能正常显示搜索和清除图标
    button {
      margin-right: -8px;
      // position: absolute;
      // right: -8px;
      // top: 2px;
    }

  }
  @include e(suffix-inner) {
    height: 100%;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    >i {
      // margin-left: 8px; // 所有icon都是20的宽度，本身是16的宽度，间隔是12px，所以ml是8px
    }
    >.el-button--medium {
      padding: 8px;
    }
  }
  @include e(suffix-small) {
    button{
      width: initial !important;
      height: 24px !important;
      padding: 4px !important;
    }
  }
  @include e(suffix-medium) {
    button{
      width: initial !important;
      height: 28px !important;
      padding: 6px !important;
    }
  }

  @include e(prefix) {
    position: absolute;
    height: $--input-height;
    left: 12px;
    top: 0;
    text-align: center;
    color: $--input-icon-color;
  }

  @include e(icon) {
    width: 20px;
    text-align: center;
    line-height: $--input-height;
    font-size: $--input-icon-font-size;
    color: $--color-close-icon;
    &:after {
      content: '';
      height: 100%;
      width: 0;
      display: inline-block;
      vertical-align: middle;
    }
  }

  @include e(text) {
    display: inline-block;
    text-align: center;
    line-height: $--input-height;
    font-size: $--input-text-font-size;
    color: $--color-close-icon;
  }

  @include e(validateIcon) {
    pointer-events: none;
  }

  @include when(active) {
    .el-input__inner, .el-input-group__append, .el-input-prepend {
      outline: none;
      border-color: $--input-focus-border;
    }
  }
  @include when(readonly) {
    .el-input__inner, .el-input-group__append, .el-input-prepend {
      background-color: $--input-disabled-fill;
      border-color: $--input-disabled-border;
      color: $--input-font-color;

      &::placeholder {
        color: $--input-disabled-placeholder-color;
      }

      button.el-button{
        background-color: $--color-disabled-background;
      }
    }

    .el-input__icon {
      cursor: not-allowed;
      color: $--color-text-3;
    }
  }

  @include when(disabled) {
    .el-input__inner, .el-input-group__append, .el-input-prepend {
      background-color: $--input-disabled-fill;
      // border-color: $--input-disabled-border;
       color: $--input-disabled-color;
      cursor: not-allowed;

      &::placeholder {
        color: $--input-disabled-placeholder-color;
      }

      button.el-button{
        background-color: $--color-disabled-background;
      }
    }

    .el-input__icon {
      cursor: not-allowed;
      color: $--color-text-4;
    }

    @include e(wrap) {
      &:hover {
        .el-input__inner, .el-input-group__append, .el-input-prepend {
          background-color: $--input-disabled-fill;
          // border-color: $--input-disabled-border;
          // color: $--input-disabled-color;
          cursor: not-allowed;

          &::placeholder {
            //color: $--input-disabled-placeholder-color;
          }

            button.el-button{
            background-color: $--color-disabled-background;
          }
        }
      }
    }
  }



  @include when(exceed) {
    .el-input__inner {
      border-color: $--color-danger;
    }

    .el-input__suffix {
      .el-input__count {
        color: $--color-danger;
      }
    }
  }

  @include m(suffix) {
    // &:hover{
    //   .el-input__inner {
    //     padding-right: 40px;
    //   }
    // }
    // .el-input__inner {
    //   &:focus{
    //     padding-right: 40px;
    //   }
    // }
    .el-input__inner {
      padding-right: 40px;
      &.input-clear {
        padding-right: 68px;
      }
    }
    &:not(.suffix-input) {
      .el-input__inner {
        padding-right: 12px;
      }
      .input-clear {
        padding-right: 40px;
      }
    }
    .el-textarea__inner {
      padding-right: 32px;
    }
  }

  @include m(prefix) {
    .el-input__inner {
      padding-left: 40px;
    }
  }

  @include m(large) {

    @include e(inner) {
      height: $--input-large-height;
      line-height: $--input-large-height;
    }
    @include e(suffix) {
      height: $--input-large-height;
      line-height: $--input-large-height;
    }
    @include e(prefix) {
      height: $--input-large-height;
      line-height: $--input-large-height;
    }

    .el-input__icon {
     line-height: $--input-large-height;
     height: $--input-large-height;
     font-size: $--font-size-title-1;
      color: $--color-border-5
    }
  }
  @include m(medium) {

    @include e(inner) {
      height: $--input-medium-height;
      line-height: $--input-medium-height;
    }
    @include e(suffix) {
      height: $--input-medium-height;
      line-height: $--input-medium-height;
      .input-icon {
        color: $--color-text-3;
      }
    }
    @include e(prefix) {
      height: $--input-medium-height;
      line-height: $--input-medium-height;
    }

    .el-input__icon {
      height: $--input-medium-height;
      line-height: $--input-medium-height;
    }
  }
  @include m(small) {

    @include e(inner) {
      height: $--input-small-height;
      line-height: $--input-small-height;
      // border-radius: 2px;
      border-radius: $--border-radius-small;
    }
    @include e(suffix) {
      height: $--input-small-height;
      line-height: $--input-small-height;
    }
    @include e(prefix) {
      height: $--input-small-height;
      line-height: $--input-small-height;
    }
    .el-input__icon {
      height: $--input-small-height;
      line-height: $--input-small-height;
    }
  }

  @include e(helper) {
    height: 20px;
    font-size: $--font-size-body-1;
    color: $--color-info-semi;
    line-height: 20px;
    margin-left: 12px;
  }

  &.is-readable {
    & .el-input__inner {
      cursor: pointer;
      color: $--color-text-regular;
      &:hover {
        border-color: $--select-disabled-border;
        background: $--color-secondary-disabled-background;
      }
    }
     & .el-input__inner::placeholder {
      // color: $--color-info3;
      // 只读模式的placeholder颜色也要是黑色
      color: $--color-text-regular;
    }
  }
}

@include b(input-group) {
  line-height: normal;
  display: flex;
  width: 100%;
  border-collapse: separate;
  border-spacing:0;

  > .el-input__inner {
    vertical-align: middle;
  }

  .el-input__wrap--prepend {
    display: flex;
    .el-input-group__prepend {
      .el-select>*:not(.is-focus) .el-input__inner{
        &:hover:not([disabled="disabled"]) {
          border-right-color: $--color-border-5;
        }
      }
      .el-input__wrap{
        line-height: initial;
      }
      .el-input__inner {
        // min-width: initial !important;
        // border-radius: 4px 0 0 4px;
        border-right-color: transparent;
        border-radius: $--border-radius-medium $--border-radius-none $--border-radius-none $--border-radius-medium;
      }
    }
    .el-select:hover{
      >*:not(.is-focus) {
        .el-input__inner{
          &:not([disabled="disabled"]) {
            border-right-color: $--color-border-5;
          }
        }
      }
    }
    .el-input.is-focus > .el-input__wrap > .el-input__inner {
      border-right-color: $--primary-6;
    }


    .el-input-group__prepend + .el-input__inner {
      // border-left-color: transparent;
      // border-radius: 0 4px 4px 0;
      border-radius: $--border-radius-none $--border-radius-medium $--border-radius-medium $--border-radius-none;
      flex: 1;
    }
  }
  .el-input__wrap--append {
    display: flex;
    .el-input-group__append {
      .el-input__inner {
        // min-width: initial !important;
        // border-radius: 0 4px 4px 0;
        border-left-color: transparent!important;
        border-radius: $--border-radius-none $--border-radius-medium $--border-radius-medium $--border-radius-none;
      }
    }
    .el-input__inner {
      // border-right-color: transparent;
      border-radius: $--border-radius-medium $--border-radius-none $--border-radius-none $--border-radius-medium;
      flex: 1;
    }
  }
  &:not([disabled='disabled']).el-input__wrap--append {
    display: flex;
    .el-input-group__append {
      .el-input__inner {
        // min-width: initial !important;
        // border-radius: 0 4px 4px 0;
        border-radius: $--border-radius-none $--border-radius-medium $--border-radius-medium $--border-radius-none;
      }
    }

    .el-input__inner {
      border-right-color: transparent;
      border-radius: $--border-radius-medium $--border-radius-none $--border-radius-none $--border-radius-medium;
      flex: 1;
    }
  }
  &:not([disabled='disabled']).el-input__inner--hover {
    .el-input-group__prepend {
      .el-input__inner {
        border-right-color: transparent;
      }
    }

    .el-input-group__prepend + .el-input__inner {
      border-left-color: $--color-text-placeholder;
    }

    .el-input-group__append {
      .el-input__inner {
        border-left-color: transparent;
      }
    }

    .el-input__inner {
      border-right-color: $--color-text-placeholder;
    }
  }

  @include e((append, prepend)) {
    background-color: $--color-white;
    color: $--color-info;
    vertical-align: middle;
    position: relative;
    border: $--border-base;
    // border-radius: $--input-border-radius;
    border-radius: $--border-radius-medium;
    white-space: nowrap;
    .el-button,
    .el-input {
      font-size: inherit;
    }
  }

  @include e(prepend) {
    height: 100%;
    max-width: 110px;
    border: 0;
    .el-select {
      margin-right: -1px;
    }
    .el-select.input-prepand-focus {
      z-index: 2;
    }
    & + .el-input__inner {
      z-index: 1;
    }
  }

  @include e(append) {
    //position: absolute;
    //right: 2px;
    border: 0;
    //height: calc(100% - 4px);
    display: flex;
    align-items: center;
    button.el-button{
      background-color: $--color-primary;
      color: $--color-white;
      // border-radius: 2px;
      border-radius: $--border-radius-small;
      border: 0;

      &.el-button--large.is-icon {
        padding: 10px 10px;
      }
      &.el-button--medium.is-icon {
        padding: 8px 8px;
      }
      &.el-button--small.is-icon {
        padding: 6px 6px;
      }
      &.el-button--mini.is-icon {
        padding: 4px 4px;
      }

      &:hover,
      &:focus {
        border-color: $--color-primary-hover;
        background-color: $--color-primary-hover;
      }
      &:active {
        color: $--color-white;
        border-color: $--color-primary-active;
        background-color: $--color-primary-active;
      }
    }
  }

  @include m(append) {
    .el-select .el-input.is-focus .el-input__inner {
      border-color: transparent;
    }
  }
}

.el-input.is-focus {
  & > .el-input__wrap > .el-input__inner {
    outline: none;
    border-color: $--input-focus-border;
    background-color: $--input-background-color;
  }
  & > .el-input__wrap:hover > .el-input__inner {
    outline: none;
    border-color: $--input-focus-border;
    background-color: $--input-background-color;
  }
  .el-select {
    .el-input.el-input--suffix.suffix-input {
      .el-input__wrap {
        .el-input__inner{
          // 输入框组合-选择器，输入框聚焦，鼠标悬浮在选择器上，右边框颜色要透明
          border-right-color: transparent;
        }
      }
    }
  }
}

.el-input--show-word {
  .el-input__inner{
    padding-right: 50px!important;
  }
  &:hover{
    .input-clear:not([disabled="disabled"]) {
      padding-right: 78px!important;
    }
  }
  .input-clear{
    &:focus:not([disabled="disabled"]) {
      padding-right: 78px!important;
    }
  }

}
.suffix-input, .all-fix {
  .el-input__inner{
    padding-right: 40px;
  }
  .input-clear{
    padding-right: 68px;
  }
}

/** disalbe default clear on IE */
.el-input__inner::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
// .el-input__suffix-inner {
  // padding-left: 12px;
  // background: #ffff;
// }
.suffix-inner-padding {
  padding: 0;
}