@import url(../var.less);
@import url(../mixins/mixins.less);
@import url(../mixins/_input.less);

@input-prefix: ~"@{prefix}input";
@textarea-prefix: ~"@{prefix}textarea";

// input
.@{input-prefix}{
  position: relative;
  font-size: @font-size-base;
  display: inline-block;
  width: 100%;
  .scroll-bar();
  .input-size(@input-font-size, @input-height);

  &__clear {
    color: @input-icon-color;
    font-size: @input-font-size;
    cursor: pointer;
    transition: @color-transition-base;

    &:hover {
      color: @input-clear-hover-color;
    }
  }

  &__count {
    height: 100%;
    display: inline-flex;
    align-items: center;
    color: @info-color;
    font-size: @font-size-auxiliary;

    &-inner {
      background: @color-white;
      line-height: initial;
      display: inline-block;
      padding: 0 5px;
    }
  }

  &__inner {
    -webkit-appearance: none;
    background-color: @input-background-color;
    background-image: none;
    border-radius: @input-radius;
    border: @input-border;
    box-sizing: border-box;
    color: @input-font-color;
    display: inline-block;
    outline: none;
    padding: 0 16px;
    transition: @border-transition-base;
    width: 100%;
    height: @input-height;
    line-height: @input-height;

    &::-ms-reveal {
      display: none;
    }

    &::placeholder {
      color: @input-placeholder-color;
    }

    &:hover {
      border-color: @input-hover-border;
    }

    &:focus {
      outline: none;
      border-color: @input-focus-border;
    }
  }

  &__suffix {
    position: absolute;
    height: 100%;
    right: 5px;
    top: 0;
    text-align: center;
    color: @input-icon-color;
    transition: all .3s;
    pointer-events: none;
  }

  &__suffix-inner {
    pointer-events: all;
  }

  &__prefix {
    position: absolute;
    height: 100%;
    left: 5px;
    top: 0;
    text-align: center;
    color: @input-icon-color;
    transition: all .3s;
  }

  &__icon {
    height: 100%;
    width: 25px;
    text-align: center;
    transition: all .3s;
    line-height: @input-height;

    &:after {
      content: '';
      height: 100%;
      width: 0;
      display: inline-block;
      vertical-align: middle;
    }
  }

  &__validateIcon {
    pointer-events: none;
  }
  
  &.is-active {
    .@{input-prefix}__inner {
      outline: none;
      border-color: @input-focus-border;
    }
  }

  &.is-disabled {
    .@{input-prefix}__inner {
      background-color: @input-disabled-fill;
      border-color: @input-disabled-border;
      color: @input-disabled-color;
      cursor: not-allowed;
      &::placeholder {
        color: @input-disabled-placeholder-color;
      }
    }

    .@{input-prefix}__icon {
      cursor: not-allowed;
    }

    .@{input-prefix}-group__button> .w-button {
      &,
      &:hover,
      &:focus,
      &:active {
        cursor: not-allowed;
        background-image: none;
        color: @input-disabled-color;
        background-color: @input-disabled-fill;
        border-color: @input-disabled-color;
      }
    }

    .@{input-prefix}-group__expand {
      > .w-button {
        &,
        &:hover,
        &:focus,
        &:active {
          cursor: not-allowed;
          background-image: none;
          color: @input-disabled-color;
          background-color: @input-disabled-fill;
          border-color: @input-disabled-border;
        }
      }
      > .w-input__icon {
        cursor: not-allowed;
        color: @input-disabled-color;
      }
      
    }
  }
  &.is-round {
    .@{input-prefix}__inner {
      border-radius: @input-round-radius;
    }
  }

  &.is-exceed {
    .@{input-prefix}__inner {
      border-color: @danger-color;
    }

    .@{input-prefix}__suffix {
      .@{input-prefix}__count {
        color: @danger-color;
      }
    }
  }

  &.no-border {
    .@{input-prefix}__inner {
      border: transparent;
    }
  }

  &--suffix {
    .@{input-prefix}__inner {
      padding-right: 30px;
    }
  }

  &--prefix {
    .@{input-prefix}__inner {
      padding-left: 30px;
    }
  }

  &.@{input-prefix}--medium {
    .input-size(@input-medium-font-size,@input-medium-height);
  }

  &.@{input-prefix}--small {
    .input-size(@input-small-font-size,@input-small-height);
  }
}

