bootstrap-spinner.scss

// Taken and adapted from https://github.com/tkrotoff/bootstrap-input-spinner/blob/v0.1.0/src/bootstrap4-input-spinner.scss

.spinner-border,
.spinner-grow {
  display: none;
}

@function calc-input-right-padding($right-element-width) {
  @return calc(
    #{$right-element-width} - #{$input-border-width} * 2 + #{$input-height-inner-quarter} * 2
  );
}

@function calc-input-top-margin($right-element-width) {
  @return calc((#{$input-height} + #{$right-element-width}) / -2);
}

// stylelint-disable selector-no-qualifying-type

input.is-pending {
  // Cannot use the same as the validation icons because .spinner-border is too big
  padding-right: calc-input-right-padding($spinner-width);

  &.is-pending-sm {
    // Same as the validation icons, this is possible because .spinner-border-sm is small enough
    //padding-right: calcInputRightPadding($spinner-width-sm);
    // https://github.com/twbs/bootstrap/blob/v4.3.1/scss/mixins/_forms.scss#L59
    padding-right: $input-height-inner;
  }

  + .spinner-border,
  + .spinner-grow {
    display: block;

    float: right;

    // Same as the validation icons
    // https://github.com/twbs/bootstrap/blob/v4.3.1/scss/mixins/_forms.scss#L62
    margin-right: $input-height-inner-quarter;

    // stylelint-disable-next-line order/properties-order
    margin-top: calc-input-top-margin($spinner-height);

    &.spinner-border-sm,
    &.spinner-grow-sm {
      margin-top: calc-input-top-margin($spinner-height-sm);
    }
  }
}