css-ing to death of the writer

I hate css.

src/lib/components/Brand.svelte

@@ -3,6 +3,7 @@
 
 	export let brand: BrandConfig = {};
 	export let size = 48;
+	export let color = 'var(--text)';
 	console.log(brand);
 
 	function masked() {
@@ -11,8 +12,8 @@
 </script>
 
 <div
-	class="logo container"
-	style="--size: {size}px; --mask: url({brand.logo || ''})"
+	class="container"
+	style="--size: {size}px; --mask: url({brand.logo || ''}); --mask-color: {color}"
 	class:masked={masked()}
 >
 	{#if brand.logo}
@@ -20,7 +21,7 @@
 			<img src={brand.logo} alt="logo" />
 		{/if}
 	{:else if brand.icon}
-		<i class="fa-fw {brand.icon}" />
+		<i class={brand.icon} />
 	{/if}
 </div>
 
@@ -29,11 +30,11 @@
 		width: var(--size);
 		min-width: min-content;
 		height: var(--size);
-		font-size: var(--size);
+		color: var(--mask-color);
 	}
 
 	.masked {
-		background: black;
+		background: var(--mask-color);
 		mask: var(--mask) center no-repeat;
 		mask-size: var(--size);
 		-webkit-mask: var(--mask) center no-repeat;

src/lib/components/ThemeVariantButton.svelte

@@ -9,12 +9,14 @@
 	}
 </script>
 
-<button on:click={next}>
-	{#if $themeVariant == 'default'}
-		<i class="fa fa-circle-half-stroke" />
-	{:else if $themeVariant == 'light'}
-		<i class="fa-regular fa-circle" />
-	{:else if $themeVariant == 'dark'}
-		<i class="fa-solid fa-circle" />
-	{/if}
-</button>
+<a on:click={next}>
+	<span class="icon">
+		{#if $themeVariant == 'default'}
+			<i class="fas fa-circle-half-stroke" />
+		{:else if $themeVariant == 'light'}
+			<i class="fa-regular fa-circle" />
+		{:else if $themeVariant == 'dark'}
+			<i class="fa-solid fa-circle" />
+		{/if}
+	</span>
+</a>