<script lang="ts">
  import Toast from "./Toast.svelte";

  import { dismissToast, toasts } from "$lib/stores";
</script>

{#if $toasts}
  <section>
    {#each $toasts as toast (toast.id)}
      <Toast toastData = {toast} on:dismiss={() => dismissToast(toast.id)} />
    {/each}
  </section>
{/if}

<style lang="postcss">
  section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    margin-top: 1rem;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
  }
</style>
