<script>
  import Icon from '../components/Icon.svelte';
  import { fade } from 'svelte/transition';
  export let visible = false;
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
</script>

<style>
  modal {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(244,244,244,0.75);
    padding: 0px;
  }

  modal-content {
    flex-direction: column;
    background: white;
    border: 1px solid var(--color-accent);
    border-radius: 5px;
    max-height: 75vh;
    min-height: 75vh;
    max-width: 75vh;
    width: 100%;
    z-index: 20;
    padding: 0px;
  }
</style>

{#if visible}
  <modal on:click={ () => dispatch('click') }>
  <modal-content>
    <slot></slot>
  </modal-content>
  </modal>
{/if}
