@seed-design/css 1.2.7 → 1.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/all.css +212 -200
  2. package/all.layered.css +212 -200
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +6 -2
  6. package/base.layered.css +6 -2
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/action-button.css +14 -14
  11. package/recipes/action-button.layered.css +14 -14
  12. package/recipes/action-sheet.layered.css +3 -3
  13. package/recipes/app-screen.layered.css +13 -13
  14. package/recipes/bottom-sheet-handle.css +2 -2
  15. package/recipes/bottom-sheet-handle.layered.css +2 -2
  16. package/recipes/bottom-sheet.layered.css +3 -3
  17. package/recipes/callout.css +12 -12
  18. package/recipes/callout.layered.css +13 -13
  19. package/recipes/checkbox.layered.css +2 -2
  20. package/recipes/checkmark.css +12 -12
  21. package/recipes/checkmark.layered.css +12 -12
  22. package/recipes/chip-tabs.css +12 -12
  23. package/recipes/chip-tabs.layered.css +12 -12
  24. package/recipes/chip.css +12 -12
  25. package/recipes/chip.layered.css +12 -12
  26. package/recipes/contextual-floating-button.css +4 -4
  27. package/recipes/contextual-floating-button.layered.css +4 -4
  28. package/recipes/dialog.layered.css +3 -3
  29. package/recipes/extended-action-sheet.layered.css +3 -3
  30. package/recipes/field.layered.css +2 -2
  31. package/recipes/floating-action-button.css +2 -2
  32. package/recipes/floating-action-button.layered.css +2 -2
  33. package/recipes/help-bubble.layered.css +4 -4
  34. package/recipes/image-frame-reaction-button.layered.css +4 -4
  35. package/recipes/image-frame.css +11 -5
  36. package/recipes/image-frame.layered.css +8 -0
  37. package/recipes/inline-banner.layered.css +3 -3
  38. package/recipes/input-button.css +2 -2
  39. package/recipes/input-button.layered.css +2 -2
  40. package/recipes/list-item.css +8 -8
  41. package/recipes/list-item.layered.css +8 -8
  42. package/recipes/menu-sheet-item.css +2 -2
  43. package/recipes/menu-sheet-item.layered.css +2 -2
  44. package/recipes/menu-sheet.css +2 -2
  45. package/recipes/menu-sheet.layered.css +6 -6
  46. package/recipes/page-banner.css +22 -22
  47. package/recipes/page-banner.layered.css +27 -27
  48. package/recipes/pull-to-refresh.layered.css +1 -1
  49. package/recipes/radio.layered.css +2 -2
  50. package/recipes/radiomark.css +6 -6
  51. package/recipes/radiomark.layered.css +6 -6
  52. package/recipes/reaction-button.css +4 -4
  53. package/recipes/reaction-button.layered.css +4 -4
  54. package/recipes/segmented-control.css +4 -4
  55. package/recipes/segmented-control.layered.css +4 -4
  56. package/recipes/select-box.css +2 -2
  57. package/recipes/select-box.layered.css +2 -2
  58. package/recipes/selectBoxCheckmark.css +2 -2
  59. package/recipes/selectBoxCheckmark.layered.css +2 -2
  60. package/recipes/slider.layered.css +2 -2
  61. package/recipes/snackbar-region.layered.css +1 -1
  62. package/recipes/switch.layered.css +3 -3
  63. package/recipes/switchmark.layered.css +3 -3
  64. package/recipes/tabs.layered.css +4 -4
  65. package/recipes/toggle-button.css +8 -8
  66. package/recipes/toggle-button.layered.css +8 -8
  67. package/vars/component/menu-sheet.d.ts +1 -0
  68. package/vars/component/menu-sheet.mjs +1 -0
package/all.css CHANGED
@@ -824,13 +824,13 @@
824
824
  --range-color: var(--seed-color-palette-static-white);
825
825
  }
826
826
 
