@props(['on'])

<div x-data="{ shown: false, timeout: null }"
     x-init="$wire.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2200); })"
     x-show="shown"
     x-transition:enter="transition ease-ios duration-500 motion-reduce:duration-150"
     x-transition:enter-start="opacity-0 translate-y-2 scale-95 motion-reduce:translate-y-0 motion-reduce:scale-100"
     x-transition:enter-end="opacity-100 translate-y-0 scale-100"
     x-transition:leave="transition ease-ios-out duration-300 motion-reduce:duration-100"
     x-transition:leave-start="opacity-100 scale-100"
     x-transition:leave-end="opacity-0 translate-y-1 scale-95 motion-reduce:translate-y-0"
     style="display: none;"
    {{ $attributes->merge(['class' => 'text-sm font-semibold tracking-tight text-success']) }}>
    {{ $slot->isEmpty() ? __('Saved.') : $slot }}
</div>