@import '../../style/default.less';


@height: 60px;
@padding: 8px;
@border: 1px;
// ​https://stackoverflow.com/questions/29463648/how-can-i-interpolate-a-string-fraction-mixin-variable-in-less
@line-height: ~'@{height} - @{padding} - @{padding} - @{border} - @{border}';
@transition: .2s ease all;
@input-height: 24px;

@border-default-color: #E5E5E5;
@border-hover-color: #5BBFF5;
@border-error-color: #FE4851;

.material-input {
  width: 100%;
  line-height: @input-height;
  height: @input-height;
  border: 0;
  outline: none;
  font-size: 16px;
  position: relative;
  top: 12px;

  // 浏览器自动填充时, 走聚焦样式
  &:not(:placeholder-shown) ~ .material-input-label {
    transform: translateY(0);
    font-size: 12px;
  }

  &:-webkit-autofill {
    box-shadow: 0 0 0 1000px white inset;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.65);

    &::first-line {
      font-size: 16px;
      font-family: -apple-system, system-ui, "PingFang SC", Akrobat, "Segoe UI", Roboto, "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
    & ~ .material-input-label {
      transform: translateY(0);
      font-size: 12px;
    }
  }

  &-focused {
    .material-input {
      &-label {
        transform: translateY(0);
        font-size: 12px;
      }
    }
  }

  &-wrap {
    height: @height;
    display: flex;
    box-sizing: border-box;
    padding: @padding;
    border: 1px solid;
    border-color: @border-default-color;
    border-radius: 4px;
    line-height: @line-height;
    gap: 8px;
    align-items: center;
    transition: @transition;
    cursor: text;
    &:hover {
      border-color: @border-hover-color;
    }

    &-error {
      border-color: @border-error-color;
    }
  }

  &-main {
    flex: 1;
    position: relative;
  }
  &-label {
    position: absolute;
    top: -12px;
    left: 0;
    height: 0;
    line-height: @line-height;
    font-size: 16px;
    transition: @transition;
    pointer-events: none;
    transform: translateY(12px);
    color: #00000073;
    user-select: none;
  }
  &-error {
    color: #FF4C4C;
    // height: 16px;
    line-height: 16px;
    font-size: 12px;
    user-select: none;
  }
}

.whale-input-with-limit {
  display: inline-block;
  position: relative;

  &.textarea-type {
    padding-top: 4px;
    padding-bottom: 26px;
    border: 1px solid  @input-border-color;
    border-radius: 4px;
    &:hover,
    &.whale-input-with-limit-focus {
      border-color: @primary-color-hover;
      border-right-width: 1px !important;
    }
    &.whale-input-with-limit-focus {
      box-shadow: 0 0 0 2px  @primary-color-outline;
    }

    
    .ant-input {
      &:focus {
        box-shadow: none;
      }
      &:hover {
        border: none !important;
      }
      border:none;
      resize: none;
    }
    .whale-input-count {
      bottom: 4px;
    }
  }
  .whale-input-count {
      position: absolute;
      right: 8px;
      bottom: 6px;
      color: @heading-color;
      font-size: 12px;
      &-total {
          color: @text-color-secondary;
      }
      &.whale-input-count-hide {
          display: none;
      }
  }
}

.ant-input,.ant-input-group-addon,.ant-input-affix-wrapper{
  border-radius: @border-radius-base;
}
.ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:last-child){
  border-top-left-radius: @border-radius-base;
  border-bottom-left-radius: @border-radius-base;
}
.ant-input-group .ant-input-affix-wrapper:not(:first-child),
.ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:first-child){
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ant-input-search>.ant-input-group>.ant-input-group-addon:last-child .ant-input-search-button{
  border-radius: 0 @border-radius-base @border-radius-base 0;
}