From 991ea10f609e3b209c5d9337ffa9fd9547f0a1c5 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 17 Nov 2025 16:27:11 -0500
Subject: [PATCH] fix scroller styles; closes #1724

---
 .../docs/docs/resources/changelog.md          |  1 +
 .../src/components/scroller/scroller.css      | 30 ++++++++-----------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 3526e0628..e1ae4c7fc 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -16,6 +16,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in `<wa-card>` [issue:1671]
 - Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
 - Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
+- Fixed a z-index bug in `<wa-scroller>` styles [issue:1724]
 - Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
 
 ## 3.0.0
diff --git a/packages/webawesome/src/components/scroller/scroller.css b/packages/webawesome/src/components/scroller/scroller.css
index 2dac32094..3b4080c9e 100644
--- a/packages/webawesome/src/components/scroller/scroller.css
+++ b/packages/webawesome/src/components/scroller/scroller.css
@@ -53,6 +53,19 @@
   overflow-y: auto;
 }
 
+#start-shadow,
+#end-shadow {
+  z-index: 2;
+}
+
+#start-shadow {
+  opacity: var(--start-shadow-opacity);
+}
+
+#end-shadow {
+  opacity: var(--end-shadow-opacity);
+}
+
 /* Horizontal shadows */
 :host([orientation='horizontal']) {
   #start-shadow,
@@ -64,14 +77,6 @@
     pointer-events: none;
   }
 
-  #start-shadow {
-    opacity: var(--start-shadow-opacity);
-  }
-
-  #end-shadow {
-    opacity: var(--end-shadow-opacity);
-  }
-
   #start-shadow {
     &:dir(ltr) {
       left: 0;
@@ -102,21 +107,12 @@
   #start-shadow,
   #end-shadow {
     position: absolute;
-    z-index: 2;
     right: 0;
     left: 0;
     height: var(--shadow-size);
     pointer-events: none;
   }
 
-  #start-shadow {
-    opacity: var(--start-shadow-opacity);
-  }
-
-  #end-shadow {
-    opacity: var(--end-shadow-opacity);
-  }
-
   #start-shadow {
     top: 0;
     background: linear-gradient(to bottom, var(--shadow-color), transparent 100%);