<script lang="ts">
	import { fade } from 'svelte/transition';
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();
	export let disabled = false;
	export let dismissable = true;

	function close() {
		if (!dismissable) return;
		dispatch('close');
	}

	function onKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape') close();
	}
</script>

<svelte:body on:keydown={onKeydown} />

<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
<div class="modal-container" on:click={close} transition:fade={{ duration: 200 }}>
	<div class="modal" class:disabled on:click|stopPropagation>
		<slot />
	</div>
</div>

<style>
	.modal-container {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.66);

		z-index: 999;
	}

	.modal {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: var(--background);
		color: var(--foreground);
		border-radius: 5px;
		border: 1px solid var(--foreground);
		padding: 2rem;

		display: flex;
		flex-direction: column;
		gap: 1rem;

		&.disabled {
			filter: brightness(0.66);
			pointer-events: none;
		}
	}
</style>
