<script>
  import Icon from '../components/Icon.svelte';
  import CodeView from '../components/CodeView.svelte';
  import { fade } from 'svelte/transition';
  export let visible = false;
</script>

<style>
  content {
    display: flex;
    justify-content: center;
  }

  button {
    padding: 5em;
  }

  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: 300px;
    min-height: 300px;
    max-width: 300px;
    width: 100%;
    z-index: 20;
    padding: 0.5em;
  }
</style>

<content>
  <button on:click={ () => visible = true }>Click Me!</button>
</content>

{#if visible}
  <modal on:click={ () => visible = false }>
  <modal-content>
    <h1>This Is A Modal</h1>
    <p>Designers love modals. Click anywhere to close this.</p>
  </modal-content>
  </modal>
{/if}

<CodeView source="/code/Modal" />

