<script lang="ts">
	import { browser } from "$app/environment";

  export let open: boolean = false;
  export let onClose: () => void;

  if (browser) {
    if (open) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "auto";
    }
  }
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div
  aria-labelledby="modal-container"
  role="dialog"
  class="bg-neutral-950/10 backdrop-blur-[2px] fixed top-0 left-0 h-full w-full flex items-center justify-center py-12 z-50 transition-all duration-200" class:opacity-0={!open} class:pointer-events-none={!open}
  on:click={() => onClose()}
>
  <div
    aria-labelledby="modal-dialog"
    aria-describedby="modal-description"
    role="dialog"
    class="max-w-xl w-full bg-neutral-900 rounded-lg p-8 border border-neutral-800 text-neutral-400 shadow-xl transition-all duration-500 relative"
    class:-translate-y-5={!open}
    on:click={(e) => {
      e.stopPropagation();
      e.preventDefault();
    }}
  >
    <slot />
  </div>
</div>