827
- @media (hover: hover) {
827
+ @media (hover: hover) and (pointer: fine) {
828
828
  .seed-action-button--variant_brandSolid:is(:hover, [data-hover]) {
829
829
  background: var(--seed-color-bg-brand-solid-pressed);
830
830
  }
831
831
  }
832
832
 
833
- @media (hover: none) {
833
+ @media not all and (hover: hover) and (pointer: fine) {
834
834
  .seed-action-button--variant_brandSolid:is(:active, [data-active]) {
835
835
  background: var(--seed-color-bg-brand-solid-pressed);
836
836
  }
@@ -859,13 +859,13 @@
859
859
  --range-color: var(--seed-color-palette-static-white);
860
860
  }
861
861
 
862
- @media (hover: hover) {
862
+ @media (hover: hover) and (pointer: fine) {
863
863
  .seed-action-button--variant_neutralSolid:is(:hover, [data-hover]) {
864
864
  background: var(--seed-color-bg-neutral-inverted-pressed);
865
865
  }
866
866
  }
867
867
 
868
- @media (hover: none) {
868
+ @media not all and (hover: hover) and (pointer: fine) {
869
869
  .seed-action-button--variant_neutralSolid:is(:active, [data-active]) {
870
870
  background: var(--seed-color-bg-neutral-inverted-pressed);
871
871
  }
@@ -894,13 +894,13 @@
894
894
  --range-color: var(--seed-color-fg-neutral);
895
895
  }
896
896
 
897
- @media (hover: hover) {
897
+ @media (hover: hover) and (pointer: fine) {
898
898
  .seed-action-button--variant_neutralWeak:is(:hover, [data-hover]) {
899
899
  background: var(--seed-color-bg-neutral-weak-pressed);
900
900
  }
901
901
  }
902
902
 
903
- @media (hover: none) {
903
+ @media not all and (hover: hover) and (pointer: fine) {
904
904
  .seed-action-button--variant_neutralWeak:is(:active, [data-active]) {
905
905
  background: var(--seed-color-bg-neutral-weak-pressed);
906
906
  }
@@ -929,13 +929,13 @@
929
929
  --range-color: var(--seed-color-palette-static-white);
930
930
  }
931
931
 
932
- @media (hover: hover) {
932
+ @media (hover: hover) and (pointer: fine) {
933
933
  .seed-action-button--variant_criticalSolid:is(:hover, [data-hover]) {
934
934
  background: var(--seed-color-bg-critical-solid-pressed);
935
935
  }
936
936
  }
937
937
 
938
- @media (hover: none) {
938
+ @media not all and (hover: hover) and (pointer: fine) {
939
939
  .seed-action-button--variant_criticalSolid:is(:active, [data-active]) {
940
940
  background: var(--seed-color-bg-critical-solid-pressed);
941
941
  }
@@ -967,13 +967,13 @@
967
967
  --range-color: var(--seed-color-bg-brand-solid);
968
968
  }
969
969
 
970
- @media (hover: hover) {
970
+ @media (hover: hover) and (pointer: fine) {
971
971
  .seed-action-button--variant_brandOutline:is(:hover, [data-hover]) {
972
972
  background: var(--seed-color-bg-transparent-pressed);
973
973
  }
974
974
  }
975
975
 
976
- @media (hover: none) {
976
+ @media not all and (hover: hover) and (pointer: fine) {
977
977
  .seed-action-button--variant_brandOutline:is(:active, [data-active]) {
978
978
  background: var(--seed-color-bg-transparent-pressed);
979
979
  }
@@ -1006,13 +1006,13 @@
1006
1006
  --range-color: var(--seed-color-fg-neutral);
1007
1007
  }
1008
1008
 
1009
- @media (hover: hover) {
1009
+ @media (hover: hover) and (pointer: fine) {
1010
1010
  .seed-action-button--variant_neutralOutline:is(:hover, [data-hover]) {
1011
1011
  background: var(--seed-color-bg-transparent-pressed);
1012
1012
  }
1013
1013
  }
1014
1014
 
1015
- @media (hover: none) {
1015
+ @media not all and (hover: hover) and (pointer: fine) {
1016
1016
  .seed-action-button--variant_neutralOutline:is(:active, [data-active]) {
1017
1017
  background: var(--seed-color-bg-transparent-pressed);
1018
1018
  }
@@ -1044,13 +1044,13 @@
1044
1044
  background: #fff0;
1045
1045
  }
1046
1046
 
1047
- @media (hover: hover) {
1047
+ @media (hover: hover) and (pointer: fine) {
1048
1048
  .seed-action-button--variant_ghost:is(:hover, [data-hover]) {
1049
1049
  background: var(--seed-color-bg-transparent-pressed);
1050
1050
  }
1051
1051
  }
1052
1052
 
1053
- @media (hover: none) {
1053
+ @media not all and (hover: hover) and (pointer: fine) {
1054
1054
  .seed-action-button--variant_ghost:is(:active, [data-active]) {
1055
1055
  background: var(--seed-color-bg-transparent-pressed);
1056
1056
  }
@@ -1266,7 +1266,7 @@
1266
1266
  .seed-action-sheet__positioner {
1267
1267
  overscroll-behavior-y: none;
1268
1268
  --sheet-z-index: 2;
1269
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1269
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1270
1270
  justify-content: center;
1271
1271
  align-items: flex-end;
1272
1272
  display: flex;
@@ -1276,7 +1276,7 @@
1276
1276
 
1277
1277
  .seed-action-sheet__backdrop {
1278
1278
  background: var(--seed-color-bg-overlay);
1279
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1279
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1280
1280
  position: fixed;
1281
1281
  inset: 0;
1282
1282
  }
@@ -1305,7 +1305,7 @@
1305
1305
  .seed-action-sheet__content {
1306
1306
  box-sizing: border-box;
1307
1307
  word-break: break-all;
1308
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1308
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1309
1309
  background: var(--seed-color-bg-layer-floating);
1310
1310
  border-top-left-radius: var(--seed-radius-r5);
1311
1311
  border-top-right-radius: var(--seed-radius-r5);
@@ -2014,7 +2014,7 @@
2014
2014
  }
2015
2015
 
2016
2016
  .seed-app-screen__root {
2017
- --app-bar-offset: calc(var(--app-bar-height) + var(--seed-safe-area-top));
2017
+ --app-bar-offset: calc(var(--app-bar-height) + var(--seed-safe-area-top));
2018
2018
  width: 100%;
2019
2019
  height: 100%;
2020
2020
  position: absolute;
@@ -2074,10 +2074,10 @@
2074
2074
  }
2075
2075
 
2076
2076
  .seed-app-screen__root--transitionStyle_slideFromRightIOS {
2077
- --z-index-dim: calc(var(--z-index-base) + 0);
2078
- --z-index-layer: calc(var(--z-index-base) + 2);
2079
- --z-index-edge: calc(var(--z-index-base) + 4);
2080
- --z-index-app-bar: calc(var(--z-index-base) + 7);
2077
+ --z-index-dim: calc(var(--z-index-base) + 0);
2078
+ --z-index-layer: calc(var(--z-index-base) + 2);
2079
+ --z-index-edge: calc(var(--z-index-base) + 4);
2080
+ --z-index-app-bar: calc(var(--z-index-base) + 7);
2081
2081
  }
2082
2082
 
2083
2083
  .seed-app-screen__layer--transitionStyle_slideFromRightIOS {
@@ -2222,10 +2222,10 @@
2222
2222
  }
2223
2223
 
2224
2224
  .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
2225
- --z-index-dim: calc(var(--z-index-base) + 0);
2226
- --z-index-layer: calc(var(--z-index-base) + 3);
2227
- --z-index-edge: calc(var(--z-index-base) + 4);
2228
- --z-index-app-bar: calc(var(--z-index-base) + 4);
2225
+ --z-index-dim: calc(var(--z-index-base) + 0);
2226
+ --z-index-layer: calc(var(--z-index-base) + 3);
2227
+ --z-index-edge: calc(var(--z-index-base) + 4);
2228
+ --z-index-app-bar: calc(var(--z-index-base) + 4);
2229
2229
  }
2230
2230
 
2231
2231
  .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid {
@@ -2278,10 +2278,10 @@
2278
2278
  }
2279
2279
 
2280
2280
  .seed-app-screen__root--transitionStyle_fadeIn {
2281
- --z-index-dim: calc(var(--z-index-base) + 0);
2282
- --z-index-layer: calc(var(--z-index-base) + 3);
2283
- --z-index-edge: calc(var(--z-index-base) + 4);
2284
- --z-index-app-bar: calc(var(--z-index-base) + 4);
2281
+ --z-index-dim: calc(var(--z-index-base) + 0);
2282
+ --z-index-layer: calc(var(--z-index-base) + 3);
2283
+ --z-index-edge: calc(var(--z-index-base) + 4);
2284
+ --z-index-app-bar: calc(var(--z-index-base) + 4);
2285
2285
  }
2286
2286
 
2287
2287
  .seed-app-screen__dim--transitionStyle_fadeIn {
@@ -2832,7 +2832,7 @@
2832
2832
  .seed-bottom-sheet__positioner {
2833
2833
  overscroll-behavior-y: none;
2834
2834
  --sheet-z-index: 2;
2835
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2835
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2836
2836
  justify-content: center;
2837
2837
  align-items: flex-end;
2838
2838
  display: flex;
@@ -2842,7 +2842,7 @@
2842
2842
 
2843
2843
  .seed-bottom-sheet__backdrop {
2844
2844
  background: var(--seed-color-bg-overlay);
2845
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2845
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2846
2846
  position: fixed;
2847
2847
  inset: 0;
2848
2848
  }
@@ -2858,7 +2858,7 @@
2858
2858
  .seed-bottom-sheet__content {
2859
2859
  box-sizing: border-box;
2860
2860
  word-break: break-all;
2861
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2861
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2862
2862
  background: var(--seed-color-bg-layer-floating);
2863
2863
  border-top-left-radius: var(--seed-radius-r6);
2864
2864
  border-top-right-radius: var(--seed-radius-r6);
@@ -3065,13 +3065,13 @@
3065
3065
  transform: translateX(-50%);
3066
3066
  }
3067
3067
 
3068
- @media (hover: hover) {
3068
+ @media (hover: hover) and (pointer: fine) {
3069
3069
  .seed-bottom-sheet-handle__root:is(:hover, [data-hover]) {
3070
3070
  background-color: var(--seed-color-palette-gray-500);
3071
3071
  }
3072
3072
  }
3073
3073
 
3074
- @media (hover: none) {
3074
+ @media not all and (hover: hover) and (pointer: fine) {
3075
3075
  .seed-bottom-sheet-handle__root:is(:active, [data-active]) {
3076
3076
  background-color: var(--seed-color-palette-gray-500);
3077
3077
  }
@@ -3176,7 +3176,7 @@
3176
3176
  cursor: pointer;
3177
3177
  width: var(--seed-dimension-x10);
3178
3178
  height: var(--seed-dimension-x10);
3179
- margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
3179
+ margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
3180
3180
  border-radius: var(--seed-radius-r2_5);
3181
3181
  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3182
3182
  outline: var(--seed-dimension-x0_5) solid transparent;
@@ -3202,13 +3202,13 @@
3202
3202
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3203
3203
  }
3204
3204
 
3205
- @media (hover: hover) {
3205
+ @media (hover: hover) and (pointer: fine) {
3206
3206
  .seed-callout__root--tone_neutral:is(button, a):is(:hover, [data-hover]) {
3207
3207
  background-color: var(--seed-color-bg-neutral-weak-pressed);
3208
3208
  }
3209
3209
  }
3210
3210
 
3211
- @media (hover: none) {
3211
+ @media not all and (hover: hover) and (pointer: fine) {
3212
3212
  .seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
3213
3213
  background-color: var(--seed-color-bg-neutral-weak-pressed);
3214
3214
  }
@@ -3224,13 +3224,13 @@
3224
3224
  --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
3225
3225
  }
3226
3226
 
3227
- @media (hover: hover) {
3227
+ @media (hover: hover) and (pointer: fine) {
3228
3228
  .seed-callout__root--tone_informative:is(button, a):is(:hover, [data-hover]) {
3229
3229
  background-color: var(--seed-color-bg-informative-weak-pressed);
3230
3230
  }
3231
3231
  }
3232
3232
 
3233
- @media (hover: none) {
3233
+ @media not all and (hover: hover) and (pointer: fine) {
3234
3234
  .seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
3235
3235
  background-color: var(--seed-color-bg-informative-weak-pressed);
3236
3236
  }
@@ -3246,13 +3246,13 @@
3246
3246
  --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
3247
3247
  }
3248
3248
 
3249
- @media (hover: hover) {
3249
+ @media (hover: hover) and (pointer: fine) {
3250
3250
  .seed-callout__root--tone_positive:is(button, a):is(:hover, [data-hover]) {
3251
3251
  background-color: var(--seed-color-bg-positive-weak-pressed);
3252
3252
  }
3253
3253
  }
3254
3254
 
3255
- @media (hover: none) {
3255
+ @media not all and (hover: hover) and (pointer: fine) {
3256
3256
  .seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
3257
3257
  background-color: var(--seed-color-bg-positive-weak-pressed);
3258
3258
  }
@@ -3268,13 +3268,13 @@
3268
3268
  --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
3269
3269
  }
3270
3270
 
3271
- @media (hover: hover) {
3271
+ @media (hover: hover) and (pointer: fine) {
3272
3272
  .seed-callout__root--tone_warning:is(button, a):is(:hover, [data-hover]) {
3273
3273
  background-color: var(--seed-color-bg-warning-weak-pressed);
3274
3274
  }
3275
3275
  }
3276
3276
 
3277
- @media (hover: none) {
3277
+ @media not all and (hover: hover) and (pointer: fine) {
3278
3278
  .seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
3279
3279
  background-color: var(--seed-color-bg-warning-weak-pressed);
3280
3280
  }
@@ -3290,13 +3290,13 @@
3290
3290
  --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
3291
3291
  }
3292
3292
 
3293
- @media (hover: hover) {
3293
+ @media (hover: hover) and (pointer: fine) {
3294
3294
  .seed-callout__root--tone_critical:is(button, a):is(:hover, [data-hover]) {
3295
3295
  background-color: var(--seed-color-bg-critical-weak-pressed);
3296
3296
  }
3297
3297
  }
3298
3298
 
3299
- @media (hover: none) {
3299
+ @media not all and (hover: hover) and (pointer: fine) {
3300
3300
  .seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
3301
3301
  background-color: var(--seed-color-bg-critical-weak-pressed);
3302
3302
  }
@@ -3312,13 +3312,13 @@
3312
3312
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3313
3313
  }
3314
3314
 
3315
- @media (hover: hover) {
3315
+ @media (hover: hover) and (pointer: fine) {
3316
3316
  .seed-callout__root--tone_magic:is(button, a):is(:hover, [data-hover]) {
3317
3317
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
3318
3318
  }
3319
3319
  }
3320
3320
 
3321
- @media (hover: none) {
3321
+ @media not all and (hover: hover) and (pointer: fine) {
3322
3322
  .seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
3323
3323
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
3324
3324
  }
@@ -3361,7 +3361,7 @@
3361
3361
 
3362
3362
  .seed-checkbox__root--size_large {
3363
3363
  min-height: var(--seed-dimension-x9);
3364
- --checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
3364
+ --checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
3365
3365
  }
3366
3366
 
3367
3367
  .seed-checkbox__label--size_large {
@@ -3372,7 +3372,7 @@
3372
3372
 
3373
3373
  .seed-checkbox__root--size_medium {
3374
3374
  min-height: var(--seed-dimension-x8);
3375
- --checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
3375
+ --checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
3376
3376
  }
3377
3377
 
3378
3378
  .seed-checkbox__label--size_medium {
@@ -3422,13 +3422,13 @@
3422
3422
  border-width: 0;
3423
3423
  }
3424
3424
 
3425
- @media (hover: hover) {
3425
+ @media (hover: hover) and (pointer: fine) {
3426
3426
  .seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
3427
3427
  background: var(--seed-color-bg-transparent-pressed);
3428
3428
  }
3429
3429
  }
3430
3430
 
3431
- @media (hover: none) {
3431
+ @media not all and (hover: hover) and (pointer: fine) {
3432
3432
  .seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3433
3433
  background: var(--seed-color-bg-transparent-pressed);
3434
3434
  }
@@ -3447,13 +3447,13 @@
3447
3447
  color: var(--seed-color-fg-disabled);
3448
3448
  }
3449
3449
 
3450
- @media (hover: hover) {
3450
+ @media (hover: hover) and (pointer: fine) {
3451
3451
  .seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
3452
3452
  background: var(--seed-color-bg-transparent-pressed);
3453
3453
  }
3454
3454
  }
3455
3455
 
3456
- @media (hover: none) {
3456
+ @media not all and (hover: hover) and (pointer: fine) {
3457
3457
  .seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3458
3458
  background: var(--seed-color-bg-transparent-pressed);
3459
3459
  }
@@ -3485,13 +3485,13 @@
3485
3485
  background: var(--seed-color-bg-neutral-inverted);
3486
3486
  }
3487
3487
 
3488
- @media (hover: hover) {
3488
+ @media (hover: hover) and (pointer: fine) {
3489
3489
  .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
3490
3490
  background: var(--seed-color-bg-neutral-inverted-pressed);
3491
3491
  }
3492
3492
  }
3493
3493
 
3494
- @media (hover: none) {
3494
+ @media not all and (hover: hover) and (pointer: fine) {
3495
3495
  .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3496
3496
  background: var(--seed-color-bg-neutral-inverted-pressed);
3497
3497
  }
@@ -3505,13 +3505,13 @@
3505
3505
  background: var(--seed-color-bg-brand-solid);
3506
3506
  }
3507
3507
 
3508
- @media (hover: hover) {
3508
+ @media (hover: hover) and (pointer: fine) {
3509
3509
  .seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
3510
3510
  background: var(--seed-color-bg-brand-solid-pressed);
3511
3511
  }
3512
3512
  }
3513
3513
 
3514
- @media (hover: none) {
3514
+ @media not all and (hover: hover) and (pointer: fine) {
3515
3515
  .seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3516
3516
  background: var(--seed-color-bg-brand-solid-pressed);
3517
3517
  }
@@ -3521,13 +3521,13 @@
3521
3521
  color: var(--seed-color-palette-static-white);
3522
3522
  }
3523
3523
 
3524
- @media (hover: hover) {
3524
+ @media (hover: hover) and (pointer: fine) {
3525
3525
  .seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
3526
3526
  background: var(--seed-color-palette-gray-200);
3527
3527
  }
3528
3528
  }
3529
3529
 
3530
- @media (hover: none) {
3530
+ @media not all and (hover: hover) and (pointer: fine) {
3531
3531
  .seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3532
3532
  background: var(--seed-color-palette-gray-200);
3533
3533
  }
@@ -3537,13 +3537,13 @@
3537
3537
  color: var(--seed-color-fg-neutral);
3538
3538
  }
3539
3539
 
3540
- @media (hover: hover) {
3540
+ @media (hover: hover) and (pointer: fine) {
3541
3541
  .seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
3542
3542
  background: var(--seed-color-palette-carrot-200);
3543
3543
  }
3544
3544
  }
3545
3545
 
3546
- @media (hover: none) {
3546
+ @media not all and (hover: hover) and (pointer: fine) {
3547
3547
  .seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3548
3548
  background: var(--seed-color-palette-carrot-200);
3549
3549
  }
@@ -3646,25 +3646,25 @@
3646
3646
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
3647
3647
  }
3648
3648
 
3649
- @media (hover: hover) {
3649
+ @media (hover: hover) and (pointer: fine) {
3650
3650
  .seed-chip__root--variant_solid:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3651
3651
  background: var(--seed-color-bg-neutral-weak-alpha-pressed);
3652
3652
  }
3653
3653
  }
3654
3654
 
3655
- @media (hover: none) {
3655
+ @media not all and (hover: hover) and (pointer: fine) {
3656
3656
  .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3657
3657
  background: var(--seed-color-bg-neutral-weak-alpha-pressed);
3658
3658
  }
3659
3659
  }
3660
3660
 
3661
- @media (hover: hover) {
3661
+ @media (hover: hover) and (pointer: fine) {
3662
3662
  .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3663
3663
  background: var(--seed-color-bg-neutral-inverted-pressed);
3664
3664
  }
3665
3665
  }
3666
3666
 
3667
- @media (hover: none) {
3667
+ @media not all and (hover: hover) and (pointer: fine) {
3668
3668
  .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3669
3669
  background: var(--seed-color-bg-neutral-inverted-pressed);
3670
3670
  }
@@ -3692,13 +3692,13 @@
3692
3692
  --seed-icon-color: var(--seed-color-fg-neutral);
3693
3693
  }
3694
3694
 
3695
- @media (hover: hover) {
3695
+ @media (hover: hover) and (pointer: fine) {
3696
3696
  .seed-chip__root--variant_outlineStrong:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3697
3697
  background: var(--seed-color-bg-transparent-pressed);
3698
3698
  }
3699
3699
  }
3700
3700
 
3701
- @media (hover: none) {
3701
+ @media not all and (hover: hover) and (pointer: fine) {
3702
3702
  .seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3703
3703
  background: var(--seed-color-bg-transparent-pressed);
3704
3704
  }
@@ -3709,13 +3709,13 @@
3709
3709
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
3710
3710
  }
3711
3711
 
3712
- @media (hover: hover) {
3712
+ @media (hover: hover) and (pointer: fine) {
3713
3713
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3714
3714
  background: var(--seed-color-bg-neutral-inverted-pressed);
3715
3715
  }
3716
3716
  }
3717
3717
 
3718
- @media (hover: none) {
3718
+ @media not all and (hover: hover) and (pointer: fine) {
3719
3719
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3720
3720
  background: var(--seed-color-bg-neutral-inverted-pressed);
3721
3721
  }
@@ -3743,13 +3743,13 @@
3743
3743
  --seed-icon-color: var(--seed-color-fg-neutral);
3744
3744
  }
3745
3745
 
3746
- @media (hover: hover) {
3746
+ @media (hover: hover) and (pointer: fine) {
3747
3747
  .seed-chip__root--variant_outlineWeak:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3748
3748
  background: var(--seed-color-bg-transparent-pressed);
3749
3749
  }
3750
3750
  }
3751
3751
 
3752
- @media (hover: none) {
3752
+ @media not all and (hover: hover) and (pointer: fine) {
3753
3753
  .seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3754
3754
  background: var(--seed-color-bg-transparent-pressed);
3755
3755
  }
@@ -3760,13 +3760,13 @@
3760
3760
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
3761
3761
  }
3762
3762
 
3763
- @media (hover: hover) {
3763
+ @media (hover: hover) and (pointer: fine) {
3764
3764
  .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3765
3765
  background: var(--seed-color-bg-neutral-weak-pressed);
3766
3766
  }
3767
3767
  }
3768
3768
 
3769
- @media (hover: none) {
3769
+ @media not all and (hover: hover) and (pointer: fine) {
3770
3770
  .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3771
3771
  background: var(--seed-color-bg-neutral-weak-pressed);
3772
3772
  }
@@ -3944,25 +3944,25 @@
3944
3944
  color: var(--seed-color-fg-neutral-inverted);
3945
3945
  }
3946
3946
 
3947
- @media (hover: hover) {
3947
+ @media (hover: hover) and (pointer: fine) {
3948
3948
  .seed-chip-tabs__trigger--variant_neutralSolid:is(:hover, [data-hover]) {
3949
3949
  background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
3950
3950
  }
3951
3951
  }
3952
3952
 
3953
- @media (hover: none) {
3953
+ @media not all and (hover: hover) and (pointer: fine) {
3954
3954
  .seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
3955
3955
  background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
3956
3956
  }
3957
3957
  }
3958
3958
 
3959
- @media (hover: hover) {
3959
+ @media (hover: hover) and (pointer: fine) {
3960
3960
  .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
3961
3961
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
3962
3962
  }
3963
3963
  }
3964
3964
 
3965
- @media (hover: none) {
3965
+ @media not all and (hover: hover) and (pointer: fine) {
3966
3966
  .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3967
3967
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
3968
3968
  }
@@ -3990,25 +3990,25 @@
3990
3990
  border-color: #0000;
3991
3991
  }
3992
3992
 
3993
- @media (hover: hover) {
3993
+ @media (hover: hover) and (pointer: fine) {
3994
3994
  .seed-chip-tabs__trigger--variant_neutralOutline:is(:hover, [data-hover]) {
3995
3995
  background-color: var(--seed-color-bg-transparent-pressed);
3996
3996
  }
3997
3997
  }
3998
3998
 
3999
- @media (hover: none) {
3999
+ @media not all and (hover: hover) and (pointer: fine) {
4000
4000
  .seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
4001
4001
  background-color: var(--seed-color-bg-transparent-pressed);
4002
4002
  }
4003
4003
  }
4004
4004
 
4005
- @media (hover: hover) {
4005
+ @media (hover: hover) and (pointer: fine) {
4006
4006
  .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
4007
4007
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
4008
4008
  }
4009
4009
  }
4010
4010
 
4011
- @media (hover: none) {
4011
+ @media not all and (hover: hover) and (pointer: fine) {
4012
4012
  .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
4013
4013
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
4014
4014
  }
@@ -4034,25 +4034,25 @@
4034
4034
  color: var(--seed-color-palette-static-white);
4035
4035
  }
4036
4036
 
4037
- @media (hover: hover) {
4037
+ @media (hover: hover) and (pointer: fine) {
4038
4038
  .seed-chip-tabs__trigger--variant_brandSolid:is(:hover, [data-hover]) {
4039
4039
  background-color: var(--seed-color-bg-neutral-weak-pressed);
4040
4040
  }
4041
4041
  }
4042
4042
 
4043
- @media (hover: none) {
4043
+ @media not all and (hover: hover) and (pointer: fine) {
4044
4044
  .seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
4045
4045
  background-color: var(--seed-color-bg-neutral-weak-pressed);
4046
4046
  }
4047
4047
  }
4048
4048
 
4049
- @media (hover: hover) {
4049
+ @media (hover: hover) and (pointer: fine) {
4050
4050
  .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
4051
4051
  background-color: var(--seed-color-bg-brand-solid-pressed);
4052
4052
  }
4053
4053
  }
4054
4054
 
4055
- @media (hover: none) {
4055
+ @media not all and (hover: hover) and (pointer: fine) {
4056
4056
  .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
4057
4057
  background-color: var(--seed-color-bg-brand-solid-pressed);
4058
4058
  }
@@ -4181,13 +4181,13 @@
4181
4181
  --range-color: var(--seed-color-fg-neutral-inverted);
4182
4182
  }
4183
4183
 
4184
- @media (hover: hover) {
4184
+ @media (hover: hover) and (pointer: fine) {
4185
4185
  .seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
4186
4186
  background: var(--seed-color-bg-neutral-inverted-pressed);
4187
4187
  }
4188
4188
  }
4189
4189
 
4190
- @media (hover: none) {
4190
+ @media not all and (hover: hover) and (pointer: fine) {
4191
4191
  .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
4192
4192
  background: var(--seed-color-bg-neutral-inverted-pressed);
4193
4193
  }
@@ -4213,13 +4213,13 @@
4213
4213
  --range-color: var(--seed-color-fg-neutral);
4214
4214
  }
4215
4215
 
4216
- @media (hover: hover) {
4216
+ @media (hover: hover) and (pointer: fine) {
4217
4217
  .seed-contextual-floating-button--variant_layer:is(:hover, [data-hover]) {
4218
4218
  background: var(--seed-color-bg-layer-floating-pressed);
4219
4219
  }
4220
4220
  }
4221
4221
 
4222
- @media (hover: none) {
4222
+ @media not all and (hover: hover) and (pointer: fine) {
4223
4223
  .seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
4224
4224
  background: var(--seed-color-bg-layer-floating-pressed);
4225
4225
  }
@@ -4353,7 +4353,7 @@
4353
4353
  .seed-dialog__positioner {
4354
4354
  overscroll-behavior-y: none;
4355
4355
  --dialog-z-index: 2;
4356
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4356
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4357
4357
  justify-content: center;
4358
4358
  align-items: center;
4359
4359
  display: flex;
@@ -4363,7 +4363,7 @@
4363
4363
 
4364
4364
  .seed-dialog__backdrop {
4365
4365
  background: var(--seed-color-bg-overlay);
4366
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4366
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4367
4367
  position: fixed;
4368
4368
  inset: 0;
4369
4369
  }
@@ -4371,7 +4371,7 @@
4371
4371
  .seed-dialog__content {
4372
4372
  box-sizing: border-box;
4373
4373
  word-break: break-all;
4374
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4374
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4375
4375
  background: var(--seed-color-bg-layer-floating);
4376
4376
  max-width: 272px;
4377
4377
  margin: auto var(--seed-dimension-x8);
@@ -4463,7 +4463,7 @@
4463
4463
  .seed-extended-action-sheet__positioner {
4464
4464
  overscroll-behavior-y: none;
4465
4465
  --sheet-z-index: 2;
4466
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
4466
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
4467
4467
  justify-content: center;
4468
4468
  align-items: flex-end;
4469
4469
  display: flex;
@@ -4473,7 +4473,7 @@
4473
4473
 
4474
4474
  .seed-extended-action-sheet__backdrop {
4475
4475
  background: var(--seed-color-bg-overlay);
4476
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
4476
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
4477
4477
  position: fixed;
4478
4478
  inset: 0;
4479
4479
  }
@@ -4502,7 +4502,7 @@
4502
4502
  .seed-extended-action-sheet__content {
4503
4503
  box-sizing: border-box;
4504
4504
  word-break: break-all;
4505
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
4505
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
4506
4506
  background: var(--seed-color-bg-layer-floating);
4507
4507
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
4508
4508
  padding-block: var(--seed-dimension-x4);
@@ -4774,7 +4774,7 @@
4774
4774
  --seed-prefix-icon-size: var(--seed-dimension-x4);
4775
4775
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
4776
4776
  --seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
4777
- --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
4777
+ --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
4778
4778
  display: flex;
4779
4779
  }
4780
4780
 
@@ -4786,7 +4786,7 @@
4786
4786
  --seed-prefix-icon-size: var(--seed-dimension-x4);
4787
4787
  --seed-prefix-icon-color: var(--seed-color-fg-critical);
4788
4788
  --seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
4789
- --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
4789
+ --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
4790
4790
  display: flex;
4791
4791
  }
4792
4792
 
@@ -4894,13 +4894,13 @@
4894
4894
  overflow: hidden;
4895
4895
  }
4896
4896
 
4897
- @media (hover: hover) {
4897
+ @media (hover: hover) and (pointer: fine) {
4898
4898
  .seed-floating-action-button__root:is(:hover, [data-hover]) {
4899
4899
  background: var(--seed-color-bg-brand-solid-pressed);
4900
4900
  }
4901
4901
  }
4902
4902
 
4903
- @media (hover: none) {
4903
+ @media not all and (hover: hover) and (pointer: fine) {
4904
4904
  .seed-floating-action-button__root:is(:active, [data-active]) {
4905
4905
  background: var(--seed-color-bg-brand-solid-pressed);
4906
4906
  }
@@ -4958,7 +4958,7 @@
4958
4958
 
4959
4959
  .seed-help-bubble__positioner {
4960
4960
  --popover-z-index: 99;
4961
- z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
4961
+ z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
4962
4962
  }
4963
4963
 
4964
4964
  .seed-help-bubble__content {
@@ -5037,10 +5037,10 @@
5037
5037
  .seed-help-bubble__closeButton {
5038
5038
  cursor: pointer;
5039
5039
  padding: calc((38px - var(--seed-dimension-x3_5)) / 2);
5040
- margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
5040
+ margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
5041
5041
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
5042
- margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
5043
- margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
5042
+ margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
5043
+ margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
5044
5044
  color: var(--seed-color-fg-neutral-inverted);
5045
5045
  --seed-icon-size: var(--seed-dimension-x3_5);
5046
5046
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -5095,11 +5095,19 @@
5095
5095
  display: block;
5096
5096
  }
5097
5097
 
5098
+ .seed-image-frame__content:not([data-loading-state="loaded"]) {
5099
+ display: none;
5100
+ }
5101
+
5098
5102
  .seed-image-frame__fallback {
5099
5103
  width: 100%;
5100
5104
  height: 100%;
5101
5105
  }
5102
5106
 
5107
+ .seed-image-frame__fallback[data-loading-state="loaded"] {
5108
+ display: none;
5109
+ }
5110
+
5103
5111
  .seed-image-frame__root--stroke_true:after {
5104
5112
  content: "";
5105
5113
  pointer-events: none;
@@ -5153,10 +5161,10 @@
5153
5161
 
5154
5162
  .seed-image-frame-reaction-button__root:before {
5155
5163
  content: "";
5156
- top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5157
- right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5158
- bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5159
- left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5164
+ top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5165
+ right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5166
+ bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5167
+ left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5160
5168
  outline: var(--seed-dimension-x0_5) solid transparent;
5161
5169
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5162
5170
  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
@@ -5207,7 +5215,7 @@
5207
5215
  padding-block: var(--seed-dimension-x2_5);
5208
5216
  --seed-prefix-icon-size: var(--seed-dimension-x4);
5209
5217
  --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
5210
- --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
5218
+ --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
5211
5219
  --seed-suffix-icon-size: var(--seed-dimension-x4);
5212
5220
  --seed-suffix-icon-margin-left: var(--seed-dimension-x4);
5213
5221
  --seed-suffix-icon-align-self: center;
@@ -5264,8 +5272,8 @@
5264
5272
  .seed-inline-banner__closeButton {
5265
5273
  width: var(--seed-dimension-x10);
5266
5274
  height: var(--seed-dimension-x10);
5267
- margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
5268
- margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
5275
+ margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
5276
+ margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
5269
5277
  --seed-suffix-icon-margin-left: initial;
5270
5278
  cursor: pointer;
5271
5279
  background-color: #0000;
@@ -5397,13 +5405,13 @@
5397
5405
  background-color: var(--seed-color-bg-disabled);
5398
5406
  }
5399
5407
 
5400
- @media (hover: hover) {
5408
+ @media (hover: hover) and (pointer: fine) {
5401
5409
  .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:hover, [data-hover]) {
5402
5410
  background-color: var(--seed-color-bg-transparent-pressed);
5403
5411
  }
5404
5412
  }
5405
5413
 
5406
- @media (hover: none) {
5414
+ @media not all and (hover: hover) and (pointer: fine) {
5407
5415
  .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
5408
5416
  background-color: var(--seed-color-bg-transparent-pressed);
5409
5417
  }
@@ -5693,7 +5701,7 @@
5693
5701
  inset: 0;
5694
5702
  }
5695
5703
 
5696
- @media (hover: hover) {
5704
+ @media (hover: hover) and (pointer: fine) {
5697
5705
  .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
5698
5706
  background-color: var(--seed-color-bg-transparent-pressed);
5699
5707
  left: var(--seed-dimension-x1_5);
@@ -5702,7 +5710,7 @@
5702
5710
  }
5703
5711
  }
5704
5712
 
5705
- @media (hover: none) {
5713
+ @media not all and (hover: hover) and (pointer: fine) {
5706
5714
  .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
5707
5715
  background-color: var(--seed-color-bg-transparent-pressed);
5708
5716
  left: var(--seed-dimension-x1_5);
@@ -5711,7 +5719,7 @@
5711
5719
  }
5712
5720
  }
5713
5721
 
5714
- @media (hover: hover) {
5722
+ @media (hover: hover) and (pointer: fine) {
5715
5723
  .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
5716
5724
  background-color: var(--seed-color-bg-transparent-pressed);
5717
5725
  left: var(--seed-dimension-x1_5);
@@ -5720,7 +5728,7 @@
5720
5728
  }
5721
5729
  }
5722
5730
 
5723
- @media (hover: none) {
5731
+ @media not all and (hover: hover) and (pointer: fine) {
5724
5732
  .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
5725
5733
  background-color: var(--seed-color-bg-transparent-pressed);
5726
5734
  left: var(--seed-dimension-x1_5);
@@ -5756,25 +5764,25 @@
5756
5764
  background-color: var(--seed-color-bg-brand-weak);
5757
5765
  }
5758
5766
 
5759
- @media (hover: hover) {
5767
+ @media (hover: hover) and (pointer: fine) {
5760
5768
  .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
5761
5769
  background-color: var(--seed-color-bg-brand-weak-pressed);
5762
5770
  }
5763
5771
  }
5764
5772
 
5765
- @media (hover: none) {
5773
+ @media not all and (hover: hover) and (pointer: fine) {
5766
5774
  .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
5767
5775
  background-color: var(--seed-color-bg-brand-weak-pressed);
5768
5776
  }
5769
5777
  }
5770
5778
 
5771
- @media (hover: hover) {
5779
+ @media (hover: hover) and (pointer: fine) {
5772
5780
  .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
5773
5781
  background-color: var(--seed-color-bg-brand-weak-pressed);
5774
5782
  }
5775
5783
  }
5776
5784
 
5777
- @media (hover: none) {
5785
+ @media not all and (hover: hover) and (pointer: fine) {
5778
5786
  .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
5779
5787
  background-color: var(--seed-color-bg-brand-weak-pressed);
5780
5788
  }
@@ -5910,7 +5918,7 @@
5910
5918
  .seed-menu-sheet__positioner {
5911
5919
  overscroll-behavior-y: none;
5912
5920
  --sheet-z-index: 2;
5913
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5921
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5914
5922
  justify-content: center;
5915
5923
  align-items: flex-end;
5916
5924
  display: flex;
@@ -5920,7 +5928,7 @@
5920
5928
 
5921
5929
  .seed-menu-sheet__backdrop {
5922
5930
  background: var(--seed-color-bg-overlay);
5923
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5931
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5924
5932
  position: fixed;
5925
5933
  inset: 0;
5926
5934
  }
@@ -5928,12 +5936,12 @@
5928
5936
  .seed-menu-sheet__content {
5929
5937
  box-sizing: border-box;
5930
5938
  word-break: break-all;
5931
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5939
+ z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5932
5940
  background: var(--seed-color-bg-layer-floating);
5933
5941
  padding-left: var(--seed-dimension-spacing-x-global-gutter);
5934
5942
  padding-right: var(--seed-dimension-spacing-x-global-gutter);
5935
5943
  padding-top: var(--seed-dimension-x4);
5936
- padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
5944
+ padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
5937
5945
  border-top-left-radius: var(--seed-radius-r5);
5938
5946
  border-top-right-radius: var(--seed-radius-r5);
5939
5947
  flex-direction: column;
@@ -6009,13 +6017,13 @@
6009
6017
  display: flex;
6010
6018
  }
6011
6019
 
6012
- @media (hover: hover) {
6020
+ @media (hover: hover) and (pointer: fine) {
6013
6021
  .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
6014
6022
  background-color: var(--seed-color-bg-neutral-weak-pressed);
6015
6023
  }
6016
6024
  }
6017
6025
 
6018
- @media (hover: none) {
6026
+ @media not all and (hover: hover) and (pointer: fine) {
6019
6027
  .seed-menu-sheet__closeButton:is(:active, [data-active]) {
6020
6028
  background-color: var(--seed-color-bg-neutral-weak-pressed);
6021
6029
  }
@@ -6089,13 +6097,13 @@
6089
6097
  display: flex;
6090
6098
  }
6091
6099
 
6092
- @media (hover: hover) {
6100
+ @media (hover: hover) and (pointer: fine) {
6093
6101
  .seed-menu-sheet-item__root:is(:hover, [data-hover]) {
6094
6102
  background-color: var(--seed-color-bg-neutral-weak-pressed);
6095
6103
  }
6096
6104
  }
6097
6105
 
6098
- @media (hover: none) {
6106
+ @media not all and (hover: hover) and (pointer: fine) {
6099
6107
  .seed-menu-sheet-item__root:is(:active, [data-active]) {
6100
6108
  background-color: var(--seed-color-bg-neutral-weak-pressed);
6101
6109
  }
@@ -6255,7 +6263,7 @@
6255
6263
  padding-bottom: var(--seed-dimension-x2_5);
6256
6264
  --seed-prefix-icon-size: var(--seed-dimension-x4);
6257
6265
  --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
6258
- --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
6266
+ --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
6259
6267
  --seed-suffix-icon-size: var(--seed-dimension-x4);
6260
6268
  --seed-suffix-icon-margin-left: var(--seed-dimension-x2);
6261
6269
  --seed-suffix-icon-align-self: center;
@@ -6310,8 +6318,8 @@
6310
6318
 
6311
6319
  .seed-page-banner__button {
6312
6320
  cursor: pointer;
6313
- margin: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5 * -1);
6314
- padding: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5);
6321
+ margin: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5 * -1);
6322
+ padding: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5);
6315
6323
  font-family: inherit;
6316
6324
  font-size: var(--seed-font-size-t3);
6317
6325
  line-height: var(--seed-line-height-t3);
@@ -6334,8 +6342,8 @@
6334
6342
  .seed-page-banner__closeButton {
6335
6343
  width: var(--seed-dimension-x10);
6336
6344
  height: var(--seed-dimension-x10);
6337
- margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
6338
- margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
6345
+ margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
6346
+ margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
6339
6347
  --seed-suffix-icon-margin-left: initial;
6340
6348
  cursor: pointer;
6341
6349
  border-radius: var(--seed-radius-r1);
@@ -6364,13 +6372,13 @@
6364
6372
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
6365
6373
  }
6366
6374
 
6367
- @media (hover: hover) {
6375
+ @media (hover: hover) and (pointer: fine) {
6368
6376
  .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:hover, [data-hover]) {
6369
6377
  background-color: var(--seed-color-bg-neutral-weak-pressed);
6370
6378
  }
6371
6379
  }
6372
6380
 
6373
- @media (hover: none) {
6381
+ @media not all and (hover: hover) and (pointer: fine) {
6374
6382
  .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:active, [data-active]) {
6375
6383
  background-color: var(--seed-color-bg-neutral-weak-pressed);
6376
6384
  }
@@ -6386,13 +6394,13 @@
6386
6394
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
6387
6395
  }
6388
6396
 
6389
- @media (hover: hover) {
6397
+ @media (hover: hover) and (pointer: fine) {
6390
6398
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
6391
6399
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
6392
6400
  }
6393
6401
  }
6394
6402
 
6395
- @media (hover: none) {
6403
+ @media not all and (hover: hover) and (pointer: fine) {
6396
6404
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
6397
6405
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
6398
6406
  }
@@ -6408,13 +6416,13 @@
6408
6416
  --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
6409
6417
  }
6410
6418
 
6411
- @media (hover: hover) {
6419
+ @media (hover: hover) and (pointer: fine) {
6412
6420
  .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:hover, [data-hover]) {
6413
6421
  background-color: var(--seed-color-bg-informative-weak-pressed);
6414
6422
  }
6415
6423
  }
6416
6424
 
6417
- @media (hover: none) {
6425
+ @media not all and (hover: hover) and (pointer: fine) {
6418
6426
  .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:active, [data-active]) {
6419
6427
  background-color: var(--seed-color-bg-informative-weak-pressed);
6420
6428
  }
@@ -6430,13 +6438,13 @@
6430
6438
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
6431
6439
  }
6432
6440
 
6433
- @media (hover: hover) {
6441
+ @media (hover: hover) and (pointer: fine) {
6434
6442
  .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:hover, [data-hover]) {
6435
6443
  background-color: var(--seed-color-bg-informative-solid-pressed);
6436
6444
  }
6437
6445
  }
6438
6446
 
6439
- @media (hover: none) {
6447
+ @media not all and (hover: hover) and (pointer: fine) {
6440
6448
  .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:active, [data-active]) {
6441
6449
  background-color: var(--seed-color-bg-informative-solid-pressed);
6442
6450
  }
@@ -6452,13 +6460,13 @@
6452
6460
  --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
6453
6461
  }
6454
6462
 
6455
- @media (hover: hover) {
6463
+ @media (hover: hover) and (pointer: fine) {
6456
6464
  .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:hover, [data-hover]) {
6457
6465
  background-color: var(--seed-color-bg-positive-weak-pressed);
6458
6466
  }
6459
6467
  }
6460
6468
 
6461
- @media (hover: none) {
6469
+ @media not all and (hover: hover) and (pointer: fine) {
6462
6470
  .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:active, [data-active]) {
6463
6471
  background-color: var(--seed-color-bg-positive-weak-pressed);
6464
6472
  }
@@ -6474,13 +6482,13 @@
6474
6482
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
6475
6483
  }
6476
6484
 
6477
- @media (hover: hover) {
6485
+ @media (hover: hover) and (pointer: fine) {
6478
6486
  .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:hover, [data-hover]) {
6479
6487
  background-color: var(--seed-color-bg-positive-solid-pressed);
6480
6488
  }
6481
6489
  }
6482
6490
 
6483
- @media (hover: none) {
6491
+ @media not all and (hover: hover) and (pointer: fine) {
6484
6492
  .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:active, [data-active]) {
6485
6493
  background-color: var(--seed-color-bg-positive-solid-pressed);
6486
6494
  }
@@ -6496,13 +6504,13 @@
6496
6504
  --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
6497
6505
  }
6498
6506
 
6499
- @media (hover: hover) {
6507
+ @media (hover: hover) and (pointer: fine) {
6500
6508
  .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:hover, [data-hover]) {
6501
6509
  background-color: var(--seed-color-bg-warning-weak-pressed);
6502
6510
  }
6503
6511
  }
6504
6512
 
6505
- @media (hover: none) {
6513
+ @media not all and (hover: hover) and (pointer: fine) {
6506
6514
  .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:active, [data-active]) {
6507
6515
  background-color: var(--seed-color-bg-warning-weak-pressed);
6508
6516
  }
@@ -6518,13 +6526,13 @@
6518
6526
  --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
6519
6527
  }
6520
6528
 
6521
- @media (hover: hover) {
6529
+ @media (hover: hover) and (pointer: fine) {
6522
6530
  .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:hover, [data-hover]) {
6523
6531
  background-color: var(--seed-color-bg-warning-solid-pressed);
6524
6532
  }
6525
6533
  }
6526
6534
 
6527
- @media (hover: none) {
6535
+ @media not all and (hover: hover) and (pointer: fine) {
6528
6536
  .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:active, [data-active]) {
6529
6537
  background-color: var(--seed-color-bg-warning-solid-pressed);
6530
6538
  }
@@ -6540,13 +6548,13 @@
6540
6548
  --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
6541
6549
  }
6542
6550
 
6543
- @media (hover: hover) {
6551
+ @media (hover: hover) and (pointer: fine) {
6544
6552
  .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:hover, [data-hover]) {
6545
6553
  background-color: var(--seed-color-bg-critical-weak-pressed);
6546
6554
  }
6547
6555
  }
6548
6556
 
6549
- @media (hover: none) {
6557
+ @media not all and (hover: hover) and (pointer: fine) {
6550
6558
  .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:active, [data-active]) {
6551
6559
  background-color: var(--seed-color-bg-critical-weak-pressed);
6552
6560
  }
@@ -6562,13 +6570,13 @@
6562
6570
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
6563
6571
  }
6564
6572
 
6565
- @media (hover: hover) {
6573
+ @media (hover: hover) and (pointer: fine) {
6566
6574
  .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:hover, [data-hover]) {
6567
6575
  background-color: var(--seed-color-bg-critical-solid-pressed);
6568
6576
  }
6569
6577
  }
6570
6578
 
6571
- @media (hover: none) {
6579
+ @media not all and (hover: hover) and (pointer: fine) {
6572
6580
  .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:active, [data-active]) {
6573
6581
  background-color: var(--seed-color-bg-critical-solid-pressed);
6574
6582
  }
@@ -6584,13 +6592,13 @@
6584
6592
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
6585
6593
  }
6586
6594
 
6587
- @media (hover: hover) {
6595
+ @media (hover: hover) and (pointer: fine) {
6588
6596
  .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:hover, [data-hover]) {
6589
6597
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
6590
6598
  }
6591
6599
  }
6592
6600
 
6593
- @media (hover: none) {
6601
+ @media not all and (hover: hover) and (pointer: fine) {
6594
6602
  .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
6595
6603
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
6596
6604
  }
@@ -6658,7 +6666,7 @@
6658
6666
  }
6659
6667
 
6660
6668
  .seed-pull-to-refresh__indicator {
6661
- transform: translateY(min(calc(var(--ptr-displacement, 0) - var(--ptr-size)), 0px));
6669
+ transform: translateY(min(calc(var(--ptr-displacement, 0) - var(--ptr-size)), 0px));
6662
6670
  transition: transform var(--seed-duration-d6);
6663
6671
  justify-content: center;
6664
6672
  align-items: center;
@@ -6702,7 +6710,7 @@
6702
6710
 
6703
6711
  .seed-radio__root--size_large {
6704
6712
  min-height: var(--seed-dimension-x9);
6705
- --radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
6713
+ --radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
6706
6714
  }
6707
6715
 
6708
6716
  .seed-radio__label--size_large {
@@ -6713,7 +6721,7 @@
6713
6721
 
6714
6722
  .seed-radio__root--size_medium {
6715
6723
  min-height: var(--seed-dimension-x8);
6716
- --radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
6724
+ --radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
6717
6725
  }
6718
6726
 
6719
6727
  .seed-radio__label--size_medium {
@@ -6745,13 +6753,13 @@
6745
6753
  position: relative;
6746
6754
  }
6747
6755
 
6748
- @media (hover: hover) {
6756
+ @media (hover: hover) and (pointer: fine) {
6749
6757
  .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
6750
6758
  background-color: var(--seed-color-bg-transparent-pressed);
6751
6759
  }
6752
6760
  }
6753
6761
 
6754
- @media (hover: none) {
6762
+ @media not all and (hover: hover) and (pointer: fine) {
6755
6763
  .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6756
6764
  background-color: var(--seed-color-bg-transparent-pressed);
6757
6765
  }
@@ -6793,13 +6801,13 @@
6793
6801
  background-color: var(--seed-color-bg-neutral-inverted);
6794
6802
  }
6795
6803
 
6796
- @media (hover: hover) {
6804
+ @media (hover: hover) and (pointer: fine) {
6797
6805
  .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
6798
6806
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
6799
6807
  }
6800
6808
  }
6801
6809
 
6802
- @media (hover: none) {
6810
+ @media not all and (hover: hover) and (pointer: fine) {
6803
6811
  .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
6804
6812
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
6805
6813
  }
@@ -6813,13 +6821,13 @@
6813
6821
  background-color: var(--seed-color-bg-brand-solid);
6814
6822
  }
6815
6823
 
6816
- @media (hover: hover) {
6824
+ @media (hover: hover) and (pointer: fine) {
6817
6825
  .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
6818
6826
  background-color: var(--seed-color-bg-brand-solid-pressed);
6819
6827
  }
6820
6828
  }
6821
6829
 
6822
- @media (hover: none) {
6830
+ @media not all and (hover: hover) and (pointer: fine) {
6823
6831
  .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
6824
6832
  background-color: var(--seed-color-bg-brand-solid-pressed);
6825
6833
  }
@@ -6896,13 +6904,13 @@
6896
6904
  --seed-count-color: var(--seed-color-fg-neutral);
6897
6905
  }
6898
6906
 
6899
- @media (hover: hover) {
6907
+ @media (hover: hover) and (pointer: fine) {
6900
6908
  .seed-reaction-button:is(:hover, [data-hover]) {
6901
6909
  background: var(--seed-color-bg-transparent-pressed);
6902
6910
  }
6903
6911
  }
6904
6912
 
6905
- @media (hover: none) {
6913
+ @media not all and (hover: hover) and (pointer: fine) {
6906
6914
  .seed-reaction-button:is(:active, [data-active]) {
6907
6915
  background: var(--seed-color-bg-transparent-pressed);
6908
6916
  }
@@ -6916,13 +6924,13 @@
6916
6924
  --seed-count-color: var(--seed-color-fg-brand);
6917
6925
  }
6918
6926
 
6919
- @media (hover: hover) {
6927
+ @media (hover: hover) and (pointer: fine) {
6920
6928
  .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
6921
6929
  background: var(--seed-color-bg-transparent-pressed);
6922
6930
  }
6923
6931
  }
6924
6932
 
6925
- @media (hover: none) {
6933
+ @media not all and (hover: hover) and (pointer: fine) {
6926
6934
  .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
6927
6935
  background: var(--seed-color-bg-transparent-pressed);
6928
6936
  }
@@ -7087,28 +7095,28 @@
7087
7095
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
7088
7096
  }
7089
7097
 
7090
- @media (hover: hover) {
7098
+ @media (hover: hover) and (pointer: fine) {
7091
7099
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
7092
7100
  background-color: var(--seed-color-palette-gray-100);
7093
7101
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
7094
7102
  }
7095
7103
  }
7096
7104
 
7097
- @media (hover: none) {
7105
+ @media not all and (hover: hover) and (pointer: fine) {
7098
7106
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
7099
7107
  background-color: var(--seed-color-palette-gray-100);
7100
7108
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
7101
7109
  }
7102
7110
  }
7103
7111
 
7104
- @media (hover: hover) {
7112
+ @media (hover: hover) and (pointer: fine) {
7105
7113
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:hover, [data-hover]) {
7106
7114
  background-color: var(--seed-color-bg-neutral-weak-pressed);
7107
7115
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
7108
7116
  }
7109
7117
  }
7110
7118
 
7111
- @media (hover: none) {
7119
+ @media not all and (hover: hover) and (pointer: fine) {
7112
7120
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
7113
7121
  background-color: var(--seed-color-bg-neutral-weak-pressed);
7114
7122
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
@@ -7137,13 +7145,13 @@
7137
7145
  inset: 0;
7138
7146
  }
7139
7147
 
7140
- @media (hover: hover) {
7148
+ @media (hover: hover) and (pointer: fine) {
7141
7149
  .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
7142
7150
  background-color: var(--seed-color-bg-transparent-pressed);
7143
7151
  }
7144
7152
  }
7145
7153
 
7146
- @media (hover: none) {
7154
+ @media not all and (hover: hover) and (pointer: fine) {
7147
7155
  .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
7148
7156
  background-color: var(--seed-color-bg-transparent-pressed);
7149
7157
  }
@@ -7283,13 +7291,13 @@
7283
7291
  inset: 0;
7284
7292
  }
7285
7293
 
7286
- @media (hover: hover) {
7294
+ @media (hover: hover) and (pointer: fine) {
7287
7295
  .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
7288
7296
  color: var(--seed-color-fg-neutral-subtle);
7289
7297
  }
7290
7298
  }
7291
7299
 
7292
- @media (hover: none) {
7300
+ @media not all and (hover: hover) and (pointer: fine) {
7293
7301
  .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
7294
7302
  color: var(--seed-color-fg-neutral-subtle);
7295
7303
  }
@@ -7587,12 +7595,12 @@
7587
7595
  }
7588
7596
 
7589
7597
  .seed-slider__valueIndicatorArrow[data-dir="ltr"] {
7590
- left: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
7598
+ left: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
7591
7599
  transform: translateX(-50%);
7592
7600
  }
7593
7601
 
7594
7602
  .seed-slider__valueIndicatorArrow[data-dir="rtl"] {
7595
- right: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
7603
+ right: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
7596
7604
  transform: translateX(50%);
7597
7605
  }
7598
7606
 
@@ -7813,7 +7821,7 @@
7813
7821
  z-index: 2147483647;
7814
7822
  left: calc(env(safe-area-inset-left, 0px));
7815
7823
  right: calc(env(safe-area-inset-right, 0px));
7816
- bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
7824
+ bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
7817
7825
  padding-left: var(--seed-dimension-x2);
7818
7826
  padding-right: var(--seed-dimension-x2);
7819
7827
  padding-top: var(--seed-dimension-x2);
@@ -7854,7 +7862,7 @@
7854
7862
  .seed-switch__root--size_16 {
7855
7863
  min-height: var(--seed-dimension-x6);
7856
7864
  gap: var(--seed-dimension-x1_5);
7857
- --switchmark-margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
7865
+ --switchmark-margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
7858
7866
  }
7859
7867
 
7860
7868
  .seed-switch__label--size_16 {
@@ -7866,7 +7874,7 @@
7866
7874
  .seed-switch__root--size_24 {
7867
7875
  min-height: var(--seed-dimension-x6);
7868
7876
  gap: var(--seed-dimension-x2);
7869
- --switchmark-margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
7877
+ --switchmark-margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
7870
7878
  }
7871
7879
 
7872
7880
  .seed-switch__label--size_24 {
@@ -7878,7 +7886,7 @@
7878
7886
  .seed-switch__root--size_32 {
7879
7887
  min-height: var(--seed-dimension-x8);
7880
7888
  gap: var(--seed-dimension-x2_5);
7881
- --switchmark-margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
7889
+ --switchmark-margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
7882
7890
  }
7883
7891
 
7884
7892
  .seed-switch__label--size_32 {
@@ -7953,7 +7961,7 @@
7953
7961
  }
7954
7962
 
7955
7963
  .seed-switchmark__thumb--size_16:is(:checked, [data-checked]) {
7956
- transform: scale(1)translateX(10px);
7964
+ transform: scale(1) translateX(10px);
7957
7965
  }
7958
7966
 
7959
7967
  .seed-switchmark__root--size_24 {
@@ -7968,7 +7976,7 @@
7968
7976
  }
7969
7977
 
7970
7978
  .seed-switchmark__thumb--size_24:is(:checked, [data-checked]) {
7971
- transform: scale(1)translateX(14px);
7979
+ transform: scale(1) translateX(14px);
7972
7980
  }
7973
7981
 
7974
7982
  .seed-switchmark__root--size_32 {
@@ -7983,7 +7991,7 @@
7983
7991
  }
7984
7992
 
7985
7993
  .seed-switchmark__thumb--size_32:is(:checked, [data-checked]) {
7986
- transform: scale(1)translateX(20px);
7994
+ transform: scale(1) translateX(20px);
7987
7995
  }
7988
7996
 
7989
7997
  .seed-tabs__root {
@@ -8100,8 +8108,8 @@
8100
8108
  }
8101
8109
 
8102
8110
  .seed-tabs__indicator--triggerLayout_fill {
8103
- left: calc(var(--indicator-left, 0px) + var(--seed-dimension-spacing-x-global-gutter));
8104
- width: calc(var(--indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter));
8111
+ left: calc(var(--indicator-left, 0px) + var(--seed-dimension-spacing-x-global-gutter));
8112
+ width: calc(var(--indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter));
8105
8113
  }
8106
8114
 
8107
8115
  .seed-tabs__trigger--triggerLayout_fill {
@@ -8120,8 +8128,8 @@
8120
8128
  }
8121
8129
 
8122
8130
  .seed-tabs__indicator--triggerLayout_hug {
8123
- left: calc(var(--indicator-left, 0px) + 0px);
8124
- width: calc(var(--indicator-width, 0px) - 2 * 0px);
8131
+ left: calc(var(--indicator-left, 0px) + 0px);
8132
+ width: calc(var(--indicator-width, 0px) - 2 * 0px);
8125
8133
  }
8126
8134
 
8127
8135
  .seed-tabs__trigger--triggerLayout_hug:is([aria-selected="true"], [data-selected])[data-ssr]:after {
@@ -8989,13 +8997,13 @@
8989
8997
  --range-color: var(--seed-color-palette-static-white);
8990
8998
  }
8991
8999
 
8992
- @media (hover: hover) {
9000
+ @media (hover: hover) and (pointer: fine) {
8993
9001
  .seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
8994
9002
  background: var(--seed-color-bg-brand-solid-pressed);
8995
9003
  }
8996
9004
  }
8997
9005
 
8998
- @media (hover: none) {
9006
+ @media not all and (hover: hover) and (pointer: fine) {
8999
9007
  .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
9000
9008
  background: var(--seed-color-bg-brand-solid-pressed);
9001
9009
  }
@@ -9010,13 +9018,13 @@
9010
9018
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
9011
9019
  }
9012
9020
 
9013
- @media (hover: hover) {
9021
+ @media (hover: hover) and (pointer: fine) {
9014
9022
  .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
9015
9023
  background: var(--seed-color-bg-neutral-weak-pressed);
9016
9024
  }
9017
9025
  }
9018
9026
 
9019
- @media (hover: none) {
9027
+ @media not all and (hover: hover) and (pointer: fine) {
9020
9028
  .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
9021
9029
  background: var(--seed-color-bg-neutral-weak-pressed);
9022
9030
  }
@@ -9049,13 +9057,13 @@
9049
9057
  --range-color: var(--seed-color-fg-neutral);
9050
9058
  }
9051
9059
 
9052
- @media (hover: hover) {
9060
+ @media (hover: hover) and (pointer: fine) {
9053
9061
  .seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
9054
9062
  background: var(--seed-color-bg-neutral-weak-pressed);
9055
9063
  }
9056
9064
  }
9057
9065
 
9058
- @media (hover: none) {
9066
+ @media not all and (hover: hover) and (pointer: fine) {
9059
9067
  .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
9060
9068
  background: var(--seed-color-bg-neutral-weak-pressed);
9061
9069
  }
@@ -9070,13 +9078,13 @@
9070
9078
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
9071
9079
  }
9072
9080
 
9073
- @media (hover: hover) {
9081
+ @media (hover: hover) and (pointer: fine) {
9074
9082
  .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
9075
9083
  background: var(--seed-color-bg-neutral-weak-pressed);
9076
9084
  }
9077
9085
  }
9078
9086
 
9079
- @media (hover: none) {
9087
+ @media not all and (hover: hover) and (pointer: fine) {
9080
9088
  .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
9081
9089
  background: var(--seed-color-bg-neutral-weak-pressed);
9082
9090
  }
@@ -9133,14 +9141,18 @@
9133
9141
  @keyframes seed-enter {
9134
9142
  from {
9135
9143
  opacity: var(--seed-enter-opacity, 1);
9136
- transform: translate3d(var(--seed-enter-translate-x, 0), var(--seed-enter-translate-y, 0), 0) scale3d(var(--seed-enter-scale, 1), var(--seed-enter-scale, 1), var(--seed-enter-scale, 1)) rotate(var(--seed-enter-rotate, 0));
9144
+ transform: translate3d(var(--seed-enter-translate-x, 0), var(--seed-enter-translate-y, 0), 0)
9145
+ scale3d(var(--seed-enter-scale, 1), var(--seed-enter-scale, 1), var(--seed-enter-scale, 1))
9146
+ rotate(var(--seed-enter-rotate, 0));
9137
9147
  }
9138
9148
  }
9139
9149
 
9140
9150
  @keyframes seed-exit {
9141
9151
  to {
9142
9152
  opacity: var(--seed-exit-opacity, 1);
9143
- transform: translate3d(var(--seed-exit-translate-x, 0), var(--seed-exit-translate-y, 0), 0) scale3d(var(--seed-exit-scale, 1), var(--seed-exit-scale, 1), var(--seed-exit-scale, 1)) rotate(var(--seed-exit-rotate, 0));
9153
+ transform: translate3d(var(--seed-exit-translate-x, 0), var(--seed-exit-translate-y, 0), 0)
9154
+ scale3d(var(--seed-exit-scale, 1), var(--seed-exit-scale, 1), var(--seed-exit-scale, 1))
9155
+ rotate(var(--seed-exit-rotate, 0));
9144
9156
  }
9145
9157
  }
9146
9158