<script lang="ts">
	export let showModal: boolean;

	let dialog: HTMLDialogElement;

	$: if (dialog && showModal) dialog.showModal();

	import CloseIcon from "./Toasts/CloseIcon.svelte";
</script>

<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
<dialog
	bind:this={dialog}
	on:close={() => (showModal = false)}
	on:click|self={() => dialog.close()}
>
	<!-- svelte-ignore a11y-no-static-element-interactions -->
	<div on:click|stopPropagation>
		<slot name="header" />
		<hr />
		<slot />
		<hr />
	</div>
	<button class="close" on:click={() => dialog.close()}>
		<CloseIcon width="0.8em" />
	</button>
</dialog>

<style>
	dialog {
		max-width: 70%;
		border-radius: 0.2em;
		border: none;
		padding: 0em 2em 2em 2em;
        border-left: 2em;
        border-right: 2em;
        background: var(--bg);
        color: var(--fg);
        box-shadow: .5em .5em .5em var(--red);
	}
	dialog::backdrop {
		background: rgba(0, 0, 0, 0.7);
	}
	dialog > div {
		padding: 1em;
	}
	dialog[open] {
		animation: zoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	@keyframes zoom {
		from {
			transform: scale(0.95);
		}
		to {
			transform: scale(1);
		}
	}
	dialog[open]::backdrop {
		animation: fade 0.3s ease-out;
	}
	@keyframes fade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.close {
		position: absolute;
		top: 1em;
		right: 1.5em;
		color: var(--fg);
		background: transparent;
		border: 0 none;
		padding: 0;
		margin: 0 0 0 auto;
		line-height: 1;
		font-size: 1.2em;
	}
</style>
