.nut-inputnumber {
  /* #ifdef dynamic*/
  display: flex;
  /* #endif */
  /* #ifndef dynamic*/
  display: inline-flex;
  /* #endif */
  width: calc(
    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} +
      #{$inputnumber-input-width}
  );
  flex-direction: row;
  align-items: center;
  background-color: $color-background;
  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 {
      --nut-icon-width: 10px;
      --nut-icon-height: 10px;
    }
  }

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

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

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

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

  &-icon-minus {
    --nut-icon-width: 16px;
    --nut-icon-height: 16px;
  }

  &-icon-plus {
    --nut-icon-width: 16px;
    --nut-icon-height: 16px;
  }
}