<template>
	<div
		class="fixed top-0 left-0 w-100vw h-100vh backdrop-filter bg-black transition p-10 flex items-center justify-center"
		:class="isActive ? 'bg-opacity-30 backdrop-blur-5' : 'pointer-events-none bg-opacity-0'"
		@click.passive.self="emit('close-request')"
	>
		<div
			class="transform transition rounded-lg max-h-full max-w-full shadow-lg bg-dark-500"
			:class="isActive ? 'opacity-100' : 'opacity-0 scale-90'"
		>
			<slot/>
		</div>
	</div>
</template>

<style module lang="scss">

</style>

<script setup lang="ts">
	import { onKeyDown } from "@vueuse/core"

	const props = defineProps<{
		isActive: boolean
	}>()

	const emit = defineEmits(["close-request"])

	onKeyDown("Escape", () => {
		if (props.isActive) emit("close-request")
	}, { passive: true })
</script>