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

.@{btri-input-number}-box {
  &.@{btri-input-number}-sm {
    .@{ant-prefix}-input-number-input,
    .@{btri-input-number}-suffix,
    .@{ant-prefix}-input-number-prefix {
      font-size: 12px;
    }
    &.@{ant-prefix}-input-number-affix-wrapper {
      padding-inline-start: 6px;
    }
  }
  &.@{ant-prefix}-input-number-affix-wrapper {
    width: 100%;
    padding-inline-start: 8px;
  }
  &.@{btri-input-number}-status-box {
    margin-top: 4px;
  }
  &.@{btri-input-number}-status-box.@{btri-input-number}-success {
    color: var(--green-7);
    font-size: 14px;
  }
  &.@{btri-input-number}-status-box.@{btri-input-number}-warning {
    color: var(--orange-7);
    font-size: 14px;
  }
  &.@{btri-input-number}-status-box.@{btri-input-number}-error {
    color: var(--red-7);
    font-size: 14px;
  }
  &.@{ant-prefix}-input-number.@{btri-input-number}-success {
    border-color: var(--green-6);
  }
  &.@{ant-prefix}-input-number.@{btri-input-number}-warning {
    border-color: var(--orange-6);
  }
  &.@{btri-input-number}-horizontal
    .@{ant-prefix}-input-number-group-addon:hover {
    color: var(--body-font);
  }
  &.@{ant-prefix}-input-number.@{btri-input-number}-error {
    border-color: var(--red-6);
  }
  // &.@{ant-prefix}-input-number.@{btri-input-number}-vertical.@{btri-input-number}-lg {
  //   width: 96px;
  // }
  // &.@{ant-prefix}-input-number.@{btri-input-number}-vertical.@{btri-input-number} {
  //   width: 84px;
  // }
  // &.@{ant-prefix}-input-number.@{btri-input-number}-vertical.@{btri-input-number}-sm {
  //   width: 60px;
  // }
  &.@{ant-prefix}-input-number {
    border-color: var(--gray-blue-6);
    .@{ant-prefix}-input-number-handler-wrap {
      margin: 4px;
      height: calc(100% - 8px);
      border-radius: 4px;
    }
    .@{ant-prefix}-input-number-handler-wrap:hover {
      background-color: var(--primary-1);
      .@{ant-prefix}-input-number-handler-up-inner {
        color: var(--primary-6);
      }
      .@{ant-prefix}-input-number-handler-down-inner {
        color: var(--primary-6);
      }
    }
  }
  &.@{ant-prefix}-input-number.@{btri-input-number}-vertical.@{btri-input-number}-success.@{ant-prefix}-input-number-focused {
    outline: 2px solid var(--green-2);
  }

  &.@{ant-prefix}-input-number.@{btri-input-number}-vertical.@{btri-input-number}-warning.@{ant-prefix}-input-number-focused {
    outline: 2px solid var(--orange-2);
  }

  &.@{ant-prefix}-input-number.@{btri-input-number}-vertical.@{btri-input-number}-error.@{ant-prefix}-input-number-focused {
    outline: 2px solid var(--red-2);
  }

  &.@{ant-prefix}-input-number.@{btri-input-number}-vertical.@{ant-prefix}-input-number-focused {
    outline: 2px solid var(--primary-2);
    box-shadow: none;
    border-color: var(--primary-6);
  }

  &.@{btri-input-number}-horizontal {
    .@{ant-prefix}-input-number {
      border-left: none;
      border-right: none;
      border-color: var(--gray-blue-6);
      .@{ant-prefix}-input-number-input {
        // width: 36px;
        padding: 0;
      }
    }
    .@{ant-prefix}-input-number.@{ant-prefix}-input-number-focused {
      border-color: var(--primary-6);
    }
    .@{ant-prefix}-input-number-group-addon {
      border-color: var(--gray-blue-6);
      padding: 0 4px;
    }
    .iconBox {
      border-radius: 4px;
    }
    .iconBox:hover {
      background-color: var(--primary-1);
      border-radius: 4px;
    }
    .iconBox:focus {
      background-color: var(--primary-2);
      .@{ant-prefix}-btri-icon-box {
        .i-icon {
          color: var(--primary-6);
        }
      }
    }
    &.@{btri-input-number}-success .iconBox:hover {
      background-color: var(--green-1);
    }
    &.@{btri-input-number}-success .iconBox:focus {
      background-color: var(--green-2);
      .@{ant-prefix}-btri-icon-box {
        .i-icon {
          color: var(--green-6);
        }
      }
    }
    &.@{btri-input-number}-warning .iconBox:hover {
      background-color: var(--orange-1);
    }
    &.@{btri-input-number}-warning .iconBox:focus {
      background-color: var(--orange-2);
      .@{ant-prefix}-btri-icon-box {
        .i-icon {
          color: var(--orange-6);
        }
      }
    }
    &.@{btri-input-number}-error .iconBox:hover {
      background-color: var(--red-1);
    }
    &.@{btri-input-number}-error .iconBox:focus {
      background-color: var(--red-2);
      .@{ant-prefix}-btri-icon-box {
        .i-icon {
          color: var(--red-6);
        }
      }
    }
    .@{ant-prefix}-btri-icon-box {
      .i-icon {
        padding: 4px;
        border-radius: 2px;
      }
    }
  }
  &.@{btri-input-number}-horizontal.@{btri-input-number}-lg {
    // .@{ant-prefix}-input-number {
    //   .@{ant-prefix}-input-number-input {
    //     width: 52px;
    //   }
    // }
    .@{ant-prefix}-input-number-group-addon {
      padding: 0 4px;
    }
  }
  &.@{btri-input-number}-horizontal.@{btri-input-number}-sm {
    // .@{ant-prefix}-input-number {
    //   .@{ant-prefix}-input-number-input {
    //     width: 36px;
    //   }
    // }
    .@{ant-prefix}-input-number-group-addon {
      padding: 0 4px;
      .i-icon {
        padding: 2px;
      }
    }
  }
  &.@{btri-input-number}-horizontal.@{ant-prefix}-input-number-group-wrapper {
    border-radius: 4px;
  }
  &.@{btri-input-number}-horizontal.@{ant-prefix}-input-number-group-wrapper:focus-within {
    outline: 2px solid var(--primary-2);
    border-radius: 4px;
    .@{ant-prefix}-input-number-group-addon:first-of-type {
      border: 1px solid var(--primary-6);
      border-right: none;
    }
    .@{ant-prefix}-input-number-group-addon {
      border: 1px solid var(--primary-6);
      border-left: none;
    }
  }

  &.@{btri-input-number}-suffix-wrapper {
    border-right: 0;
    &:focus-within {
      outline: 2px solid var(--primary-2);
      border-color: var(--primary-6);
      border-radius: 4px;
      .@{ant-prefix}-input-number.@{ant-prefix}-input-number-focused {
        border-color: var(--primary-6);
        outline: 0;
      }
    }
    &:hover,
    &:focus-within {
      .@{ant-prefix}-input-number-group-addon {
        border: 1px solid var(--primary-6);
        border-left: none;
      }
    }
  }
  .@{ant-prefix}-input-number-prefix + .@{ant-prefix}-input-number-focused {
    outline: 0 !important;
  }

  &.@{btri-input-number}-horizontal.@{ant-prefix}-input-number-group-wrapper:hover {
    border-radius: 4px;
    .@{ant-prefix}-input-number {
      border-top: 1px solid var(--primary-6);
      border-bottom: 1px solid var(--primary-6);
    }

    .@{ant-prefix}-input-number-group-addon:first-of-type {
      border: 1px solid var(--primary-6);
      border-right: none;
    }
    .@{ant-prefix}-input-number-group-addon {
      border: 1px solid var(--primary-6);
      border-left: none;
    }
  }

  & {
    .@{ant-prefix}-input-number-wrapper:focus-within {
      .@{ant-prefix}-input-number {
        border-top: 1px solid var(--primary-6);
        border-bottom: 1px solid var(--primary-6);
      }
    }
    .@{ant-prefix}-input-number-handler-down {
      border-top: 2px solid var(--bg-2);
    }
    .@{ant-prefix}-input-number:focus,
    .@{ant-prefix}-input-number-focused {
      box-shadow: none;
    }
    .@{ant-prefix}-input-number-group-addon {
      background-color: var(--bg-2);
    }
    .@{ant-prefix}-input-number-group-addon:hover {
      color: var(--primary-5);
    }
    .@{ant-prefix}-input-number-input {
      padding: 0 12px;
    }
    .@{ant-prefix}-input-number-group-addon {
      padding: 0 8px;
    }
  }
  &.@{btri-input-number}-sm {
    .@{ant-prefix}-input-number-input {
      padding: 0 8px;
    }
  }
  &.@{btri-input-number}-lg {
    .@{btri-input-number}-suffix,
    .@{ant-prefix}-input-number-prefix {
      font-size: 16px;
    }
    .@{ant-prefix}-input-number-group-addon {
      padding: 0 12px;
    }
  }
  &.@{btri-input-number}-sm.@{btri-input-number}-horizontal {
    .@{ant-prefix}-input-number-input {
      // width: 34px;
      text-align: center;
    }
  }
  &.@{btri-input-number}-horizontal {
    .@{ant-prefix}-input-number-input {
      // width: 56px;
      text-align: center;
    }
  }

  &.@{btri-input-number}-success.@{btri-input-number}-horizontal.@{ant-prefix}-input-number-group-wrapper {
    .@{ant-prefix}-btri-icon-box {
      .i-icon:hover {
        color: var(--green-6);
      }
    }
  }
  &.@{btri-input-number}-success {
    border-color: var(--green-6) !important;
    .@{ant-prefix}-input-number-group {
      .@{ant-prefix}-input-number-group-addon {
        border-color: var(--green-6);
      }
      .@{btri-input-number} {
        border-color: var(--green-6);
      }
    }
    .@{ant-prefix}-input-number-group:hover,
    .@{ant-prefix}-input-number-group:focus-within {
      .@{ant-prefix}-input-number-group-addon {
        border-color: var(--green-6);
      }
      .@{btri-input-number} {
        border-color: var(--green-6);
      }
      .@{ant-prefix}-input-number-group-addon {
        border-color: var(--green-6) !important;
      }
    }
  }

  &.@{btri-input-number}-warning.@{btri-input-number}-horizontal.@{ant-prefix}-input-number-group-wrapper:focus-within {
    outline: 2px solid var(--orange-2);
  }
  &.@{btri-input-number}-warning.@{btri-input-number}-horizontal.@{ant-prefix}-input-number-group-wrapper {
    .@{ant-prefix}-btri-icon-box {
      .i-icon:hover {
        color: var(--orange-6);
      }
    }
  }
  &.@{btri-input-number}-warning {
    border-color: var(--orange-6) !important;
    .@{ant-prefix}-input-number-group {
      .@{ant-prefix}-input-number-group-addon {
        border-color: var(--orange-6);
      }
      .@{btri-input-number} {
        border-color: var(--orange-6);
      }
    }
    .@{ant-prefix}-input-number-group:hover,
    .@{ant-prefix}-input-number-group:focus-within {
      .@{ant-prefix}-input-number-group-addon {
        border-color: var(--orange-6);
      }
      .@{btri-input-number} {
        border-color: var(--orange-6);
      }
      .@{ant-prefix}-input-number-group-addon {
        border-color: var(--orange-6) !important;
      }
    }
  }
  &.@{btri-input-number}-error.@{btri-input-number}-horizontal.@{ant-prefix}-input-number-group-wrapper:hover,
  &.@{btri-input-number}-error.@{btri-input-number}-horizontal.@{ant-prefix}-input-number-group-wrapper:focus-within {
    outline: 2px solid var(--red-2);
  }
  &.@{btri-input-number}-error.@{btri-input-number}-horizontal.@{ant-prefix}-input-number-group-wrapper {
    .@{ant-prefix}-btri-icon-box {
      .i-icon:hover {
        color: var(--red-6);
      }
    }
  }
  &.@{btri-input-number}-error {
    border-color: var(--red-6) !important;
    .@{ant-prefix}-input-number-group {
      .@{ant-prefix}-input-number-group-addon {
        border-color: var(--red-6);
      }
      .@{btri-input-number} {
        border-color: var(--red-6);
      }
    }
    .@{ant-prefix}-input-number-group:hover,
    .@{ant-prefix}-input-number-group:focus-within {
      .@{ant-prefix}-input-number-group-addon {
        border-color: var(--red-6);
      }
      .@{btri-input-number} {
        border-color: var(--red-6);
      }
      .@{ant-prefix}-input-number-group-addon {
        border-color: var(--red-6) !important;
      }
    }
  }
}