.fsa-spinbox {

  $button-width: $size-medium + .1rem;
  $button-width-large: $size-large;
  $button-width-small: math.div($size-large, 2);
  $button-bgc: $color-fsa-tertiary-100;
  $button-bgc-focus: $color-fsa-white;
  $button-border-color: $form-outline-color;
  $button-border-color-hover: $form-focus-color;
  $button-arrow-color: $form-focus-color;
  $button-arrow-size: 10px;
  $button-arrow-size-large: 12px;
  $button-arrow-size-small: 8px;

  & {
    @include font-size(3);
    display: block;
    vertical-align: middle;
    background-color: $color-white;
    position: relative;
    min-width: 8.2rem;
    min-width: 10ch; // for browsers that support ch unit
  }

  &--error {
    box-shadow: 0 0 0 2px $form-error-color inset;
    background-color: $form-error-color-bg;
  }

  &--small {
    @include font-size(2);
    min-width: 7.2rem;
    min-width: 9.5ch;
  }

  &--large {
    @include font-size(4);
    min-width: 10rem;
    min-width: 11.5ch;
  }

  &--inline {
    display: inline-block;
  }

  &__number {

    & {
      display: block;
      width: 90%;
      width: (100% - #{$button-width});
    }
    &:focus-within {
      position: relative;
      z-index: 1;
    }

    // scss-lint:disable SelectorFormat
    .fsa-spinbox--small & {
      width: (100% - #{$button-width-small});
    }

    .fsa-spinbox--large & {
      width: (100% - #{$button-width-large});
    }

  }

  &__input {

    &,
    &[size] {
      display: block;
      width: 100%;
      appearance: initial;
      background: transparent;
      -moz-appearance: textfield;
    }

    &.fsa-input--error {
      .fsa-spinbox--error & {
        box-shadow: none;
      }
    }

    &[disabled] {}

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

    &::-webkit-inner-spin-button {
      margin-top: -1px;
      margin-right: $size-base;
    }

    &::-ms-clear {
      display: none;
    }

    &:focus {
      outline: 0;
    }

    // scss-lint:disable SelectorFormat
    .fsa-spinbox--right & {
      text-align: right;
    }

    .fsa-adjust__spinbox & {


      &:hover,
      &:focus {
        &:not([disabled]) {
          border-color: $button-border-color-hover;
        }
      }

    }

    .fsa-adjust__spinbox--focused & {
      border-color: $color-fsa-tertiary-200;
      background-color: $color-white;
    }

  }

  &__actions {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  &__btn {

    & {
      display: block;
      appearance: none;
      border-width: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
      height: 50%;
      background-color: $button-bgc;
      border: 1px solid $button-border-color;
      border-left: 0;
      line-height: $line-height-flat;
      width: $button-width;
      text-align: center;
      background-size: $icon-size-1;
      background-repeat: no-repeat;
      background-position: 50%;

      &:focus {
        outline: 0 !important;
      }

    }

    // scss-lint:disable SelectorFormat
    .fsa-spinbox--small & {
      width: $button-width-small;
    }

    // scss-lint:disable SelectorFormat
    .fsa-spinbox--large & {
      width: $button-width-large;
      background-size: $icon-size-2;
    }

    &[disabled] {
      background-color: $form-disabled-bg-color;
      cursor: not-allowed;
      filter: grayscale(100);
    }

    &:hover,
    &:active {
      background-color: $button-bgc-focus;
      outline: 0;
    }

    &:active {
      background-color: $color-fsa-secondary-200;
    }

    &:focus {
      border-color: $form-focus-color;
      box-shadow: 0 0 0 1px $form-focus-color inset, 1px 0 0 1px $form-focus-color inset;
      outline: 0;
    }

    &--increment {
      background-image: url('#{$image-path}/material-design-icons/ic_expand_less_24px.svg');
    }

    &--decrement {
      background-image: url('#{$image-path}/material-design-icons/ic_expand_more_24px.svg');
      border-top: 0;
      &:focus {
        box-shadow: 0 0 0 1px $form-focus-color inset, 0 1px 0 1px $form-focus-color inset, 1px 0 0 1px $form-focus-color inset;
      }
    }


  }

}

span.fsa-spinbox {
  display: inline-block;
}