<script lang="ts">
  import FooterComponent from '$lib/components/FooterComponent.svelte';
  import { SvelteToast } from '@zerodevx/svelte-toast';
  interface Props {
    children?: import('svelte').Snippet;
  }

  let { children }: Props = $props();

  const options = {
    pausable: true,
    classes: ['toast']
  };
</script>

{@render children?.()}
<SvelteToast {options} />
<div class="footer">
  <FooterComponent />
</div>

<style>
  .footer {
    position: sticky;
    bottom: 0px;
    display: inline-block;
  }
  :global(.toast.error) {
    --toastColor: var(--color-button-text);
    --toastBackground: var(--color-red-dark);
    --toastBarBackground: var(--color-red-lighter);
  }
  :global(._toastMsg > img) {
    position: relative;
    height: 1.5em;
  }
  :global(._toastMsg) {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  @media only screen and (max-width: 620px) {
    .footer {
      width: 100%;
    }
  }
</style>
