.numeric-input {
  border: 1px solid var(--color-border-default);
  position: relative;
  border-radius: 6px;

  &--error {
    border-color: var(--color-error-default);
  }

  input {
    width: 100%;
    border: 0;
    padding: 10px;
    border-radius: 6px;
    background-color: var(--color-background-default);
    color: var(--color-text-default);

    /* ensures the increment/decrement arrows always display */
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      opacity: 1;
    }
  }

  span {
    position: absolute;
    right: 40px;
    top: 7px;
  }
}
