@import 'Icon/InputIcon.less';
@import 'NumberBox/InputNumberBox.less';
@import 'Color/InputColor.less';
@import 'PasswordStrength/InputPasswordStrength.less';
@import 'Range/InputRange.less';
@import 'Rate/InputRate.less';
@import 'Url/InputUrl.less';

// Input输入框控件
// 输入框容器
.input-wrapper {
  .flex;
  .flex-middle;
  .flex-1;
  .left-icon {
    margin-right: 4px;
  }
  .right-icon {
    margin-left: 12px;
  }

  .input-text,
  .input-textarea {
    width: 100%;
    .flex-1;
  }
  &.disabled {
    color: rgba(0, 0, 0, 0.25);
    border-color: #d9d9d9;
    .input-icon-clear {
      display: none;
    }
  }
}

// 控件: 单行文本框
.input-text {
  display: block;
  position: relative; // 为了解决ios输入时白屏的BUG
  box-sizing: border-box;
  min-height: 22px;
  padding: 10px 0;
  line-height: 22px;
  font-size: 15px;
  text-align: left;
  -webkit-transform: translate3d(0, 0, 0); // 据说可以解决输入不显示文字的问题
  -webkit-backface-visibility: hidden;
  &:extend(.appearance);
  &[disabled] {
    color: #b2b2b2;
    opacity: 1; // 解决iosdisabled颜色变淡的问题
    -webkit-text-fill-color: #b2b2b2; // 解决iosdisabled颜色变淡的问题
  }
}

// Placeholder
.input-placeholder {
  color: var(--placeholder);
}

// 控件: 多行文本框
.input-textarea {
  display: block;
  min-height: 22px;
  line-height: 22px;
  padding: 10px 0;
  height: 60px;
  &:extend(.appearance);
}

// 自增高文本框
.input-fit-wrapper {
  position: relative;
  box-sizing: border-box;
  line-height: 0;
  .flex-1;
}

.input-fit-pre {
  visibility: hidden;
  span {
    display: inline;
  }
}
// 自适应标签与多行文本框文字间距一致
.input-fit-pre,
.input-fit {
  display: block;
  min-height: 22px;
  line-height: 22px;
  padding: 10px 0;
  &:extend(.appearance);
}
// 多行文本框容器
.input-fit {
  // position: relative; // 为了解决ios输入时白屏的BUG
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  // 部分手机上宽度显示不全
  width: 100%;
}
