<script lang="ts">
  import { gallery } from '$lib/state.svelte'
</script>

<style>
  div.scroll {
    max-height: 96vh;
  }
</style>

<dialog 
  class:active={gallery.active} 
  class="small-blur max"
  onclick={()=>gallery.active=false}
>
  <div class="scroll">
    <nav>
      <div class="max"></div>
      <img src={gallery.src} onclick={e=>e.stopPropagation()}>
      <div class="max"></div>
    </nav>
  </div>
  

  <button class="absolute top right transparent border circle margin"
    onclick={()=>gallery.active=false}>
    <i class="error-text">close</i>
  </button>
</dialog>