.#{$input-prefix-cls}-wrapper,
.#{$input-prefix-cls}-textarea-wrapper {
  $root:#{&};
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: middle;
}

// clear-icon
.#{$input-prefix-cls}-close-icon {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 4;
  display: none;
  font-size: $input-font-size;
  color: $input-icon-color;
  cursor: pointer;
  transform: translate(0,-50%) scale(1.3, 1.3);
  .#{$input-prefix-cls}-group--sm &{
    font-size: $input-font-size-sm;
  }
  .#{$input-prefix-cls}-group--lg &{
    font-size: $input-font-size-lg;
  }

  .#{$input-prefix-cls}-wrapper:hover &,
  .#{$input-prefix-cls}-wrapper:hover + &{
    display: block;
  }
}

.#{$input-prefix-cls} {
  display: inline-block;
  width: 100%;
  // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  height: $input-height;
  padding: 0 $input-padding-x;
  font-size: $input-font-size;
  line-height: $input-height -  $border-width * 2;
  color: $input-color;
  background-color: $input-bg;
  // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
  background-image: none;
  background-clip: padding-box;
  border: $input-btn-border-width solid $input-border-color;

  border-radius: $border-radius;

  //@include box-shadow($input-box-shadow);
  @include transition($input-transition);

  // Unstyle the caret on `<select>`s in IE10+.
  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  // Placeholder
  &::-webkit-input-placeholder{
    color: $input-color-placeholder;
    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
    //opacity: 1;
  }
  &::-moz-placeholder{
    color: $input-color-placeholder;
    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
    opacity: 1;
  }

  &:-ms-input-placeholder{
    color: $input-color-placeholder;
    //opacity: 1;
  }

  // Customize the `:focus` state to imitate native WebKit styles.
  @include input-focus();

  // hover
  @include input-hover();

  // Disabled and read-only inputs
  //
  // HTML5 says that controls under a fieldset > legend:first-child won't be
  // disabled if the fieldset is disabled. Due to implementation difficulty, we
  // don't honor that edge case; we style them as disabled anyway.
  // disabled
  @include status-disabled {
    background-color: $input-bg-disabled;
    border-color: $input-border-disabled;
    opacity: 1 !important;
  }
  // textarea 字数
  &__count {
    position: absolute;
    right: $input-padding-x;
    bottom: $input-padding-y;
    color: $gray-light-45;
  }
}

//textarea
textarea.#{$input-prefix-cls}{
  height: auto;
  padding: $input-padding-y $input-padding-x;
  line-height: $line-height-base;
}


// input sizing
//
// Build on `input` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* input` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.

.#{$input-prefix-cls}--sm {
  height: $input-height-sm;
  padding: 0 $input-padding-x-sm;
  font-size: $input-font-size-sm;
  line-height: $input-height-sm - $border-width * 2;

  & + .#{$input-prefix-cls}-close-icon {
    font-size: $input-font-size-sm;
  }
}


.#{$input-prefix-cls}--lg {
  height: $input-height-lg;
  padding: 0 $input-padding-x-lg;
  font-size: $input-font-size-lg;
  line-height: $input-height-lg - $border-width * 2;

  & + .#{$input-prefix-cls}-close-icon {
    font-size: $input-font-size-lg;
  }
}