<script lang="ts">
	import type { Snippet } from 'svelte';

	let { children }: { children: Snippet } = $props();
</script>

<div
	class="invisible absolute bottom-10 w-20 rounded-xl bg-blue-500 p-1 font-semibold text-white drop-shadow-md group-hover/page:visible"
>
	{@render children()}
</div>

<style lang="postcss">
	div {
		left: calc(50% - 2.5rem);
	}
</style>