@theme:#5aa4ae;
@theme-low: rgba(232,243,244);
@fontSize: 14px;
@fontColor: #666;
@color-success: #67c23a;
@color-info: #909399;
@color-warning: #e6a23c;
@color-danger: #f56c6c;

@input-width: 240px;
@input-height: 35px;

@border: 1px solid #dcdfe6;
@border-radius: 4px;

@box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

.ix-input-base{
  position: relative;
  border: 1px solid #dcdfe6;
  color: @fontColor;
  background: #fff;
  border-radius: @border-radius;
  font-size: @fontSize;
  transition: border-color .3s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  width: @input-width;
  height: @input-height;
  line-height: @input-height;
  &:hover{
    border-color: @theme;
  }
  &.infocus{
    border-color: @theme;
  }
  &.ix-medium{
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    width: 180px;
  }
  &.ix-small{
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    width: 140px;
  }
  &.ix-mini{
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    width: 110px;
  }
}
.input-base {
  padding: 0 6px;
  width: 100%;
  border: 0;
  background: #fff;
  -webkit-appearance: none;
  box-sizing: border-box;
  outline: none;
  color: inherit;
  font-size: inherit;
  vertical-align: middle;
  height: 100%;
  &::placeholder{color:#B7B7B7}
  &[readonly=readonly]{
    cursor: default;
  }

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  &[type="number"]{
    -moz-appearance: textfield;
  }
}