@import "../../Form/style/common.scss";

.base-input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  .eyeIcon {
    position: absolute;
    right: 22px;
    cursor: pointer;
    &:hover {
      fill: #6d6d75;
    }
  }
}
$color: #111222;
.input {
  width: 100%;
  font-size: $font-basic-size;
  color: $font-color-normal;
  border: 1px solid rgba($color: $color, $alpha: 0.13);
  height: 32px;
  line-height: 30px;
  background-color: #fff;
  padding: 0 10px;
  outline: none;
  vertical-align: top;
  border-radius: 2px;
  &:hover {
    border: 1px solid rgba($color: $color, $alpha: 0.85);
  }

  &.background {
    background-color: $input-bg-color;
  }

  &:focus {
    @include focusStyle();
  }

  &::-webkit-input-placeholder {
    color: rgba($color: $color, $alpha: 0.5);
  }
  &:-ms-input-placeholder {
    color: rgba($color: $color, $alpha: 0.5);
  }
  &::-moz-placeholder {
    color: rgba($color: $color, $alpha: 0.5);
    opacity: 1;
  }
  &:-moz-placeholder {
    color: rgba($color: $color, $alpha: 0.5);
    opacity: 1;
  }

  &.mini {
    height: 26px;
    line-height: 24px;
    font-size: 12px;
    padding: 0 5px;
  }

  &.textarea {
    padding-top: 5px;
    min-height: 60px;
    // resize: none;
    overflow: auto;
    line-height: 20px;

    &.error {
      @include errorStyle();
    }
  }

  &:disabled {
    @include disabledStyle();
  }

  &.textarea-wrap {
    position: relative;
    padding-bottom: 25px;
    padding-right: 0;

    &.error {
      outline: 0;
      @include errorStyle();
    }
    &.is-disabled {
      @include disabledStyle();
    }

    .max {
      font-size: 12px;
      line-height: 1;
      i {
        font-style: normal;
        color: $basic-aid-color;
        font-weight: normal;
      }
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: $font-color-base;
    }
    .textarea-content {
      height: 100%;
      width: 100%;
      overflow: auto;

      &:focus {
        outline: none;
      }

      &:empty:before {
        content: attr(placeholder);
        white-space: pre-line;
        color: $font-color-low;
      }
      &:not(:empty):before {
        content: "";
      }
    }
  }
  &.error {
    @include errorStyle();
  }
}

.input-wrapper {
  width: 100%;
  position: relative;

  .search-icon {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 16px;
    height: 16px;
    stroke: rgba(17, 18, 34, 0.7);
  }
  .clear-icon {
    position: absolute;
    right: 10px;
    top: 8px;
    width: 16px;
    height: 16px;
    fill: #a4a4ae;
    cursor: pointer;

    &:hover {
      fill: #6d6d75;
    }
  }

  &.search {
    .input {
      padding-left: 30px;
    }

    &.mini {
      .input {
        padding-left: 24px;
      }
    }
  }

  &.mini {
    font-size: 12px;
    .search-icon {
      left: 5px;
      top: 6px;
      width: 14px;
      height: 14px;
    }
    .clear-icon {
      right: 10px;
      top: 6px;
      width: 14px;
      height: 14px;
    }
  }
}