// input-group
.@{input-prefix}-group {
  line-height: normal;
  display: inline-table;
  width: 100%;
  border-collapse: separate;
  border-spacing:0;

  > .@{input-prefix}__inner {
    vertical-align: middle;
    display: table-cell;
  }

  &__append, &__prepend, &__tail {
    background-color: @background-color-base;
    color: @info-color;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: @border-base;
    border-radius: @input-radius;
    padding: 0 16px;
    width: 1px;
    white-space: nowrap;

    &:focus {
      outline: none;
    }

    .w-select,
    .w-button {
      display: inline-block;
      margin: -10px -20px;
    }

    button.w-button,
    div.w-select .w-input__inner,
    div.w-select:hover .w-input__inner {
      border-color: transparent;
      background-color: transparent;
      color: inherit;
      border-top: 0;
      border-bottom: 0;
    }

    .w-button,
    .w-input {
      font-size: inherit;
    }
  }

  &__button {
    vertical-align: middle;
    display: table-cell;
    position: relative;
    width: 1px;
    white-space: nowrap;
    button.w-button {
      width: max-content;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    button.w-button + button.w-button {
      margin-left: -1px;
    }
  }

  &__expand {
    vertical-align: middle;
    display: table-cell;
    position: relative;
    width: 1px;
    white-space: nowrap;
    position: relative;
    .w-input__icon {
      color: @primary-color;
      cursor: pointer;
    }
    .loop(@i) when (@i < 10) {
      .loop((@i + 1));    // 递归调用自身
      .w-input__icon:nth-child(@{i}) {
        position: absolute;
        left: -@i * 28px;
      };
      .w-input__inner {
        padding: 0 28px * @i;
      }
    }
    .loop(1);
    button.w-button {
      width: max-content;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  &__prepend {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &__append {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  &__tail {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: transparent;
  }

  &--prepend {
    .w-input__inner {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .w-select .w-input.is-focus .w-input__inner {
      border-color: transparent;
    }
  }

  &--append {
    .w-input__inner {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .w-select .w-input.is-focus .w-input__inner {
      border-color: transparent;
    }
  }

  &--tail {
    .w-input__inner {
      border-right-color: transparent;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      &:hover {
        border-right: @border-base;
        border-color: @input-hover-border;
      }
  
      &:focus {
        outline: none;
        border-right: @border-base;
        border-color: @input-focus-border;
      }
    }
    .w-select .w-input.is-focus .w-input__inner {
      border-color: transparent;
    }
  }

  &--button {
    &.is-disabled {
      .w-input__inner{
        border-right-color: transparent;
        &:hover{
          border-color: @input-disabled-border;
          border-right-color: transparent;
        }
      }
    }
    .w-input__inner {
      border-right-color: transparent;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      &:hover {
        border-right: @border-base;
        border-color: @input-hover-border;
      }
  
      &:focus {
        outline: none;
        border-right: @border-base;
        border-color: @input-focus-border;
      }
    }
  }

  &--expand {
    &.is-disabled {
      .w-input__inner{
        border-right-color: transparent;
        &:hover{
          border-color: @input-disabled-border;
          border-right-color: transparent;
        }
      }
    }
    .w-input__inner {
      border-right-color: transparent;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      &:hover {
        border-right: @border-base;
        border-color: @input-hover-border;
      }
  
      &:focus {
        outline: none;
        border-right: @border-base;
        border-color: @input-focus-border;
      }
    }
    .loop(@i) when (@i < 10) {
      .loop((@i + 1));    // 递归调用自身
      .w-input__inner {
        padding-right: 28px *(@i+1) ;
      }
    }
    .loop(1);
  }
}

// textarea
.@{textarea-prefix} {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: @font-size-base;

  &__inner {
    display: block;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    // font-size: inherit;
    color: @input-font-color;
    background-color: @input-background-color;
    background-image: none;
    border: @input-border;
    border-radius: @input-radius;
    transition: @border-transition-base;

    &::placeholder {
      color: @input-placeholder-color;
    }

    &:hover {
      border-color: @input-hover-border;
    }

    &:focus {
      outline: none;
      border-color: @input-focus-border;
    }
  }

  & .@{input-prefix}__count {
    height: auto;
    color: @info-color;
    background: @color-white;
    position: absolute;
    font-size: @font-size-auxiliary;
    bottom: 5px;
    right: 10px;
  }

  &.is-disabled {
    .w-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;
      }
    }
  }

  &.is-exceed {
    .w-textarea__inner {
      border-color: @danger-color;
    }

    .w-input__count {
      color: @danger-color;
    }
  }
}


/** disalbe default clear on IE */
.w-input__inner::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}