@input-prefix-cls: ~"@{css-prefix}input";
@input-group-wrapper-prefix-cls: ~"@{input-prefix-cls}-group-wrapper";
@select-selection-prefix-cls: ~"@{css-prefix}select-selection";
@icon-prefix-cls: ~"@{css-prefix}icon";
@input-padding-vertical-middle: 2px;
@input-padding-with-icon: 32px;
// @input-font-size-large: 18px;

.@{input-prefix-cls} {
  .input;

  &-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;

    // #2149 & #2219
    line-height: normal;
  }

  &-wrapper&-with-word-limit{
    display: flex;
    // justify-items: flex-end;
    align-items: flex-end
  }

  &-icon {
    width: 32px; //和@input-height-base：32px大小保持一样
    height: @input-height-base;
    line-height: @input-height-base;
    font-size: @font-size-large;
    text-align: center;
    color: @input-icon-color;
    position: absolute;
    right: 0;
    z-index: 3;
  }

  &-hide-icon &-icon {
    // display: none;
  }

  &-icon-validate {
    display: none;
  }

  &-icon-close-circle-filled {
    // display: none;
    color: @color-brand-disabled1;
    opacity :100%;
    cursor: pointer;
  }

  &-wrapper {
    .@{input-prefix-cls}-no-border {
      .input-no-border !important;
    }
  }

  &-wrapper&-with-suffix-icon &-icon-close-circle-filled,
  &-wrapper&-type-text&-with-word-limit &-icon-close-circle-filled {
    display: none;
  }

  &-wrapper&-with-clear&-with-suffix-icon:hover,
  &-wrapper&-with-clear&-type-text&-with-word-limit:hover {
    .@{input-prefix-cls}-icon-close-circle-filled {
      display: inline-block;
    }
    .@{input-prefix-cls}-suffix,
    .@{input-prefix-cls}-specified-icon,
    .@{icon-prefix-cls}-search,
    .@{input-prefix-cls}-word-count {
      display: none;
    }
  }

  &-wrapper:not(.@{input-prefix-cls}-group) {
    &:hover {
      .@{input-prefix-cls} {
        border-color: @color-brand-primary;
      }
    }
  }

  &-wrapper-disabled {
    .@{input-prefix-cls}-icon,
    .@{input-prefix-cls}-prefix,
    .@{input-prefix-cls}-prefix .@{icon-prefix-cls},
    .@{input-prefix-cls}-suffix,
    .@{input-prefix-cls}-suffix .@{icon-prefix-cls},
    .@{input-prefix-cls}-group-append {
      cursor: not-allowed !important;
    }

    .@{input-prefix-cls}-prefix .@{icon-prefix-cls},
    .@{input-prefix-cls}-suffix .@{icon-prefix-cls},
    .@{input-prefix-cls}-icon,
    .@{input-prefix-cls}-word-count,
    .@{input-prefix-cls}-group-prepend,
    .@{input-prefix-cls}-group-append {
      color: @color-complementary-6 !important;
    }
    .@{input-prefix-cls}:not(.@{input-prefix-cls}-no-border) {
      border: 1px solid @input-border-disabled-color!important;
    }

    .@{input-prefix-cls}-search,
    .@{input-prefix-cls}-search:hover {
      background-color: @color-complementary-8 !important;
      border-color: @color-complementary-7 !important;
      border-left: 1px solid @color-complementary-7 !important;
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      color: @color-complementary-6 !important;
    }
  }

  &-type-password:hover {
    .@{icon-prefix-cls}-display,
    .@{icon-prefix-cls}-hide {
      color: @color-brand-primary;
      cursor: pointer;
    }
  }

  &-icon-normal+& {
    padding-right: @input-padding-with-icon;
  }

  // #554
  &-hide-icon &-icon-normal+& {
    padding-right: @input-padding-horizontal;
  }

  &-wrapper-large &-icon {
    font-size: @font-size-large;
    height: @input-height-large;
    line-height: @input-height-large;
  }

  &-wrapper-middle &-icon {
    font-size: @font-size-large;
    height: @input-height-middle;
    line-height: @input-height-middle;
  }

  &-wrapper-small &-icon {
    width: 24px;
    font-size: @font-size-middle;
    height: @input-height-small;
    line-height: @input-height-small;

    //+ .@{input-prefix-cls} {
    //    padding-right: 24px;
    //}
  }

  // prefix & suffix
  &-prefix,
  &-suffix {
    width: 32px;
    height: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
    i {
      font-size: @font-size-large;
      line-height: @input-height-base;
      color: @input-icon-color;
    }
  }

  &-suffix {
    left: auto;
    right: 0;
  }

  &-wrapper-small &-prefix,
  &-wrapper-small &-suffix {
    i {
      font-size: @font-size-middle;
      line-height: @input-height-small;
    }
  }

  &-wrapper-middle &-prefix,
  &-wrapper-middle &-suffix {
    i {
      font-size: @font-size-large;
      line-height: @input-height-middle;
    }
  }

  &-wrapper-large &-prefix,
  &-wrapper-large &-suffix {
    i {
      font-size: @font-size-large;
      line-height: @input-height-large;
    }
  }

  &-with-prefix {
    padding-left: @input-padding-with-icon;
  }

  &-with-suffix {
    padding-right: @input-padding-with-icon;
  }

  // search
  &-search {
    cursor: pointer;
    padding: 0 16px !important;
    background: @color-brand-primary  !important;
    color: @color-bg-card  !important; //TODO:颜色待修改为default中的颜色
    border-color: @color-brand-primary  !important;
    transition: all @transition-time @ease-in-out;
    position: relative;
    z-index: 2;

    i {
      font-size: @font-size-large;
    }

    &:hover {
      background: tint(@color-brand-primary, 20%) !important;
      border-color: tint(@color-brand-primary, 20%) !important;
    }

    &:active {
      background: shade(@color-brand-primary, 5%) !important;
      border-color: shade(@color-brand-primary, 5%) !important;
    }

    &-icon {
      cursor: pointer;
      transition: color @transition-time @ease-in-out;

      &:hover {
        color: inherit;
      }
    }

    &:before {
      content: '';
      display: block;
      width: 1px;
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: -1px;
      background: inherit;
    }
  }

  &-wrapper-small &-search {
    padding: 0 12px !important;

    i {
      font-size: @font-size-middle;
    }
  }

  &-wrapper-large &-search {
    padding: 0 20px !important;

    i {
      font-size: @font-size-large;
    }
  }

  &-with-search {
    &:hover {
      .@{input-prefix-cls} {
        border-color: tint(@color-brand-primary, 20%);
      }
    }
  }

  &-type-password, &-with-clear {
    .@{input-prefix-cls} {
      padding-right: @input-padding-with-icon;
    }
  }

  &-type-text &-word-count {
    text-align: center;
    position: absolute;
    right: @input-padding-horizontal;
    top: 2px;
    bottom: 2px;
    padding-left: @input-padding-horizontal;
    background: @color-bg-card; //TODO:颜色已修改为default中的颜色
    z-index: 1;
    display: inline-flex;
    align-items: center;
    color: @color-text-level4;
    font-size: @font-size-base; //show-word-limit属性开启，默认是12px
  }

  &-type-text&-wrapper-disabled &-word-count {
    background: @color-bg-disable;
  }

  &-type-textarea &-word-count {
    color: @color-text-level4;
    font-size: @font-size-base;
    margin-top: 2px;
    margin-left:8px;
    text-align: right;
    z-index: 1;
  }
}

