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

.input-textarea-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: middle;
}

// clear-icon
.#{$input-prefix-cls}-close-icon {
  position: absolute;
  top: 3px;
  right: 15px;
  z-index: 4;
  display: none;
  font-size: 16px;
  align-items: center;
  cursor: pointer;
  color: $gray-lighter;
  background-color: $white;
  line-height: 24px;
  .#{$input-prefix-cls}-group--sm &{
    font-size: $input-font-size-sm;
    line-height: 18px;
  }
  .#{$input-prefix-cls}-group--lg &{
    font-size: $input-font-size-lg;
  }

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

  &:hover {
    color: $gray;
  }

  i {
    color: inherit;
  }
}

.#{$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;

  &__count {
    position: absolute;
    top: auto;
    right: $input-padding-x;
    bottom: .48rem;
    z-index: 4;
  }

  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
  @if $enable-rounded {
    // Manually use the if/else instead of the mixin to account for iOS override
    border-radius: $border-radius;
  } @else {
    // Otherwise undo the iOS default
    border-radius: 0;
  }

  //@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-color;
  }
}

//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 {
    line-height: 18px;
    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;
  }
}

input::-ms-clear,
input::-ms-reveal{
  display: none;
}