From a1070596117a70900dce94c761df7c012ac932d7 Mon Sep 17 00:00:00 2001
From: Bree Hall <40739624+breehall@users.noreply.github.com>
Date: Tue, 8 Aug 2023 10:29:20 -0400
Subject: [PATCH] [EuiSteps] Add outer halo to `current` step (#7048)

---
 src/components/steps/step_number.styles.ts | 11 ++++++++++-
 upcoming_changelogs/7048.md                |  1 +
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 upcoming_changelogs/7048.md

diff --git a/src/components/steps/step_number.styles.ts b/src/components/steps/step_number.styles.ts
index 3a02b50aab5..c6f361564e6 100644
--- a/src/components/steps/step_number.styles.ts
+++ b/src/components/steps/step_number.styles.ts
@@ -106,7 +106,16 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
           ${euiTheme.animation.bounce};
       }
     `,
-    current: css``,
+    current: css`
+      border: 2px solid ${euiTheme.colors.body};
+      box-shadow: 0 0 0 2px ${euiTheme.colors.primary};
+
+      .euiStepNumber__number {
+        /* Transform the step number so it appears in the center of the step circle */
+        display: inline-block;
+        transform: translateY(-2px);
+      }
+    `,
   };
 };
 
diff --git a/upcoming_changelogs/7048.md b/upcoming_changelogs/7048.md
new file mode 100644
index 00000000000..0b2c0763a53
--- /dev/null
+++ b/upcoming_changelogs/7048.md
@@ -0,0 +1 @@
+- Updated `EuiSteps` and `EuiStepsHorizontal` to highlight and provide a more clear visual indication of the current step
\ No newline at end of file