<script lang="ts">
    import 'inter-ui/inter.css';
    import '../app.css';
    import '../github-dark.css';
    import '../github.css';
  
    import Mount from '$lib/components/dashboard/modal/Mount.svelte';
    import { modalStore } from '$lib/stores/modal';
    import { browser } from '$app/environment';
    import { type } from '$lib/models/modal';
    import colors from '$lib/colors';
    import { SvelteToast } from '@zerodevx/svelte-toast';
    import type { SvelteToastOptions } from '@zerodevx/svelte-toast/stores.js';
  
    const toastOptions: SvelteToastOptions = {
      classes: ['toast-notification'],
    };
  
    $: modal = browser && $modalStore?.type != null ? type[$modalStore.type] : null;
  
    const dismissModal = () => {
      if ($modalStore?.visible && modal?.navbarMount !== true) $modalStore.hideModal();
    };
  </script>
  
  <svelte:head>
    <meta name="theme-color" content={colors.background} />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary" />
  </svelte:head>
  
  <div class="w-full" on:mouseup={dismissModal} on:keyup={dismissModal}>
    <slot />
  </div>
  
  <Mount {modal} />
  
  <SvelteToast options={toastOptions} />
  