@import "./../variable.scss";

// HxInput Component Stylesheet
.pad-hx-input {
  position: relative;
  &:hover {
    .btn-clear {
      display: flex;
    }
  }
  & > .btn-clear {
    @include centerVertical;
    right: $pm-md;
    height: 18px;
    width: 18px;
    display: none;
    border-radius: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background-color: #ddd;
    img.icon {
      width: 60%;
      height: 60%;
      border: none;
      margin: 0;
    }
    &:hover {
      background-color: $color-main;
    }
  }
  // 提示信息
  & > .unit {
    position: absolute;
    text-align: center;
    display: inline-block;
    width: auto;
    cursor: default;
    color: $color-gray-deep;
    @include centerVertical;
    font-size: $font-md;
    right: $pm-md;
    transition: right .4s;
  }
  &:hover > .btn-clear + .unit {
    right: $pm-md + $pm-lg;
  }
  .error + .unit {
    color: $color-red;
  }
  textarea ~ .btn-clear {
    top: auto;
    bottom: 0;
  }
  textarea ~ .unit {
    top: auto;
    bottom: -2px;
  }
}

/*--------------------------------------------------------------------------------------*/
/*  hx-input 适用于全部文本输入框的自定义组件样式
/*--------------------------------------------------------------------------------------*/
.hx-input,
.hx-datetime-picker .hx-input {
  position: relative;
  font-size: 14px;
  line-height: $height-regular;
  resize: none;
  padding: 0 $pm-sm;
  border: 1px solid $color-gray;
  color: $color-dark;
  transition: all .4s;
  border-radius: $border-radius-md;
}
select.hx-input{
  height: $height-regular;
  background-color: transparent;
}
.hx-input.required{
  border:1px solid #d43039!important;
}
.hx-input.required:focus{
  -webkit-box-shadow:  0 0 4px rgba(212,48,57,.8);
  -moz-box-shadow:  0 0 4px rgba(212,48,57,.8);
  box-shadow:  0 0 4px rgba(212,48,57,.8);
}
.pad-hx-input {
  position: relative;
}