<div data-turbo-temporary class="pointer-events-auto w-full max-w-sm translate-y-0 transform rounded-lg bg-white dark:bg-gray-900 opacity-100 shadow-lg outline-1 outline-black/5 dark:outline-white/10 dark:-outline-offset-1 transition duration-300 ease-out sm:translate-x-0 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0">
    <div class="p-4">
        <div class="flex items-start">
            {% if type == 'success' %}
                <div class="shrink-0">
                    <twig:ux:icon name="lucide:check-circle" aria-hidden="true" class="size-6 text-green-400" />
                </div>
            {% endif %}
            <div class="{% if type == 'success' %}ml-3 {% endif %}w-0 flex-1 pt-0.5">
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ title ?? message }}</p>
                {% if message %}
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ message }}</p>
                {% endif %}
                {% if actionLink %}
                    <a href="{{ actionLink }}"
                       class="ml-3 shrink-0 rounded-md bg-white dark:bg-gray-900 text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 focus:outline-2 focus:outline-offset-2 focus:outline-primary-500">Undo</a>
                {% endif %}
            </div>
            <div class="ml-4 flex shrink-0">
                <button type="button"
                        class="inline-flex rounded-md text-gray-400 hover:text-gray-500 dark:hover:text-white focus:outline-2 focus:outline-offset-2 focus:outline-primary-600 dark:focus:outline-primary-500">
                    <span class="sr-only">Close</span>
                    <twig:ux:icon name="lucide:x" aria-hidden="true" class="size-5" />
                </button>
            </div>
        </div>
    </div>
</div>