{% if 'success' == envelope.type %}
    {% set title = 'Success' %}
    {% set text_color = 'text-green-600' %}
    {% set ring_color = 'ring-green-300' %}
    {% set background_color = 'bg-green-600' %}
    {% set progress_background_color = 'bg-green-100' %}
    {% set border_color = 'border-green-600' %}
    {% set icon = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="check w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>' %}
{% elseif 'error' == envelope.type %}
    {% set title = 'Error' %}
    {% set text_color = 'text-red-600' %}
    {% set ring_color = 'ring-red-300' %}
    {% set background_color = 'bg-red-600' %}
    {% set progress_background_color = 'bg-red-100' %}
    {% set border_color = 'border-red-600' %}
    {% set icon = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="x w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>' %}
{% elseif 'warning' == envelope.type %}
    {% set title = 'Warning' %}
    {% set text_color = 'text-yellow-600' %}
    {% set ring_color = 'ring-yellow-300' %}
    {% set background_color = 'bg-yellow-600' %}
    {% set progress_background_color = 'bg-yellow-100' %}
    {% set border_color = 'border-yellow-600' %}
    {% set icon = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="exclamation w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>' %}
{% else %}
    {% set title = 'Info' %}
    {% set text_color = 'text-blue-600' %}
    {% set ring_color = 'ring-blue-300' %}
    {% set background_color = 'bg-blue-600' %}
    {% set progress_background_color = 'bg-blue-100' %}
    {% set border_color = 'border-blue-600' %}
    {% set icon = '<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>' %}
{% endif %}


<div class="bg-white shadow-inner border-l-4 mt-2 cursor-pointer {{ border_color }}">
    <div class="flex items-center px-2 py-3 rounded-lg shadow-lg overflow-hidden">
        <div class="inline-flex items-center {{ text_color }} p-1 text-xl rounded-full flex-shrink-0">
            {{ icon | raw }}
        </div>
        <div class="ml-4 w-0 flex-1">
            <p class="text-base leading-5 font-medium capitalize {{ text_color }}">
                {{ title | trans }}
            </p>
            <p class="mt-1 text-sm leading-5 text-gray-500">
                {{ envelope.message }}
            </p>
        </div>
    </div>
    <div class="h-0.5 flex {{ progress_background_color }}">
        <span class="flasher-progress {{ background_color }}"></span>
    </div>
</div>