{% macro sticker(src, title, enabled, size=40, found=false) -%}

  <span class="relative inline-flex items-center justify-center group"
      tabindex="0" aria-label="{{ title|capitalize }}">
    <!-- sticker icon -->
    <img
      src="{{ src }}"
      width="{{size}}" height="{{size}}"
      alt="{{ title|capitalize }}"
      title="{{ title|capitalize }}"
      class="{% if found %}border-2 border-yellow-200 bg-yellow-300{% endif %} {%if enabled %} opacity-100 {% else %} opacity-40 saturate-0 {% endif %}"
    />

    <!-- tooltip -->
    <span role="tooltip"
          class="pointer-events-none absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover/tt:block group-focus-visible/tt:block whitespace-nowrap rounded-md bg-stone-900 text-white text-xs px-2 py-1 shadow-lg">
      {{ title|capitalize if title|lower != 'sugarfree' else 'Sugar' }}
      <!-- little arrow -->
      <span class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-stone-900"></span>
    </span>
  </span>

{%- endmacro -%}