@import '../index.less';
@btri-input: ~'@{ant-prefix}-btri-input';

.@{btri-input} {
  &-box,
  &-pwd-box,
  &-search-box {
    .@{ant-prefix}-input.@{ant-prefix}-input-sm {
      font-size: 12px;
      line-height: 22px;
    }
    &.@{btri-input}-left .@{ant-prefix}-input {
      text-align: left;
    }
    &.@{btri-input}-right .@{ant-prefix}-input {
      text-align: right;
    }
    &.@{btri-input}-center .@{ant-prefix}-input {
      text-align: center;
    }
    &.@{ant-prefix}-input-affix-wrapper {
      .i-icon {
        color: var(--disable-font);
      }
    }
    &.@{ant-prefix}-input-affix-wrapper:hover {
      // outline: 2px solid transparent;
      .i-icon {
        color: var(--primary-6);
      }
    }
    &.@{ant-prefix}-input-affix-wrapper:focus-within {
      .i-icon {
        color: var(--primary-6);
      }
    }
    &.@{ant-prefix}-input-affix-wrapper-disabled {
      border-color: var(--gray-blue-4);
      background-color: var(--gray-1);
      outline: none;
      .@{ant-prefix}-input:hover {
        box-shadow: none;
        outline: none;
        border-color: var(--gray-blue-4);
      }
    }
    &.@{ant-prefix}-input-affix-wrapper.@{ant-prefix}-input-affix-wrapper-disabled:hover {
      border-color: var(--gray-blue-4);
      // outline: 2px solid transparent;
    }
    // &.@{ant-prefix}-input:focus {
    //   border-color: var(--primary-6);
    //   box-shadow: none;
    //   outline: 2px solid var(--primary-2);
    // }
    // &.@{ant-prefix}-input:hover {
    //   border-color: var(--primary-6);
    //   box-shadow: none;
    //   outline: 2px solid var(--primary-2);
    // }
    &.@{ant-prefix}-input-affix-wrapper:not(
        .@{ant-prefix}-input-affix-wrapper-disabled
      ):hover {
      border: 1px solid var(--primary-6);
    }
    &.@{ant-prefix}-input-affix-wrapper:not(
        .@{ant-prefix}-input-affix-wrapper-disabled
      ):focus-within {
      border: 1px solid var(--primary-6);
      box-shadow: 0 0 0 2px var(--primary-2);
    }
    .@{ant-prefix}-input-show-count-suffix {
      color: var(--disable-font);
    }
    &.@{ant-prefix}-input-affix-wrapper {
      .icon-loading {
        color: var(--primary-6);
      }
    }
  }
  &-text-box {
    .@{ant-prefix}-input:hover {
      outline: 2px solid transparent;
    }
    .@{ant-prefix}-input-textarea.@{ant-prefix}-input-textarea-show-count {
      position: relative;
    }
    .@{ant-prefix}-input-textarea-show-count::after {
      color: var(--disable-font);
      position: absolute;
      bottom: 0;
      right: 12px;
      line-height: 20px;
      bottom: 5px;
      font-size: 12px;
    }
  }
  &-box.@{btri-input}-pureIcon {
    .@{ant-prefix}-input:hover {
      outline: none;
    }
    .@{ant-prefix}-input:focus {
      outline: none;
    }
  }

  &-box.@{btri-input}-success,
  &-box.@{btri-input}-error,
  &-box.@{btri-input}-warning {
    .@{ant-prefix}-input:hover,
    .@{ant-prefix}-input:focus {
      outline: none;
    }
    .status-box {
      display: flex;
      align-items: center;
      gap: 4px;
      height: 16px;
      margin-top: 4px;
      font-size: 12px;
      .anticon {
        font-size: 16px;
      }
    }
  }
  &-box.@{btri-input}-success.@{btri-input}-lg,
  &-box.@{btri-input}-error.@{btri-input}-lg {
    .status-box {
      font-size: 14px;
      height: 20px;
      .anticon {
        font-size: 20px;
      }
    }
  }

  &-box.@{btri-input}-success {
    .i-icon {
      color: var(--green-6) !important;
    }
    color: var(--green-7);
    &.@{ant-prefix}-input-affix-wrapper {
      border: 1px solid var(--success);
    }
    &.@{ant-prefix}-input-affix-wrapper:hover {
      border: 1px solid var(--green-6);
      outline: 2px solid transparent;
    }
    &.@{ant-prefix}-input-affix-wrapper:focus-within {
      border: 1px solid var(--green-6);
      box-shadow: none;
      outline: 2px solid var(--green-2);
    }
    &.@{ant-prefix}-input-affix-wrapper[disabled],
    &.@{ant-prefix}-input-affix-wrapper[disabled]:hover {
      border: 1px solid var(--green-6);
      outline: 2px solid transparent;
    }
  }
  &-box.@{btri-input}-error {
    color: var(--red-7);
    .i-icon {
      color: var(--red-6) !important;
    }
    &.@{ant-prefix}-input-affix-wrapper {
      border: 1px solid var(--red-6);
    }
    &.@{ant-prefix}-input-affix-wrapper:hover {
      border: 1px solid var(--red-6);
      outline: 2px solid transparent;
    }
    &.@{ant-prefix}-input-affix-wrapper:focus-within {
      border: 1px solid var(--red-6);
      outline: 2px solid var(--red-2);
      box-shadow: none;
    }
    &.@{ant-prefix}-input-affix-wrapper[disabled],
    &.@{ant-prefix}-input-affix-wrapper[disabled]:hover {
      border: 1px solid var(--red-6);
      outline: 2px solid transparent;
    }
  }
  &-box.@{btri-input}-warning {
    color: var(--orange-7);
    .i-icon {
      color: var(--orange-6) !important;
    }
    &.@{ant-prefix}-input-affix-wrapper {
      border: 1px solid var(--orange-6);
    }
    &.@{ant-prefix}-input-affix-wrapper:hover {
      border: 1px solid var(--orange-6);
      outline: 2px solid transparent;
    }
    &.@{ant-prefix}-input-affix-wrapper:focus-within {
      border: 1px solid var(--orange-6);
      outline: 2px solid var(--orange-2);
      box-shadow: none;
    }
    &.@{ant-prefix}-input-affix-wrapper[disabled],
    &.@{ant-prefix}-input-affix-wrapper[disabled]:hover {
      border: 1px solid var(--orange-6);
      outline: 2px solid transparent;
    }
  }
}