@mixin input-base() {
  position: relative;
  width: 100%;
  color: var(--color);
  font-size: var(--font-size);

  input,
  textarea {
    flex: 1;
    position: relative;
    width: 100%;
    padding: 0;
    background-color: transparent;
    background-image: none;
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    font-size: var(--font-size);
    color: var(--color);
    line-height: var(--line-height);

    @include placeholder {
      color: var(--placeholder-color);
    }
  }

  input {
    display: inline-block;
    height: var(--height);
  }

  textarea {
    display: block;
    resize: none;
    word-break: break-all;
    word-wrap: break-word;
    overflow: visible;
  }

  @include e(label) {
    font-size: var(--label-font-size);
    line-height: var(--line-height);
  }

  @include e(content) {
    position: relative;
    height: var(--height);
    line-height: var(--line-height);
  }
}

@mixin input-placeholder() {
  @include placeholder {
    color: var(--placeholder-color);
  }
}

@mixin input-clearable() {
  // 隐藏原生search输入框自带的清空按钮
  input::-webkit-search-cancel-button {
    display: none;
  }

  @include e(clear) {
    position: absolute;
    visibility: hidden;
    color: var(--clear-icon-color);
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-size: var(--clear-icon-size);
  }

  @include m(focus) {
    padding-right: var(--clear-icon-size);

    @include e(clear) {
      visibility: visible;
    }
  }
}

@mixin input-disabled() {
  input,
  textarea {
    cursor: not-allowed;
    color: var(--disabled-color);
    // 用于修复真机上不显示的bug
    -webkit-text-fill-color: var(--disabled-color);
    opacity: 1;

    @include placeholder {
      color: var(--disabled-color);
    }
  }

  @include e(content) {
    cursor: not-allowed;
    color: var(--disabled-color);
  }
}