.el-input {
  display: inline-block;
  width: 100%;

  .el-input__suffix {
    margin-right: 16px;
    right: 0 !important;

    .el-input__suffix-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;

      .icon-error-solid-box,
      .icon-x-solid-box {
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 1;
        transform: translateY(-50%);
        pointer-events: none;
      }

      .icon-x-solid-box {
        cursor: pointer;
        opacity: 0;
        z-index: 2;
      }

      .el-input__clear {
        margin-right: 0;
        opacity: 0;
      }
    }
  }
}

.is-error {
  .el-input {
    &:hover {
      .el-input__inner {
        background-color: var(--o-color-danger-secondary);
      }
    }

    .icon-error-solid-box {
      opacity: 1;
    }

    .icon-x-solid-box {
      opacity: 0;
    }

    .el-input__inner {
      background-color: var(--o-color-danger-secondary);
    }
  }

  // 展示校验错误的图标
  .show-err-icon-input {
    .icon-error-solid-box {
      opacity: 1 !important;
    }

    .icon-x-solid-box {
      opacity: 0 !important;
    }
  }
}

// 展示清空图标
.show-clear-icon-input {
  .icon-error-solid-box {
    opacity: 0 !important;
  }

  .icon-x-solid-box {
    opacity: 1 !important;
  }
}

.is-disabled {
  .el-input__suffix {
    display: none;
  }
}
