.@{css-prefix}input {
  position: relative;
  // display: inline-block;
  width: 100%;
  .bui-input {
    .reset-component();
    .input();
    // TODO: not found hoving use
    // &-hoving {
    //   .input-hover();
    // }
  }
  &-group {
    position: relative;
    display: table;
    border-collapse: separate;
    width: 100%;
    .bui-input,
    .bui-input-group-addon,
    .bui-input-group-btn {
      display: table-cell;
    }
    .bui-input-group-addon {
      position: relative;
      padding: @input-padding-md-vertical @input-padding-md-horizontal;
      border: 1px solid;
      border-color: @input-border;
      border-radius: @border-radius-base;
      font-size: @font-size-md;
      line-height: @line-height-md;
      font-weight: @font-weight-regular;
      color: @input-addon-color;
      background-color: @input-addon-bg;
      white-space: nowrap;
      width: 1px;
      &:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 0;
      }
      &:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;
      }
    }
    .bui-input-group-btn {
      width: 1px;
      white-space: nowrap;
      font-size: 0;
      vertical-align: middle;
      &:first-child {
        .@{css-prefix}button{
          margin-right: -1px;
          border-top-right-radius:0;
          border-bottom-right-radius:0;
        }
        .@{css-prefix}select{
          margin-right: -1px;
            .bui-input, .bui-select-wrapper-multiple {
              border-top-right-radius:0;
              border-bottom-right-radius:0;
            }
        }
      }
      &:last-child {
        .@{css-prefix}button {
          margin-left: -1px;
          border-top-left-radius:0;
          border-bottom-left-radius:0;
        }
        .@{css-prefix}select{
          margin-left: -1px;
            .bui-input, .bui-select-wrapper-multiple {
              border-top-left-radius:0;
              border-bottom-left-radius:0;
            }
        }
      }
    }
  }
  &-xs {
    line-height: @line-height-sm;
    font-size: @font-size-sm;
    .bui-input,
    .bui-input-group-addon {
      .input-xs();
    }
    .bui-input-prefix {
      font-size: @font-size-sm;
    }
  }
  &-sm,
  &-small {
    .bui-input,
    .bui-input-group-addon {
      .input-sm();
    }
    .bui-input-prefix {
      font-size: @font-size-sm;
    }
  }
  &-lg,
  &-large {
    .bui-input,
    .bui-input-group-addon {
      .input-lg();
    }
    .bui-input-prefix {
      font-size: @font-size-lg;
    }
  }
  &-xl {
    .bui-input,
    .bui-input-group-addon {
      .input-xl();
    }
    .bui-input-prefix {
      font-size: @font-size-xl;
    }
  }
  &-suffix{
    .bui-input {
      padding-right: @input-suffix-padding-right;
    }
  }
  &-prepend {
    .bui-input {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  &-append {
    .bui-input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .bui-input-fix-icon {
    position: absolute;
    top: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    z-index: @input-clear-zindex;  // input的hover、active、focus状态的z-index为2
  }
  &-error {
    .bui-input {
      .input-danger();
      &:hover:not([disabled]) {
        .input-danger-hover();
      }
      &:focus:not([disabled]),
      &:active:not([disabled]),
      &.active {
        .input-danger-active();
      }
      &-filled {
        .input-danger(@input-filled-error-bg, @input-filled-error-border);
        &:hover:not([disabled]) {
          .input-danger-hover(@input-filled-error-hover-bg, @input-filled-error-hover-border);
        }
        &:focus:not([disabled]),
        &:active:not([disabled]),
        &.active {
          .input-danger-active(@input-filled-error-bg);
        }
      }
    }
  }

  .bui-input-prefix {
    left: 12px;
    .@{css-prefix}icon {
      fill: @text-color-4;
    }
  }
  .bui-input-suffix {
    right: 12px;
    .@{css-prefix}icon {
      fill: @input-suffix-color;
    }
    .bui-input-clear-icon {
      fill: @input-clear-color;
    }
  }
}

.@{css-prefix}input-rtl {
  direction: rtl;
  .bui-input {
    border-radius: @border-radius-base;
    padding-left: 12px;
    padding-right: 12px;
  }

  &.@{css-prefix}input-prepend {
    .bui-input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;

    }
  }
  &.@{css-prefix}input-append {
    .bui-input {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;

    }
  }
  .bui-input-prefix {
    left: auto;
    right: 12px;
  }
  .bui-input-suffix {
    left: 12px;
    right: auto;
  }
  &.@{css-prefix}input-group {
    .bui-input-group-addon {
      &:first-child {
        border-radius: 0 @border-radius-base @border-radius-base 0;
        border-left: 0;
        border-right: 1px solid @border-color-base;
      }
      &:last-child {
        border-radius:  @border-radius-base 0   0 @border-radius-base;
        border-right: 0;
        border-left: 1px solid @border-color-base;
      }
    }
    .bui-input-group-btn {

      &:first-child {
        .@{css-prefix}button{
          margin-right: 0;
          margin-left: -1px;
          border-radius:0 @border-radius-base @border-radius-base 0;
        }
        .@{css-prefix}select{
          margin-right: 0;
          margin-left: -1px;

          .bui-input, .bui-select-wrapper-multiple {
            border-radius: 0 @border-radius-base @border-radius-base 0;
          }
        }
      }
      &:last-child {
        .@{css-prefix}button {
          margin-right: -1px;
          margin-left: 0;
          border-radius: @border-radius-base 0 0 @border-radius-base;
        }
        .@{css-prefix}select{
          margin-right: -1px;
          margin-left: 0;
          .bui-input, .bui-select-wrapper-multiple {
            border-radius: @border-radius-base 0 0 @border-radius-base;
          }
        }
      }
    }
  }
}