$input-prefix: #{$prefix}-input;
@mixin placeholder($color: $input-placeholder-color) {
  &::-moz-placeholder {
    color: $color;
    opacity: 1;
  }
  &:-ms-input-placeholder {
    color: $color;
  }
  &::-webkit-input-placeholder {
    color: $color;
  }
}

@mixin input-hover-style($border-color, $shadow-color) {
  border-color: $border-color;
  box-shadow: 0 0 0 2px $shadow-color;
}

@mixin input-hover($border-color, $shadow-color) {
  &:hover {
    @include input-hover-style($border-color, $shadow-color);
  }
}

@mixin input-focus($border-color, $shadow-color) {
  &.#{$input-prefix}-focused {
    border-color: $border-color;
    box-shadow: 0 0 0 2px $shadow-color;
  }
}

@mixin fake-input {
  transition: border $animation-duration-base ease-out;
}

@mixin input-base {
  display: inline-block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  outline: 0;
  color: currentColor;
  // line-height: $global-line-height;
}

@mixin input-disabled {
  background-color: $component-disabled-bg;
  color: $component-disabled-color;
  opacity: 1;
  cursor: not-allowed;
  &:hover,
  &:focus,
  &:active {
    border-color: $component-disabled-border;
    box-shadow: none;
  }
}

@mixin ne-input {
  .#{$input-prefix} {
    @include input-base;
    &::-ms-clear {
      display: none;
    }
    &.disabled,
    &[disabled] {
      @include input-disabled;
    }
    &-status-icon {
      margin-left: $icon-gutter;
    }
  }

  .#{$input-prefix}-container {
    @include input-hover(rgba($primary-color, 0.8), rgba($primary-color, 0.2));
    @include input-focus($primary-color, rgba($primary-color, 0.2));
    display: inline-flex;
    position: relative;
    border: $global-border-width solid $global-border-color;
    border-radius: $global-radius;
    background-color: $white;
    transition: border $animation-duration-base ease-out;

    .#{$input-prefix} {
      @include fake-input;
    }

    textarea.#{$input-prefix} {
      vertical-align: bottom;
      resize: vertical;
    }

    &:hover {
      & .#{$input-prefix}-delete.#{$input-prefix}-delete-show {
        visibility: visible;
      }
    }
    &.#{$input-prefix}-error {
      border-color: $error-color;
      box-shadow: 0 0 0 1px rgba($error-color, 0.1);
    }
    &.#{$input-prefix}-fullWidth {
      width: 100%;
    }
    &.#{$input-prefix}-disabled {
      @include input-disabled;
    }
  }
  .#{$input-prefix}-delete {
    display: inline-flex;
    margin-left: $icon-gutter;
    color: $icon-color;
    visibility: hidden;
    cursor: pointer;
  }
  .#{$input-prefix}-prefix {
    margin-right: $icon-gutter;
  }
  .#{$input-prefix}-suffix {
    margin-left: $icon-gutter;
  }
  .#{$input-prefix}-prefix,
  .#{$input-prefix}-suffix {
    display: inline-flex;
    color: $icon-color;
  }

  .#{$prefix}-input-mask {
    display: inline-flex;
    overflow: hidden;
    width: 100%;
    outline: none;
    &-input {
      width: 0;
      min-width: 0;
      margin: 0;
      padding: 0;
      border: none;
      opacity: 0;
      user-select: none;
    }
    &-content {
      display: inline-block;
      overflow: hidden;
      flex: 1 1 auto;
      min-width: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      user-select: none;
    }
    &.#{$input-prefix}-mask-placeholder {
      color: $input-placeholder-color;
    }
  }

  @each $name, $value in $sizes-map {
    .#{$input-prefix}-#{$name} {
      height: $value;
      padding: ($value - $global-line-height) / 2 - $global-border-width $input-container-padding;
      font-size: map-get($font-sizes-map, $name);
      line-height: ($global-line-height + 0.01px) / map-get($font-sizes-map, $name);
      &.#{$input-prefix}-multiline,
      &.#{$input-prefix}-mask {
        min-width: $value;
        height: auto;
      }
    }
  }
}