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

	let {
		for: target,
		error,
		bigError,
		children
	}: { for: string; error?: boolean; bigError?: boolean; children: Snippet } = $props();
</script>

<label
	for={target}
	class={[
		'transition-fontColor block',
		error && !bigError
			? 'mt-1 text-sm font-normal text-red-500'
			: 'text-text dark:text-background mb-3 text-base font-medium',
		bigError && 'text-red-500!'
	]}
>
	{@render children()}
</label>
