<button
  class="flex items-center gap-1 {% if liked %} text-red-600 {% else %} text-stone-300 {% endif %} hover:text-red-600 transition-colors w-[1em] h-[1em]"
  sx-post="{{ like_url if like_url else url_for('market.browse.product.like_toggle', product_slug=slug)|host }}"
  sx-target="this"
  sx-swap="outerHTML"
  sx-push-url="false"
  sx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
  sx-swap-settle="0ms"
  {% if liked %}
    aria-label="Unlike this {{ item_type if item_type else 'product' }}"
  {% else %}
    aria-label="Like this {{ item_type if item_type else 'product' }}"
  {% endif %}
>
  {% if liked %}
    <i aria-hidden="true" class="fa-solid fa-heart"></i>
  {% else %}
    <i aria-hidden="true" class="fa-regular fa-heart"></i>
  {% endif %}
</button>