.@{input-prefix-cls}-group {
  .input-group(~"@{input-prefix-cls}");
  border: 1px solid @gray-300;
  border-radius: 4px;

  &:hover {
    border-color: @color-brand-primary;
  }

  &:focus-within {
    border-color: @color-brand-primary;
  }

}

.@{input-prefix-cls}-group-prepend,
.@{input-prefix-cls}-group-append {
  background-color: @input-prefix-bg;
  color: @input-prefix-color;
}

.@{input-prefix-cls}-group-prepend::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background-color: @gray-300;
    }

    .@{input-prefix-cls}-group-append {
  position: relative; // 为伪元素定位提供基准
  
  // 新增竖线样式
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%; // 默认高度占比
    background: #E9E9E9; // ★待定
  }
}

.@{form-item-prefix-cls}-error {
  // 1. 普通输入框（无 group 包裹时）标红
  .@{input-prefix-cls} {
    .input-error; // 错误样式 mixin
  }
  // 2. 输入框组（带前后缀）整体标红
  .@{input-prefix-cls}-group {
    border-color: @error-color !important; // 强制外框红色

    // 内部输入框同步红色（避免默认样式覆盖）
    .@{input-prefix-cls} {
      border: none !important;; // 隐藏内部边框
      box-shadow: none !important;
    }
  }
}
.@{form-item-prefix-cls}-validating{
    .@{input-prefix-cls}{
        &-icon-validate{
            display: inline-block;
        }
        &-icon + .@{input-prefix-cls}{
            padding-right: @input-padding-with-icon;
        }

        &-icon-close-circle-filled {
          display: none;
        }
    }
}

.@{input-group-wrapper-prefix-cls} {
  display: flex;
  align-items: center;

  & > * {
    &.@{css-prefix}select .@{select-selection-prefix-cls},
    &.@{input-prefix-cls}-wrapper .@{input-prefix-cls},
    &.@{css-prefix}date-picker .@{input-prefix-cls} {
      border-radius: 0;
    }

    &:not(:last-child) {
      &.@{css-prefix}select {
        .@{select-selection-prefix-cls} {
          border-right-color: transparent;
        }
      }

      &.@{input-prefix-cls}-wrapper,
      &.@{css-prefix}date-picker {
        .@{input-prefix-cls} {
          border-right-color: transparent;
        }
      }

      &.@{css-prefix}select {
        &:hover .@{select-selection-prefix-cls},
        .@{select-selection-prefix-cls}-focused {
          border-color: @color-brand-primary;
        }
      }

      &.@{input-prefix-cls}-wrapper,
      &.@{css-prefix}date-picker {
        .@{input-prefix-cls}:hover,
        .@{input-prefix-cls}:focus {
          border-color: @color-brand-primary;
        }
      }

      &.@{css-prefix}date-picker-focused {
        .@{input-prefix-cls} {
          border-color: @color-brand-primary;
        }
      }
    }

    &:first-child {
      &.@{css-prefix}select .@{select-selection-prefix-cls},
      &.@{input-prefix-cls}-wrapper .@{input-prefix-cls},
      &.@{css-prefix}date-picker .@{input-prefix-cls} {
        border-top-left-radius: 2px !important;
        border-bottom-left-radius: 2px !important;
      }
    }

    &:last-child {
      &.@{css-prefix}select .@{select-selection-prefix-cls},
      &.@{input-prefix-cls}-wrapper .@{input-prefix-cls},
      &.@{css-prefix}date-picker .@{input-prefix-cls} {
        border-top-right-radius: 2px !important;
        border-bottom-right-radius: 2px !important;
      }
    }
  }
}