<script lang="ts">
	import Dropdown from '$lib/components/Dropdown.svelte';
	import type { Snippet } from 'svelte';

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

<Dropdown>
	{#snippet button(onclick)}
		<button
			type="button"
			class="btn-slate rounded-inherit relative not-only:bg-blue-700 hover:bg-blue-700"
			title="Set flag..."
			aria-label="Set flag..."
			{onclick}
		>
			<span class="icon-base icon-[material-symbols--flag] pointer-events-none"></span>
		</button>
	{/snippet}
	<div class="grid grid-cols-[min-content_min-content] gap-1">
		{@render children?.()}
	</div>
</Dropdown>