<script lang="ts">
	import { MediaQuery } from "svelte/reactivity";
	import { themeSwatch, type Theme } from "#lib/theme.ts";

	interface Props {
		theme: Theme;
	}

	let { theme }: Props = $props();

	const systemDark = new MediaQuery("(prefers-color-scheme: dark)");

	const swatch = $derived(themeSwatch(theme, systemDark.current));
</script>

<span
	class="inline-flex h-4.5 shrink-0 items-center gap-0.75 rounded-sm px-1 text-[0.625rem] leading-none font-medium edge-ring"
	style="background-color: {swatch.background}; color: {swatch.text}"
	aria-hidden="true"
>
	Aa
	<span class="size-1.5 rounded-full" style="background-color: {swatch.accent}"></span>
</span>