<script lang="ts">
	import { clickOutside } from '$lib/Actions';
	import { fadeFast } from '$lib/Transitions';
	import { fade } from 'svelte/transition';

	export let visible: boolean;
	export let parent: HTMLElement;
</script>

{#if visible}
	<div
		class="absolute z-[1] mt-1 w-max rounded bg-slate-700 p-1 shadow-sm shadow-slate-900"
		transition:fade={fadeFast}
		use:clickOutside={{ handler: () => (visible = false), ignore: parent }}
	>
		<slot />
	</div>
{/if}