<script lang="ts">
  import { modalStore } from '$lib/stores/modal';

  export let transitionX: number = 0;
  export let transitionY: number = 25;
  export let navbarMount: boolean | undefined = undefined;

  const dismissModal = () => $modalStore?.hideModal();
</script>

<div
  class="z-[51] flex flex-col gap-2 pointer-events-auto max-h-screen"
  class:h-full={navbarMount === true}
  aria-modal="true"
  style="--x: {transitionX}px; --y: {transitionY}px;"
  on:click|self={dismissModal}
  on:keyup|self={dismissModal}>
  <slot />
</div>

<style lang="postcss">
  div {
    animation-name: fly;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.2s;
  }

  @keyframes fly {
    from {
      opacity: 0;
      transform: translateX(var(--x)) translateY(var(--y));
    }

    to {
    }
  }
</style>
