@seed-design/css 1.2.6 → 1.2.8

package/recipes/page-banner.css

@@ -109,12 +109,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -133,12 +133,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -157,12 +157,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-informative-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-informative-weak-pressed);
     }
@@ -181,12 +181,12 @@
     --seed-prefix-icon-color: var(--seed-color-palette-static-white);
     --seed-suffix-icon-color: var(--seed-color-palette-static-white);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-informative-solid-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-informative-solid-pressed);
     }
@@ -205,12 +205,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-positive-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-positive-weak-pressed);
     }
@@ -229,12 +229,12 @@
     --seed-prefix-icon-color: var(--seed-color-palette-static-white);
     --seed-suffix-icon-color: var(--seed-color-palette-static-white);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-positive-solid-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-positive-solid-pressed);
     }
@@ -253,12 +253,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-warning-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-warning-weak-pressed);
     }
@@ -277,12 +277,12 @@
     --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
     --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-warning-solid-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-warning-solid-pressed);
     }
@@ -301,12 +301,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-critical-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-critical-weak-pressed);
     }
@@ -325,12 +325,12 @@
     --seed-prefix-icon-color: var(--seed-color-palette-static-white);
     --seed-suffix-icon-color: var(--seed-color-palette-static-white);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-critical-solid-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-critical-solid-pressed);
     }
@@ -349,12 +349,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:hover, [data-hover]) {
         background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
         background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
     }

package/recipes/page-banner.layered.css

@@ -14,7 +14,7 @@
     padding-bottom: var(--seed-dimension-x2_5);
     --seed-prefix-icon-size: var(--seed-dimension-x4);
     --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
-    --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
+    --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
     --seed-suffix-icon-size: var(--seed-dimension-x4);
     --seed-suffix-icon-margin-left: var(--seed-dimension-x2);
     --seed-suffix-icon-align-self: center;
@@ -69,8 +69,8 @@
 
   .seed-page-banner__button {
     cursor: pointer;
-    margin: calc((var(--seed-dimension-x10)  - var(--seed-line-height-t3)) * .5 * -1);
-    padding: calc((var(--seed-dimension-x10)  - var(--seed-line-height-t3)) * .5);
+    margin: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5 * -1);
+    padding: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5);
     font-family: inherit;
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
@@ -93,8 +93,8 @@
   .seed-page-banner__closeButton {
     width: var(--seed-dimension-x10);
     height: var(--seed-dimension-x10);
-    margin: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5);
-    margin-left: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
+    margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
+    margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
     --seed-suffix-icon-margin-left: initial;
     cursor: pointer;
     border-radius: var(--seed-radius-r1);
@@ -123,13 +123,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -145,13 +145,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -167,13 +167,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-informative-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-informative-weak-pressed);
     }
@@ -189,13 +189,13 @@
     --seed-suffix-icon-color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-informative-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-informative-solid-pressed);
     }
@@ -211,13 +211,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-positive-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-positive-weak-pressed);
     }
@@ -233,13 +233,13 @@
     --seed-suffix-icon-color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-positive-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-positive-solid-pressed);
     }
@@ -255,13 +255,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-warning-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-warning-weak-pressed);
     }
@@ -277,13 +277,13 @@
     --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-warning-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-warning-solid-pressed);
     }
@@ -299,13 +299,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-critical-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-critical-weak-pressed);
     }
@@ -321,13 +321,13 @@
     --seed-suffix-icon-color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-critical-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-critical-solid-pressed);
     }
@@ -343,13 +343,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:hover, [data-hover]) {
       background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
       background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
     }

package/recipes/pull-to-refresh.layered.css

