{% set tile_classes = tile_classes|default([])|merge([
    'icon-tile',
    'hg:relative',
    border ? 'hg:border hg:p-6' : '',
    url ? 'has-link hg:transition-all hg:duration-300' : '',
    background ? 'has-bg hg:p-6' : '',
    tile_size,
    border_radius,

])|filter(v => v is not empty) %}

{% set flex_align_map = {
  start:   'hg:justify-start',
  center:  'hg:justify-center',
  end:     'hg:justify-end',
  between: 'hg:justify-between',
} %}

<div class="{{ tile_classes|join(' ') }}">
  <div class="hg:h-full hg:flex hg:flex-col {{ flex_align_map[flex_align] }}">
    <div class="hg:w-full hg:flex {{ icon_align }}">
      {% if icon %}
        {{ include('@mercury/components/icon/icon.twig', { icon_size: icon_size|default('hg:text-4xl') }) }}
      {% endif %}
    </div>

    <div class="hg:w-full hg:pt-2 {{ text_align }}">
      {% if text is not empty or description is not empty %}
        {% if url is not empty %}
          <a href="{{ url }}" class="hg:flex hg:flex-col hg:w-full hg:before:absolute hg:before:content-[''] hg:before:inset-0">
            {% if text is not empty %}
              <h3 class="icon-tile--link-title">{{ text }}</h3>
            {% endif %}
            {% if description is not empty %}
              <span class="icon-tile--link--text hg:mt-1">{{ description|raw }}</span>
            {% endif %}
          </a>
        {% else %}
          <span class="hg:flex hg:flex-col hg:w-full hg:before:absolute hg:before:content-[''] hg:before:inset-0">
            {% if text is not empty %}
              <h3 class="icon-tile--title">{{ text }}</h3>
            {% endif %}
            {% if description is not empty %}
              <span class="icon-tile--text hg:mt-1">{{ description|raw }}</span>
            {% endif %}
          </span>
        {% endif %}
      {% endif %}
    </div>
  </div>
</div>
