.efly-input {
  position: relative;
  font-size: $font-default;
  width: 180px;

  > div {
    width: 100%;
  }

  &.efly-input-prefix-icon {
    input {
      padding: 0 $space-mini 0 32px;
    }
  }

  &.efly-input-suffix-icon {
    input {
      padding: 0 32px 0 $space-mini;
    }
  }

  input {
    outline: none;
    width: 100%;
    height: $height-default;
    border: 1px solid $color-border-base;
    padding: 0 $space-mini;
    box-sizing: border-box;
    color: $color-text-primary;

    &:disabled {
      background: $color-disabled;
    }


    &::placeholder {
      color: $color-text-placeholder;
      font-size: $font-default;
    }
  }

  .icon{
    @include box();
    @include flex-center();
    height: 100%;
    padding: 0 $space-mini;
    position: absolute;
    color: $color-text-placeholder;
    top: 0;

    &.prefixIcon {
      left: 0;
    }

    &.suffixIcon{
      right: 0;
      cursor: pointer;
    }
  }
}

.efly-textarea {
  textarea {
    width: 386px;
    height: 110px;
    border: 1px solid $color-border-base;
    outline: none;
    padding: $space-small $space-mini;
    box-sizing: border-box;
    font-size: $font-default;
    resize: none;
    font-family: 微软雅黑;

    &::placeholder {
      color: $color-text-placeholder;
      font-size: $font-default;
    }
  }
}

$input-size: (name: "small", font: $font-small, height: $height-small, padding: 30px),
(name: "mini", font: $font-mini, height: $height-mini, padding: 30px);
@for $i from 1 through length($input-size) {
  $item: nth($input-size, $i);
  $name: map-get($item, name);
  $font: map-get($item, font);
  $height: map-get($item, height);
  $padding: map-get($item, padding);
  .efly-input-#{$name} {
    font-size: $font;

    &.efly-input-prefix-icon {
      input {
        padding: 0 $space-mini 0 $padding;
      }
    }

    &.efly-input-suffix-icon {
      input {
        padding: 0 $padding 0 $space-mini;
      }
    }


    input {
      height: $height;
      font-size: $font;

      &::placeholder {
        font-size: $font;
      }
    }

    .icon {
      font-size: $font;
      padding: 0 $space-mini;
      box-sizing: border-box;
    }
  }

  .efly-textarea-#{$name} {
    textarea {
      font-size: $font;

      &::placeholder {
        font-size: $font;
      }
    }
  }
}