fix(segment): apply hover properly for segment with color (#18549)

Author: brandyscarney

core/src/components/segment/segment.ios.scss

@@ -27,7 +27,6 @@
 
 :host(.ion-color)::slotted(ion-segment-button) {
   --border-color: #{current-color(base)};
-  --background-hover: #{current-color(base, .04)};
 
   background: transparent;
   color: #{current-color(base)};
@@ -52,6 +51,12 @@
   color: #{current-color(contrast, $segment-ios-opacity-disabled)};
 }
 
+@media (any-hover: hover) {
+  :host(.ion-color)::slotted(ion-segment-button:hover:not(.segment-button-checked)) {
+    background: #{current-color(base, .1)};
+  }
+}
+
 
 // Segment: Default Toolbar
 // --------------------------------------------------

core/src/components/segment/segment.md.scss

@@ -23,7 +23,6 @@
 // --------------------------------------------------
 
 :host(.ion-color)::slotted(ion-segment-button) {
-  --background-hover: #{current-color(base, .04)};
   --background-activated: #{current-color(base, .16)};
   --ripple-color: #{current-color(base)};
 
@@ -40,6 +39,11 @@
   color: #{current-color(base)};
 }
 
+@media (any-hover: hover) {
+  :host(.ion-color)::slotted(ion-segment-button:hover) {
+    background: #{current-color(base, .04)};
+  }
+}
 
 // Segment: Default Toolbar
 // --------------------------------------------------