.stepper-input {
  display: inline-flex;
  font-weight: $weight-bold;
  box-shadow: $button-box-shadow-standard;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1;
  border-radius: $radius;
  padding-left: 0.75em;
  white-space: nowrap;
  height: 2.25em;
  font-size: $body-size;
  vertical-align: top;

  .stepper-input-label {
    display: flex;
    align-self: center;
    padding-right: 0.75em;
    cursor: pointer;
  }

  .stepper-input-input {
    display: flex;
    text-align: center;
    font-weight: bold;
    -moz-appearance: textfield;
    width: 3em;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    &:focus {
      outline: none;
      box-shadow: inset 0 0 0 1px $grey-light;
    }
  }

  .stepper-input-input,
  .stepper-input-stepper {
    border: none;
    border-left: 1px solid;
  }

  .stepper-input-stepper {
    box-shadow: none;
    display: flex;
    height: 100%;
    border-radius: 0;

    &:last-child {
      border-top-right-radius: $radius;
      border-bottom-right-radius: $radius;
    }
  }

  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      border-color: darken($color, 10%);
      background: $color;
      color: $color-invert;

      .stepper-input-input,
      .stepper-input-stepper {
        border-left-color: darken($color, 5%);
      }

      .stepper-input-stepper.is-#{$name} {
        &:focus {
          outline: none;
          box-shadow: inset 0 0 0 1px rgba($white, 0.4);
        }
      }
    }
  }

  &.is-small {
    font-size: $size-small;
  }

  &.is-medium {
    font-size: $size-medium;
  }

  &.is-large {
    font-size: $size-large;
  }

  &.is-disabled {
    opacity: 0.5;

    .stepper-input-input {
      opacity: 1;
      color: $grey;
      background-color: $white;
    }
  }
}