@use '../config/config'; // Use (need) only if this is a standalone file.
@use 'sprucecss/scss/spruce' as *;

@include generate-form-control(
  '.number-group',
  false,
  false,
  false
);

.number-group {
  @include set-css-variable((
    --padding: 0.25em,
  ));

  align-items: center;
  display: inline-flex;
  gap: spacer('xxs');
  inline-size: auto;
  position: relative;

  &:focus-within {
    @include short-ring('input');
  }

  &__input {
    background-color: transparent;
    border: 0;
    color: color('text', 'form');
    font-size: config('font-size', $form-control);
    font-weight: config('font-weight', $form-control);
    inline-size: 100%;
    line-height: config('line-height', $form-control);
    outline: 0;
    padding: 0;
    text-align: center;

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

  &__decrement,
  &__increment {
    border-radius: config('border-radius', $form-control-sm, false);
  }
}

<div x-cloak class="number-group" x-data="{ quantity: 1, min: 1, max: 99 }" x-init="$watch('quantity', (value) => { quantity = value < min ? min : (value > max ? max : value) })">
    <button class="btn btn--primary btn--sm btn--icon number-group__decrement" type="button" data-action="decrement" aria-label="Decrement quantity" @click="quantity = Math.max(min, --quantity)">
        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
            <line x1='5' y1='12' x2='19' y2='12'></line>
        </svg>
    </button>
    <input class="number-group__input" x-model="quantity" type="number" :min="min" :max="max" />
    <button class="btn btn--primary btn--sm btn--icon number-group__increment" type="button" data-action="increment" aria-label="Increment quantity" @click="quantity = Math.min(max, ++quantity)">
        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
            <line class='vertical-line' x1='12' y1='5' x2='12' y2='19'></line>
            <line x1='5' y1='12' x2='19' y2='12'></line>
        </svg>
    </button>
</div>