From 431d23d420ce23e7e8dd357692693a19d0f7b797 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 19 Dec 2024 15:46:30 -0500
Subject: [PATCH] Fix range disabled and focus styles

---
 src/styles/native/slider.css | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/styles/native/slider.css b/src/styles/native/slider.css
index ec84cf7ad..0ddcf254f 100644
--- a/src/styles/native/slider.css
+++ b/src/styles/native/slider.css
@@ -55,7 +55,6 @@ input[type='range'] {
       0 0 0 var(--thumb-gap) var(--wa-color-surface-default);
     -webkit-appearance: none;
     margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
-    cursor: pointer;
   }
 
   &:enabled {
@@ -64,6 +63,10 @@ input[type='range'] {
       outline-offset: var(--wa-focus-ring-offset);
     }
 
+    &::-webkit-slider-thumb {
+      cursor: pointer;
+    }
+
     &::-webkit-slider-thumb:active {
       cursor: grabbing;
     }
@@ -98,7 +101,6 @@ input[type='range'] {
     transition-property: background-color, border-color, box-shadow, color;
     transition-duration: var(--wa-transition-normal);
     transition-timing-function: var(--wa-transition-easing);
-    cursor: pointer;
   }
 
   &:enabled {
@@ -107,19 +109,30 @@ input[type='range'] {
       outline-offset: var(--wa-focus-ring-offset);
     }
 
+    &::-moz-range-thumb {
+      cursor: pointer;
+    }
+
     &::-moz-range-thumb:active {
       cursor: grabbing;
     }
   }
+}
 
-  /* States */
+/* States */
+/* nesting these styles yields broken results in Safari */
 
-  &:focus-visible {
-    outline: none;
-  }
+input[type='range']:focus {
+  outline: none;
+}
 
-  &:disabled {
-    opacity: 0.5;
+:host :has(:disabled) input[type='range'],
+input[type='range']:not(:host *):disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+
+  &::-moz-range-thumb,
+  &::-webkit-slider-thumb {
     cursor: not-allowed;
   }
 }