<script lang="ts">
	import ui from 'beercss';
	import { onMount } from 'svelte';
	import { darkModeStore, themeColorStore } from '../store';
	import { getDynamicTheme } from '../theme';

	interface Props {
		classes?: string;
	}

	let { classes = '' }: Props = $props();

	let fillColor = $state('');

	async function setFill() {
		fillColor = (await getDynamicTheme())['--primary'];
	}

	onMount(async () => {
		// Wait for ui to load before setting fill.
		await ui();

		await setFill();
	});

	darkModeStore.subscribe(async () => {
		await setFill();
	});

	themeColorStore.subscribe(async () => {
		await setFill();
	});
</script>

<svg
	version="1.1"
	id="svg1"
	class={classes}
	height="100%"
	xml:space="preserve"
	xmlns="http://www.w3.org/2000/svg"
	viewBox="50.17 104.37 109.67 88.27"
	><defs id="defs1" /><g id="layer1"
		><g id="g6" transform="matrix(1.0140222,0,0,1.0140222,-1.4722742,-56.323482)"
			><g id="g1" transform="matrix(-1,0,0,1,201.63735,-7.4456246e-6)"
				><g id="g5"
					><path
						id="path5"
						style={`color:#000000;fill:${fillColor};stroke-linecap:square;-inkscape-stroke:none;paint-order:stroke markers fill`}
						d="m 114.65661,173.40906 -1.29294,4.82606 h -5.2e-4 l -44.404523,11.89798 32.504993,32.50551 10e-4,0.001 -6.12107,22.84563 -26.381853,-26.38185 -26.381335,-26.38134 36.03811,-9.65625 z m -4.28191,15.97939 -5.37486,20.05872 -0.54622,2.03915 -16.176276,-16.17679 z"
					/><path
						style={`color:#000000;fill:${fillColor};stroke-linecap:square;-inkscape-stroke:none;paint-order:stroke markers fill`}
						d="M 131.38171,245.48534 105,219.10365 l -26.381696,-26.3817 36.038076,-9.65637 36.03807,-9.65638 -9.65637,36.03807 z"
						id="path3"
					/></g
				></g
			><circle
				style={`opacity:1;fill:${fillColor};fill-opacity:1;stroke:none;stroke-width:10.8326;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill`}
				id="path6"
				cx="86.980743"
				cy="163.40662"
				r="4.9097047"
			/></g
		></g
	></svg
>
