From 5e62b2160ade461d0624f59f0cf3c02be7cda20f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 19 Dec 2025 12:26:43 -0800
Subject: [PATCH] add elemental text color on segment hover

---
 .../ui/segmented-control/segment.module.scss  | 80 ++++++++++++++++++-
 1 file changed, 79 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/ui/segmented-control/segment.module.scss b/src/lib/components/ui/segmented-control/segment.module.scss
index 898517c5..ace740e5 100644
--- a/src/lib/components/ui/segmented-control/segment.module.scss
+++ b/src/lib/components/ui/segmented-control/segment.module.scss
@@ -100,7 +100,6 @@
 	&[data-state='checked'] .label {
 		background: var(--segmented-control-blended-segment-bg-checked);
 		color: var(--segmented-control-blended-segment-text-checked);
-		box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
 	}
 }
 
@@ -123,3 +122,82 @@
 		box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
 	}
 }
+
+// Element-specific styles (override checked state)
+.fire {
+	&[data-state='checked'] .label {
+		background: var(--fire-nav-selected-bg);
+		color: var(--fire-nav-selected-text);
+	}
+
+	&:hover:not([data-state='checked']) .label {
+		background: var(--fire-nav-selected-bg);
+		color: var(--fire-nav-selected-text);
+		opacity: 0.7;
+	}
+}
+
+.water {
+	&[data-state='checked'] .label {
+		background: var(--water-nav-selected-bg);
+		color: var(--water-nav-selected-text);
+	}
+
+	&:hover:not([data-state='checked']) .label {
+		background: var(--water-nav-selected-bg);
+		color: var(--water-nav-selected-text);
+		opacity: 0.7;
+	}
+}
+
+.earth {
+	&[data-state='checked'] .label {
+		background: var(--earth-nav-selected-bg);
+		color: var(--earth-nav-selected-text);
+	}
+
+	&:hover:not([data-state='checked']) .label {
+		background: var(--earth-nav-selected-bg);
+		color: var(--earth-nav-selected-text);
+		opacity: 0.7;
+	}
+}
+
+.wind {
+	&[data-state='checked'] .label {
+		background: var(--wind-nav-selected-bg);
+		color: var(--wind-nav-selected-text);
+	}
+
+	&:hover:not([data-state='checked']) .label {
+		background: var(--wind-nav-selected-bg);
+		color: var(--wind-nav-selected-text);
+		opacity: 0.7;
+	}
+}
+
+.light {
+	&[data-state='checked'] .label {
+		background: var(--light-nav-selected-bg);
+		color: var(--light-nav-selected-text);
+	}
+
+	&:hover:not([data-state='checked']) .label {
+		background: var(--light-nav-selected-bg);
+		color: var(--light-nav-selected-text);
+		opacity: 0.7;
+	}
+}
+
+.dark {
+	&[data-state='checked'] .label {
+		background: var(--dark-nav-selected-bg);
+		color: var(--dark-nav-selected-text);
+	}
+
+	&:hover:not([data-state='checked']) .label {
+		background: var(--dark-nav-selected-bg);
+		color: var(--dark-nav-selected-text);
+		opacity: 0.7;
+	}
+}