.input {
  position: relative;
  z-index: $zindex-input;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  background-color: $brand-pure;
}

.dada-input-disabled {
  background-color: $input-disabled-bg;
}

// 输入框的描边
.dada-input-border {
  position: absolute;
  z-index: $zindex-input-border;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: border-color ease-in-out .18s;
  border: $input-border-width solid $input-border-color;
  border-radius: $input-border-radius;
}

// 输入框
.input-field {
  overflow: hidden;
  flex: 1;
  border: none;
  background-color: transparent;

  &:hover + .dada-input-border {
    border-color: $input-border-hover;
  }

  &:focus {
    outline: none;

    & + .dada-input-border {
      border-color: $input-border-focus;
    }
  }

  &:disabled {
    opacity: 1;
    -webkit-text-fill-color: #bfbfbf;

    &,
    & + .dada-input-addon-before,
    & + .dada-input-addon-after,
    & + .input-addon {
      cursor: not-allowed;
      color: $input-disabled-color;
    }

    & + .dada-input-border {
      border-color: $input-border-color;
    }
  }

  // Placeholder
  &::placeholder {
    color: $input-placeholder-color;
  }
}

.dada-input-addon-before {
  margin-right: $input-padding-x;
  color: $gray-light;
}

.dada-input-addon-after,
.input-addon {
  margin-left: $input-padding-x;
  color: $gray-light;
}

// 清除图标
.dada-input-clear {
  cursor: pointer;
  position: absolute;
  right: $input-padding-x;

  &:hover {
    color: $gray-darker;
  }
}

// 单独处理长文本输入框
.dada-input-textarea {
  @include scroll-reset();

  width: $input-width;
  height: rem(72px);
  resize: vertical;
  border: $input-border-width solid $input-border-color;
  border-radius: $input-border-radius;

  &:hover {
    border-color: $input-border-hover;
  }

  &:focus {
    border-color: $input-border-focus;
    outline: none;
  }

  &:disabled {
    resize: none;
    cursor: not-allowed;
    border-color: $input-border-color;
    color: $input-disabled-color;
  }

  // Placeholder
  &::placeholder {
    color: $input-placeholder-color;
  }
}
