.nut-inputnumber {
  /* #ifdef dynamic*/
  display: flex;
  /* #endif */
  /* #ifndef dynamic*/
  display: inline-flex;
  /* #endif */
  width: calc(
    2 * #{$inputnumber-divider-width} + 2 * #{$inputnumber-button-width} +
      #{$inputnumber-input-width}
  );
  flex-direction: row;
  align-items: center;
  background-color: $inputnumber-input-background-color;
  border-radius: $inputnumber-input-border-radius;
  overflow: hidden;
  &-minus,
  &-add {
    display: flex;
    justify-content: center;
    align-items: center;
    width: $inputnumber-button-width;
    height: $inputnumber-button-height;
    background-color: $inputnumber-button-background-color;
    .nut-icon {
      width: scale-px(10px);
      height: scale-px(10px);
    }
  }

  &-icon {
    color: $color-text;
    cursor: pointer;

    &-disabled {
      color: $color-text-disabled;
      cursor: not-allowed;
    }
  }

  &-divider {
    width: $inputnumber-divider-width;
    align-self: stretch;
    background-color: $color-background-overlay;
  }

  &-input {
    display: flex;
    justify-content: center;
    align-items: center;
    width: $inputnumber-input-width;
    height: $inputnumber-input-height;
    font-size: $inputnumber-input-font-size;
    font-family: $inputnumber-input-font-family;
    text-align: center;
    outline: none;
    border: $inputnumber-input-border;
    color: $color-text;
    background-color: $inputnumber-input-background-color;
    padding: 0;
    &-disabled {
      color: $color-text-disabled;
    }
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      appearance: none;
    }
  }

  &-input-disabled {
    color: $color-text-disabled;
  }

  &-icon-minus {
    width: scale-px(16px);
    height: scale-px(16px);
  }

  &-icon-plus {
    width: scale-px(16px);
    height: scale-px(16px);
  }
}
