@use 'sprucecss/scss/spruce' as *;

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

.number-group {
  align-items: center;
  display: inline-flex;
  gap: spacer('xxs');
  inline-size: auto;
  max-inline-size: 6.5rem;
  padding: 0.25em;
  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 class="btn__icon" 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">
            <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 class="btn__icon" 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">
            <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>