@@ -6,7 +6,7 @@
   }
 
   .seed-pull-to-refresh__indicator {
-    transform: translateY(min(calc(var(--ptr-displacement, 0)  - var(--ptr-size)), 0px));
+    transform: translateY(min(calc(var(--ptr-displacement, 0) - var(--ptr-size)), 0px));
     transition: transform var(--seed-duration-d6);
     justify-content: center;
     align-items: center;

package/recipes/radio.layered.css

@@ -32,7 +32,7 @@
 
   .seed-radio__root--size_large {
     min-height: var(--seed-dimension-x9);
-    --radiomark-margin-top: calc((var(--seed-dimension-x9)  - var(--seed-dimension-x6)) / 2);
+    --radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
   }
 
   .seed-radio__label--size_large {
@@ -43,7 +43,7 @@
 
   .seed-radio__root--size_medium {
     min-height: var(--seed-dimension-x8);
-    --radiomark-margin-top: calc((var(--seed-dimension-x8)  - var(--seed-dimension-x5)) / 2);
+    --radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
   }
 
   .seed-radio__label--size_medium {

package/recipes/radiomark.css

@@ -14,12 +14,12 @@
     outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
     outline-offset: var(--seed-dimension-x0_5);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-transparent-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-transparent-pressed);
     }
@@ -52,12 +52,12 @@
 .seed-radiomark__root--tone_neutral:is(:checked, [data-checked]) {
     background-color: var(--seed-color-bg-neutral-inverted);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -68,12 +68,12 @@
 .seed-radiomark__root--tone_brand:is(:checked, [data-checked]) {
     background-color: var(--seed-color-bg-brand-solid);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-brand-solid-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-brand-solid-pressed);
     }

package/recipes/radiomark.layered.css

@@ -16,13 +16,13 @@
     position: relative;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
@@ -64,13 +64,13 @@
     background-color: var(--seed-color-bg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -84,13 +84,13 @@
     background-color: var(--seed-color-bg-brand-solid);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-brand-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-brand-solid-pressed);
     }

package/recipes/reaction-button.css

@@ -32,12 +32,12 @@
     --seed-count-font-weight: var(--seed-font-weight-bold);
     --seed-count-color: var(--seed-color-fg-neutral);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is(:hover, [data-hover]) {
         background: var(--seed-color-bg-transparent-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is(:active, [data-active]) {
         background: var(--seed-color-bg-transparent-pressed);
     }
@@ -49,12 +49,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-brand);
     --seed-count-color: var(--seed-color-fg-brand);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is([aria-pressed=true], [data-pressed]):is(:hover, [data-hover]) {
         background: var(--seed-color-bg-transparent-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
         background: var(--seed-color-bg-transparent-pressed);
     }

package/recipes/reaction-button.layered.css

@@ -36,13 +36,13 @@
     --seed-count-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is(:active, [data-active]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -56,13 +56,13 @@
     --seed-count-color: var(--seed-color-fg-brand);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
       background: var(--seed-color-bg-transparent-pressed);
     }

package/recipes/segmented-control.css

@@ -69,25 +69,25 @@
     background-color: var(--seed-color-bg-disabled);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
         background-color: var(--seed-color-palette-gray-100);
         box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
         background-color: var(--seed-color-palette-gray-100);
         box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     }
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-neutral-weak-pressed);
         box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-neutral-weak-pressed);
         box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);

package/recipes/segmented-control.layered.css

@@ -78,28 +78,28 @@
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-palette-gray-100);
       box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
       background-color: var(--seed-color-palette-gray-100);
       box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
       box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
       box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);

package/recipes/select-box.css

@@ -23,12 +23,12 @@
     transition: border-color 0.1s var(--seed-timing-function-easing);
     pointer-events: none;
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-transparent-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-transparent-pressed);
     }

package/recipes/select-box.layered.css

@@ -21,13 +21,13 @@
     inset: 0;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }

package/recipes/selectBoxCheckmark.css

@@ -20,12 +20,12 @@
     color: var(--seed-color-fg-placeholder);
     transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
         color: var(--seed-color-fg-neutral-subtle);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
         color: var(--seed-color-fg-neutral-subtle);
     }