ui: add styles for chip component on songs page

src/routes/layout.css

@@ -135,6 +135,30 @@
 		@apply inline-flex h-8 w-8 items-center justify-center rounded border;
 	}
 
+  .chip-group {
+    @apply flex flex-wrap items-stretch border border-input rounded-md overflow-hidden bg-background w-fit h-fit;
+  }
+
+  .chip-group legend {
+    @apply flex items-center px-3 py-1.5 text-sm font-semibold border-r border-input;
+  }
+
+  .chip {
+    @apply relative inline-flex items-center px-4 py-2 border-r border-input last:border-r-0 bg-background cursor-pointer text-sm font-medium transition-colors hover:bg-muted/50;
+  }
+
+  .chip input {
+    @apply appearance-none;
+	cursor: inherit;
+  }
+
+  .chip:has(input:checked) {
+    @apply bg-primary text-primary-foreground;
+  }
+
+  .chip input:checked + span {
+    @apply font-semibold;
+  }
 }
 
 @layer scn {

src/routes/songs/+page.svelte

@@ -119,22 +119,25 @@
 				/>
 			</div>
 		</div>
-		<div class="flex flex-col gap-2">
-			<Label for="song-types">Song Type</Label>
-			<fieldset id="song-types">
-				{#each Object.keys(AmqSongLinkTypeMap) as type}
-					<label for="song-type-{type.toLowerCase()}">{type}</label>
-					<input
-						type="checkbox"
-						bind:group={params.type}
-						value={AmqSongLinkTypeMap[
-							type as keyof typeof AmqSongLinkTypeMap
-						]}
-						id="song-type-{type.toLowerCase()}"
-					/>
-				{/each}
-			</fieldset>
-		</div>
+		<fieldset id="song-types">
+			<div class="flex flex-col gap-2">
+				<legend class="scn-label">Song Type</legend>
+				<div class="chip-group">
+					{#each Object.keys(AmqSongLinkTypeMap) as type}
+						<label class="chip">
+							<input
+								type="checkbox"
+								bind:group={params.type}
+								value={AmqSongLinkTypeMap[
+									type as keyof typeof AmqSongLinkTypeMap
+								]}
+							/>
+							<span>{type}</span>
+						</label>
+					{/each}
+				</div>
+			</div>
+		</fieldset>
 		<div class="flex flex-col gap-2">
 			<Label for="songs-limit">Limit</Label>
 			<Input