@php
$styles = [
    'success' => 'border-emerald-300 bg-emerald-50 text-emerald-800 dark:border-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-200',
    'error' => 'border-red-300 bg-red-50 text-red-800 dark:border-red-700 dark:bg-red-950/60 dark:text-red-200',
    'warning' => 'border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-700 dark:bg-amber-950/60 dark:text-amber-200',
];
@endphp
<div class="mx-auto w-full max-w-7xl space-y-2 px-4 pt-4 sm:px-6 lg:px-8">
    @foreach($styles as $key => $class)
        @if(session($key))
            <div x-data="{ show: true }" x-show="show" class="flex items-start justify-between gap-3 rounded-xl border px-4 py-3 text-sm {{ $class }}" role="alert">
                <p>{{ session($key) }}</p>
                <button type="button" @click="show = false" class="shrink-0 opacity-70 hover:opacity-100" aria-label="Dismiss"><x-icon name="x" class="h-4 w-4"/></button>
            </div>
        @endif
    @endforeach
    @if($errors->any())
        <div class="rounded-xl border px-4 py-3 text-sm {{ $styles['error'] }}" role="alert">Please fix the highlighted fields and try again.</div>
    @endif
</div>