<style>
	.dialog {
		@apply inline-block;
		@apply bg-white;
		@apply rounded-lg;
		@apply text-left;
		@apply overflow-hidden;
		@apply shadow-xl;
		@apply transform;
		@apply transition-all;
		@apply my-8;

		width: 95%;
	}
	.my-max-w-xl {
		@apply max-w-xl;
	}
	.my-max-w-2xl {
		@apply max-w-2xl;
	}
	.my-max-w-3xl {
		@apply max-w-3xl;
	}
	.my-max-w-4xl {
		@apply max-w-4xl;
	}
	.my-max-w-5xl {
		@apply max-w-5xl;
	}
	.my-max-w-6xl {
		@apply max-w-6xl;
	}
	.my-max-w-7xl {
		@apply max-w-7xl;
	}
	.my-align-middle {
		@apply align-middle;
	}
	.h90 {
		max-height: 90vh;
	}
</style>

<script lang="ts">
	import { fade } from 'svelte/transition';
	export let size = 'xl'; // https://tailwindcss.com/docs/max-width#class-reference
	export let open = false;
	export let scrollable = true;
	export let verticalAlign = 'middle';
</script>

<!-- This example requires Tailwind CSS v2.0+ -->
<div
	class:hidden={!open}
	class:overflow-y-auto={scrollable}
	class="fixed inset-0 z-50"
	in:fade={{ delay: 100 }}
	out:fade={{ delay: 100 }}
>
	<div
		class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
	>
		<!--
          Background overlay, show/hide based on modal state.
  
          Entering: "ease-out duration-300"
              From: "opacity-0"
              To: "opacity-100"
          Leaving: "ease-in duration-200"
              From: "opacity-100"
              To: "opacity-0"
          -->
		<div class="fixed inset-0 transition-opacity" aria-hidden="true">
			<div class="absolute inset-0 bg-gray-500 opacity-75" ></div>
		</div>

		<!-- This element is to trick the browser into centering the modal contents. -->
		<span class="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"
			>&#8203;</span
		>
		<!--
          Modal panel, show/hide based on modal state.
  
          Entering: "ease-out duration-300"
              From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              To: "opacity-100 translate-y-0 sm:scale-100"
          Leaving: "ease-in duration-200"
              From: "opacity-100 translate-y-0 sm:scale-100"
              To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          -->

		<div
			class="dialog my-max-w-{size} my-align-{verticalAlign}"
			role="dialog"
			aria-modal="true"
			aria-labelledby="modal-headline"
		>
			<div class="h90 flex flex-col">
				<slot />
			</div>
		</div>
	</div>
</div>
