$number-input-height: 36px !default;

.number-input {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;

  &.number-input--disabled .number-input__prefix {
    background: $light-gray-2;
    color: $dark-gray-3;
  }
}

.number-input input[type='number'] {
  font-family: $font-family-monospace;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  width: 100%;
  min-width: 9.375rem;
  padding-left: $spacing-md;
  padding-right: $spacing-lg;
  font-weight: 400;
  height: $number-input-height;
  color: $dark;
  background-color: $input-bg;
  border-radius: $border-radius;
  border: 1px solid $light-gray-2;
  transition: background-color .3s ease,
    outline .3s ease;

  &:focus {
    border-color: $primary;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba($primary,.25);

    ~ .number-input__controls .number-input__control-btn {
      border-color: $primary;
    }
  }

  &:disabled ~ .number-input__controls {
    cursor: not-allowed;
    pointer-events: none;
  }

  &:disabled ~ .number-input__controls svg {
    fill: $light-gray-2;
  }

  -moz-appearance: textfield; // Firefox: Hide spinner (up and down buttons)

  &::-ms-clear {
    display: none; // IE: Hide "clear-field" `x` button on input field
  }

  &::-webkit-inner-spin-button {
    appearance: none; // Safari: Hide number spinner
  }
}

.number-input input[type='number']:disabled,
.number-input--readonly input[type='number'] {
  cursor: not-allowed;
  background-color: $light-gray-2;
  color: $dark-gray-3;
}

.number-input__input-wrapper {
  display: flex;
  align-items: center;

  ~ .form-requirement {
    color: $danger;
    font-weight: 400;
    margin-top: $spacing-xs;
    overflow: visible;

    &::before {
      display: none;
    }
  }

  .number-input__prefix {
    border: 1px solid $light-gray-2;
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
    height: $number-input-height;
    display: inline-flex;
    align-items: center;
    background: $light-gray-3;
    padding: 0 $spacing-xs;

    + input[type='number'] {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: none;
    }
  }
}

.number-input__controls {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.number-input__control-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 18px;
  color: $dark-gray-2;
  background: $light;
  border: none;
  border-left: 1px solid $light-gray-2;

  svg {
    fill: currentColor;
    position: relative;
  }

  &.up-icon {
    border-top-right-radius: $border-radius;
    border-top: 1px solid $light-gray-2;
    border-right: 1px solid $light-gray-2;

    svg {
      top: 2px;
    }
  }

  &.down-icon {
    border-bottom-right-radius: $border-radius;
    border-bottom: 1px solid $light-gray-2;
    border-right: 1px solid $light-gray-2;

    svg {
      top: -4px;
    }
  }

  &:focus {
    outline: 0;
  }

  &:hover {
    cursor: pointer;
    // color: $white;
    background: $light-gray-2;
  }

  &:disabled {
    cursor: not-allowed;
    background: $light-gray-2;
    color: $dark-gray-3;
  }
}

.number-input--readonly .number-input__control-btn {
  display: none;
}

.number-input[data-invalid] {
  .form-requirement {
    display: inline-block;
    max-height: 200px;
  }

  input[type='number'] {
    border-color: $danger;
    padding-right: calc(36px + #{$spacing-md});

    &:focus {
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba($danger,.25);

      ~ .number-input__controls .number-input__control-btn {
        border-color: $danger;
      }
    }
  }

  .number-input__control-btn, .number-input__prefix {
    border-color: $danger;
  }
}

.number-input[data-valid] {
  input[type='number'] {
    border-color: $success;
    padding-right: calc(36px + #{$spacing-md});

    &:focus {
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba($success,.25);

      ~ .number-input__controls .number-input__control-btn {
        border-color: $success;
      }
    }
  }

  .number-input__control-btn, .number-input__prefix {
    border-color: $success;
  }
}

.number-input__invalid {
  position: absolute;
  right: calc(36px + #{$spacing-xs});
  color: $danger;
}

.number-input__valid {
  position: absolute;
  right: calc(36px + #{$spacing-xs});
  color: $success;
}

.number-input--mobile {
  min-width: 144px;
  width: auto;

  .number-input__control-btn {
    position: static;
    width: 40px;
    height: 40px;
    background-color: $light;

    &:hover,
    &:focus {
      background-color: $light-gray-3;
    }

    &:focus {
      outline-width: 2px;
      outline-offset: -2px;
    }

    svg {
      position: static;
    }
  }

  input[type='number'] {
    min-width: 64px;
    width: auto;
    margin: 0;
    border: 1px solid $light-gray-2;
    padding: 0;
    text-align: center;
    background-color: $light;
  }
}

// Skeleton State
.number-input.skeleton {
  @include skeleton;
  width: 100%;
  height: 36px;

  input[type='number'] {
    display: none;
  }
}