.arco-input-number {
  &.arco-input-group-wrapper {
    --input-height: 30px;
    --input-step-top: 4px;
    --input-prefix-padding-left: 12px;

    &.arco-input-group-wrapper-mini {
      --input-height: 22px;
      --input-step-top: 1px;
      --input-prefix-padding-left: 6px;
    }

    &.arco-input-group-wrapper-small {
      --input-height: 26px;
      --input-step-top: 2px;
      --input-prefix-padding-left: 8px;
    }

    &.arco-input-group-wrapper-large {
      --input-height: 34px;
      --input-step-top: 8px;
      --input-prefix-padding-left: 16px;
    }

    .arco-input-inner-wrapper {
      padding-left: 0;

      .arco-input {
        padding-left: 0;
      }
    }

    .arco-input-inner-wrapper-focus {
      .arco-input-number-step {
        background-color: var(--color-fill-1);
      }

      .arco-input-number-suffix-icon {
        display: none;
      }
    }

    .arco-input-number-prefix-inner {
      cursor: ew-resize;
      display: flex;
      align-items: center;
      min-height: var(--input-height);
      padding-left: var(--input-prefix-padding-left);
      padding-right: 4px;

      &:empty {
        padding-right: 0;
      }
    }

    .arco-input-number-step {
      position: absolute;
      right: 6px;
      top: var(--input-step-top);
      display: flex;
      flex-direction: column;
      width: 18px;
      text-align: center;
      font-size: 12px;
      opacity: 0;
      border-radius: var(--border-radius-small);

      .arco-input-number-handle-up,
      .arco-input-number-handle-down {
        color: var(--color-text-1);
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc((var(--input-height) - var(--input-step-top) * 2) / 2);
        cursor: pointer;

        &.arco-input-number-handle-disabled {
          cursor: not-allowed;
          color: var(--color-text-3);
        }

        &:not(.arco-input-number-handle-disabled):hover {
          background-color: var(--color-fill-2);
        }
      }

      .arco-input-number-handle-up {
        border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
      }

      .arco-input-number-handle-down {
        border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
      }
    }

    &:hover {
      .arco-input-number-step {
        opacity: 1;
        transition: all opacity 0.3s;
      }

      .arco-input-number-suffix-icon {
        display: none;
      }
    }
  }
}