<script lang="ts">
  import { store } from '$lib/v2/globalStore.svelte';
  import Notification from '$lib/v2/toast/Notification.svelte';
  import '../app.css';

  let { children } = $props();
</script>

{@render children()}

<div
  class="fixed flex flex-col gap-5 m-3 sm:m-6 bottom-0 left-0 pointer-events-none transition-all"
>
  {#each store.notifications as n (n.id)}
    <Notification data={n} />
  {/each}
</div>
