{{ 'hotspot.css' | asset_url | stylesheet_tag }}
{{ 'hotspot-trigger.css' | asset_url | stylesheet_tag }}

<xo-animate xo-cascade class='xo-hotspot'>
  <div class='xo-hotspot__bg'>
    {% render 'image', image: section.settings.hotspot_image %}
  </div>

  {%- assign index = 0 -%}
  {% for block in section.blocks %}
    {% case block.type %}
      {% when 'hotspot-trigger' %}
        {%- assign index = index | plus: 1 -%}
        <div class='xo-hotspot__point' style='--top: {{ block.settings.top }}; --left: {{ block.settings.left }}'>
          {% render 'hotspot-trigger', product: block.settings.product, placement: block.settings.placement, index: index %}
        </div>
    {% endcase %}
  {% endfor %}
</xo-animate>
