From 35b73abaa6a8037d59645163424bfa804ba02a70 Mon Sep 17 00:00:00 2001
From: Apotheosis <0xapotheosis@gmail.com>
Date: Mon, 6 Jan 2025 20:01:05 +1100
Subject: [PATCH] fix: inner step styling (#8464)

---
 src/components/Stepper.theme.ts | 52 +++++++++++++++++----------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/Stepper.theme.ts b/src/components/Stepper.theme.ts
index 11e2edce439..9463f12ce60 100644
--- a/src/components/Stepper.theme.ts
+++ b/src/components/Stepper.theme.ts
@@ -37,36 +37,38 @@ const baseStyle = {
       bg: 'border.base',
     },
   },
-  innerSteps: {
-    step: {
-      '&[data-status=active]': {
-        bg: 'background.surface.raised.base',
-        borderRadius: '8px',
-      },
+}
+
+const innerSteps = {
+  step: {
+    '&[data-status=active]': {
+      bg: 'background.surface.raised.base',
+      borderRadius: '8px',
     },
-    indicator: {
-      width: '20px',
-      height: '20px',
-      minWidth: '20px',
+  },
+  indicator: {
+    width: '20px',
+    height: '20px',
+    minWidth: '20px',
+    borderWidth: '3px',
+    // Override the throbbing animation
+    '&[data-status=active]:not(.step-pending)': {
+      animation: 'none',
+    },
+    '&[data-status=active]': {
+      borderWidth: '3px',
+    },
+    '&[data-status=incomplete]': {
+      borderWidth: '3px',
+    },
+    '&[data-status=complete]': {
       borderWidth: '3px',
-      // Override the throbbing animation
-      '&[data-status=active]:not(.step-pending)': {
-        animation: 'none',
-      },
-      '&[data-status=active]': {
-        borderWidth: '3px',
-      },
-      '&[data-status=incomplete]': {
-        borderWidth: '3px',
-      },
-      '&[data-status=complete]': {
-        borderWidth: '3px',
-      },
     },
   },
 }
 
 const variants = {
+  innerSteps,
   error: {
     indicator: {
       '&[data-status=active]': {
@@ -83,9 +85,9 @@ const variants = {
     },
   },
   innerStepsError: {
-    ...baseStyle.innerSteps,
+    ...innerSteps,
     indicator: {
-      ...baseStyle.innerSteps.indicator,
+      ...innerSteps.indicator,
       '&[data-status=active]:not(.step-pending)': {
         animation: 'none',
         borderWidth: '0',