<script lang="ts">
	import 'normalize.css/normalize.css';
	import '@fontsource/b612';
	import '@fontsource/b612/700.css';
	import '../index.css';
	import TestCard from '$lib/TestCard.svelte';
	import { page } from '$app/stores';
	import { onMount } from 'svelte';

	let idleTimeout: NodeJS.Timeout | undefined;
	onMount(() => {
		window.addEventListener('mousemove', () => {
			clearTimeout(idleTimeout);
			document.body.classList.remove('idle');
			idleTimeout = setTimeout(() => {
				document.body.classList.add('idle');
			}, 3000);
		});
	});

	$: onlyCard = $page.url.pathname === '/card';
</script>

<TestCard full={onlyCard} />
<main class:content={!onlyCard}>
	<slot />
</main>

<style>
	main.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-height: 90vh;
		max-width: 90vw;
		background: rgba(0, 0, 0, 0.8);
		border-radius: 0.5rem;
		border: 1px solid white;

		padding: 1rem;
	}

	:global(.hide-idle) {
		transition: opacity 1s;
		opacity: 1;
	}

	:global(body.idle .hide-idle) {
		opacity: 0;
	}
</style>
