.pf-c-number-input {
  // unit
  --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);

  // icon
  --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);

  // form control
  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2); // element's padding
  // stylelint-disable length-zero-no-unit
  --pf-c-number-input--c-form-control--width-icon: 0px;
  // stylelint-enable length-zero-no-unit
  --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl); // extra width to accommodate a status icon
  --pf-c-number-input--c-form-control--width-chars: 4;
  --pf-c-number-input--c-form-control--Width:
    calc(
      calc(
        var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
      ) + var(--pf-c-number-input--c-form-control--width-icon)
    );

  display: inline-flex;
  align-items: center;

  // This modifier can be removed in a breaking change and the extra space created can always be included.
  &.pf-m-status {
    --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
  }

  .pf-c-form-control {
    display: inline-flex;
    width: var(--pf-c-number-input--c-form-control--Width);
    text-align: right;

    @extend %pf-remove-num-arrows;
  }
}

.pf-c-input-group + .pf-c-number-input__unit,
.pf-c-number-input__unit + .pf-c-input-group {
  margin-left: var(--pf-c-number-input__unit--c-input-group--MarginLeft);
}

.pf-c-number-input__icon {
  display: flex;
  font-size: var(--pf-c-number-input__icon--FontSize);
}
