From 81570126422dcc0e4103818529d1ded5f6f876e6 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Fri, 5 Sep 2025 11:23:11 -0700
Subject: [PATCH] state machine: move progress bar styles out of CSS

---
 src/lib/StateMachine.svelte | 57 +++++++++++++++++++------------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/lib/StateMachine.svelte b/src/lib/StateMachine.svelte
index e09c9ac..b5f5645 100644
--- a/src/lib/StateMachine.svelte
+++ b/src/lib/StateMachine.svelte
@@ -347,23 +347,31 @@
 
 <!-- Form progress bar -->
 {#snippet progress()}
-	{#each { length: pages.length - 2 } as _, i (i)}
-		<div
-			class="relative flex h-6 w-7 items-center justify-center rounded-3xl bg-white
-					text-sm dark:bg-slate-600 {index === i
-				? 'bg-sui-accent-500!  text-sui-background dark:bg-sui-accent-700!'
-				: ''} {i < index ? 'text-sui-background bg-green-600!' : ''} {i > index
-				? 'scale-[0.85] opacity-80'
-				: ''}
-					transition-[transform,background-color,color]"
-		>
-			{#if i >= index}
-				<span class="mb-[0.0625rem]">{i + 1}</span>
-			{:else}
-				<CheckFat size="0.9rem" weight="fill" />
-			{/if}
-		</div>
-	{/each}
+	<div
+		class={[
+			'flex cursor-default items-center justify-center gap-3 overflow-hidden rounded-3xl px-3 py-2',
+			'dark:bg-sui-text-800 bg-gray-200/80 dark:lg:bg-slate-800',
+			'text-sui-text/60 dark:text-sui-background/60 font-semibold'
+		]}
+	>
+		{#each { length: pages.length - 2 } as _, i (i)}
+			<div
+				class={[
+					'relative flex h-6 w-7 items-center justify-center rounded-3xl bg-white text-sm dark:bg-slate-600',
+					index === i && 'bg-sui-accent-500! text-sui-background dark:bg-sui-accent-700!',
+					i < index && 'text-sui-background bg-green-600!',
+					i > index && 'scale-[0.85] opacity-80',
+					'transition-[transform,background-color,color]'
+				]}
+			>
+				{#if i >= index}
+					<span class="mb-[0.0625rem]">{i + 1}</span>
+				{:else}
+					<CheckFat size="0.9rem" weight="fill" />
+				{/if}
+			</div>
+		{/each}
+	</div>
 {/snippet}
 
 <div
@@ -386,9 +394,10 @@
 
 	<!-- Progress bar (mobile only, above form) -->
 	<div
-		class="progress absolute transition-transform duration-500 lg:!hidden {backButtonVisible
-			? 'right-0'
-			: 'left-1/2 -translate-x-1/2'}"
+		class={[
+			'absolute transition-transform duration-500 lg:!hidden',
+			backButtonVisible ? 'right-0' : 'left-1/2 -translate-x-1/2'
+		]}
 	>
 		{@render progress()}
 	</div>
@@ -400,7 +409,7 @@
 	lg:max-h-[60rem] lg:min-h-[30rem] lg:flex-row lg:items-center dark:sm:bg-gray-900"
 >
 	<!-- Progress bar (desktop only, in form space) -->
-	<div class="progress absolute top-8 left-[70%] hidden! -translate-x-1/2 lg:flex!">
+	<div class="absolute top-8 left-[70%] hidden! -translate-x-1/2 lg:flex!">
 		{@render progress()}
 	</div>
 
@@ -486,10 +495,4 @@
 	:global(.circle-final) {
 		opacity: 1;
 	}
-
-	.progress {
-		@apply flex cursor-default items-center justify-center gap-3 overflow-hidden rounded-3xl px-3 py-2;
-		@apply dark:bg-sui-text-800 bg-gray-200/80 dark:lg:bg-slate-800;
-		@apply text-sui-text/60 dark:text-sui-background/60 font-semibold;
-	}
 </style>