<script>
	import { quintOut } from 'svelte/easing';

	const modal = (/** @type {Element} */ node, { duration = 300 } = {}) => {
		const transform = getComputedStyle(node).transform;

		return {
			duration,
			easing: quintOut,
			css: (/** @type {any} */ t, /** @type {number} */ u) => {
				return `transform:
            ${transform}
            scale(${t})
            translateY(${u * -100}%)
          `;
			}
		};
	};
</script>

<div class="modal-background">
	<div transition:modal|global={{ duration: 1000 }} class="modal" role="dialog" aria-modal="true">
		<div class="container">
			<slot />
		</div>
	</div>
</div>

<style>
	.modal-background {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		background: var(--modal-backdrop); /* var(--base) with 0.75 opacity */
		backdrop-filter: blur(4px); /* Optional: adds a slight blur effect */
		z-index: 9999;
		display: flex;
	}

	.modal {
		position: relative;
		left: 50%;
		top: 50%;
		width: 70%;
		background-color: var(--base);
		border: 1px solid var(--surface0);
		border-radius: 8px;
		box-shadow: 0 4px 20px rgba(17, 17, 27, 0.5); /* var(--crust) with opacity */
		transform: translate(-50%, -50%);
	}
	@media (max-width: 990px) {
		.modal {
			width: 90%;
		}
	}
	.modal .container {
		max-height: 90vh;
		overflow-y: auto;
		align-items: center;
		padding: 2rem;
		background-color: var(--base);
		border-radius: 8px;
	}

	/* Scrollbar styling */
	.modal .container::-webkit-scrollbar {
		width: 8px;
	}

	.modal .container::-webkit-scrollbar-track {
		background: var(--surface0);
		border-radius: 4px;
	}

	.modal .container::-webkit-scrollbar-thumb {
		background: var(--surface2);
		border-radius: 4px;
	}

	.modal .container::-webkit-scrollbar-thumb:hover {
		background: var(--surface1);
	}

	@media (min-width: 680px) {
		.modal .container {
			flex-direction: column;
			left: 0;
		}
	}
</style>
