<script lang="ts">
	export let hidden: boolean = true;
	export let closeable: boolean = true;
	import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';

	$: if (globalThis.window) {
		if (hidden) {
			enableBodyScroll(document.body);
		} else {
			disableBodyScroll(document.body);
		}
	}
</script>

<div class="fixed top-0 left-0 w-[100vw] h-[100vh] flex items-center justify-center bg-[rgba(0,0,0,0.8)] z-50" class:hidden={hidden} on:click|self={() => {
	hidden = closeable ? true : hidden;
}}>
{#if closeable}
	<button class="absolute top-4 left-4 text-white" on:click={() => {
		hidden = true;
	}}>Schließen</button>
{/if}
	<slot></slot>
</div>