uniformize layer control input styling

website/src/lib/components/layer-control/LayerTreeNode.svelte

@@ -19,10 +19,10 @@
 	}
 </script>
 
-<div class="flex flex-col">
+<div class="flex flex-col gap-1">
 	{#if Array.isArray(node)}
 		{#each node as id}
-			<div>
+			<div class="flex flex-row items-center gap-2">
 				{#if multiple}
 					<Checkbox
 						{id}
@@ -32,6 +32,7 @@
 						on:click={() => {
 							onValueChange(id, !checked[id]);
 						}}
+						class="scale-90"
 					/>
 				{:else}
 					<input
@@ -49,10 +50,24 @@
 		{/each}
 	{:else}
 		{#each Object.keys(node) as id}
-			<div class="ml-2">
+			<div class="ml-2 flex flex-col gap-1">
 				<Label>{id}</Label>
 				<svelte:self node={node[id]} {name} {multiple} {onValueChange} />
 			</div>
 		{/each}
 	{/if}
 </div>
+
+<style lang="postcss">
+	div :global(input[type='radio']) {
+		@apply appearance-none;
+		@apply w-4 h-4;
+		@apply border-[1.5px] border-primary;
+		@apply rounded-full;
+		@apply ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+		@apply cursor-pointer;
+		@apply checked:bg-primary;
+		@apply checked:bg-clip-content;
+		@apply checked:p-0.5;
+	}
+</style>