<div class="quantity-selector d-inline-flex align-items-center overflow-hidden rounded" [class.quantity-selector--small]="size() === 'small'" aria-label="Selector de cantidad">
  <button
    type="button"
    class="quantity-selector__button border-0 p-0 fw-bold lh-1"
    aria-label="Disminuir cantidad"
    [disabled]="quantity() <= min()"
    (click)="onDecrease()"
  >
    -
  </button>

  <span class="quantity-selector__value flex-grow-1 min-w-0 text-center fw-bold lh-1 user-select-none">{{ quantity() }}</span>

  <button
    type="button"
    class="quantity-selector__button border-0 p-0 fw-bold lh-1"
    aria-label="Aumentar cantidad"
    [disabled]="quantity() >= max()"
    (click)="onIncrease()"
  >
    +
  </button>
</div>
