@m4l/gclick 0.32.0 → 0.33.0

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 (46) hide show
  1. package/components/VideoPlayer/VideoPlayer.d.ts +7 -6
  2. package/components/VideoPlayer/VideoPlayer.d.ts.map +1 -1
  3. package/components/VideoPlayer/VideoPlayer.styles.d.ts +4 -5
  4. package/components/VideoPlayer/VideoPlayer.styles.d.ts.map +1 -1
  5. package/components/VideoPlayer/VideoPlayer.styles.js +27 -28
  6. package/components/VideoPlayer/VideojsDefaultSkin.styles.d.ts.map +1 -1
  7. package/components/VideoPlayer/VideojsDefaultSkin.styles.js +330 -397
  8. package/components/VideoPlayer/{VideojsMinimalSkin.styles.d.ts → VideojsNeutralSkin.styles.d.ts} +2 -2
  9. package/components/VideoPlayer/VideojsNeutralSkin.styles.d.ts.map +1 -0
  10. package/components/VideoPlayer/{VideojsMinimalSkin.styles.js → VideojsNeutralSkin.styles.js} +618 -672
  11. package/components/VideoPlayer/constants.d.ts +24 -7
  12. package/components/VideoPlayer/constants.d.ts.map +1 -1
  13. package/components/VideoPlayer/constants.js +12 -8
  14. package/components/VideoPlayer/hlsSource.d.ts +17 -9
  15. package/components/VideoPlayer/hlsSource.d.ts.map +1 -1
  16. package/components/VideoPlayer/hooks/useAccessErrorReporter.d.ts +4 -4
  17. package/components/VideoPlayer/hooks/useAccessErrorReporter.js +9 -9
  18. package/components/VideoPlayer/hooks/useMediaReadiness.d.ts +6 -7
  19. package/components/VideoPlayer/hooks/useMediaReadiness.d.ts.map +1 -1
  20. package/components/VideoPlayer/hooks/usePlayerControl.d.ts +6 -5
  21. package/components/VideoPlayer/hooks/usePlayerControl.d.ts.map +1 -1
  22. package/components/VideoPlayer/hooks/usePlayerControl.js +14 -11
  23. package/components/VideoPlayer/hooks/usePlayerEvents.d.ts +9 -4
  24. package/components/VideoPlayer/hooks/usePlayerEvents.d.ts.map +1 -1
  25. package/components/VideoPlayer/subcomponents/GclickVideoSkin.d.ts +7 -6
  26. package/components/VideoPlayer/subcomponents/GclickVideoSkin.d.ts.map +1 -1
  27. package/components/VideoPlayer/subcomponents/GclickVideoSkin.js +35 -35
  28. package/components/VideoPlayer/subcomponents/VideoPlayerStage.d.ts +1 -1
  29. package/components/VideoPlayer/subcomponents/VideoPlayerStage.d.ts.map +1 -1
  30. package/components/VideoPlayer/subcomponents/VideoPlayerStage.js +16 -15
  31. package/components/VideoPlayer/subcomponents/skin/LiveButton.d.ts +24 -0
  32. package/components/VideoPlayer/subcomponents/skin/LiveButton.d.ts.map +1 -0
  33. package/components/VideoPlayer/subcomponents/skin/LiveButton.js +53 -0
  34. package/components/VideoPlayer/subcomponents/skin/MinimalVideoControls.d.ts +2 -2
  35. package/components/VideoPlayer/subcomponents/skin/VideoErrorDialog.d.ts +3 -3
  36. package/components/VideoPlayer/subcomponents/skin/VideoStatusIndicators.d.ts +2 -2
  37. package/components/VideoPlayer/subcomponents/skin/buttons.d.ts +2 -2
  38. package/components/VideoPlayer/subcomponents/skin/buttons.d.ts.map +1 -1
  39. package/components/VideoPlayer/subcomponents/skin/buttons.js +14 -13
  40. package/components/VideoPlayer/subcomponents/skin/skinVariant.d.ts +3 -0
  41. package/components/VideoPlayer/subcomponents/skin/skinVariant.d.ts.map +1 -1
  42. package/components/VideoPlayer/subcomponents/skin/skinVariant.js +53 -51
  43. package/components/VideoPlayer/types.d.ts +7 -5
  44. package/components/VideoPlayer/types.d.ts.map +1 -1
  45. package/package.json +5 -5
  46. package/components/VideoPlayer/VideojsMinimalSkin.styles.d.ts.map +0 -1
@@ -1,13 +1,13 @@
1
1
  const e = {
2
2
  "@layer base": {
3
- "& .media-skin": {
3
+ "& :where(.media-skin)": {
4
4
  textAlign: "start",
5
5
  textTransform: "none",
6
6
  letterSpacing: "normal",
7
7
  fontStyle: "normal",
8
8
  fontWeight: "400"
9
9
  },
10
- "& .media-skin, & :where(.media-skin) *, & :where(.media-skin) :before, & :where(.media-skin) :after": {
10
+ "& :where(.media-skin), & :where(.media-skin) *, & :where(.media-skin) :before, & :where(.media-skin) :after": {
11
11
  boxSizing: "border-box",
12
12
  border: "0 solid",
13
13
  margin: "0",
@@ -68,25 +68,34 @@ const e = {
68
68
  }
69
69
  },
70
70
  "@layer components": {
71
- "& .media-skin": {
71
+ "& :where(.media-skin)": {
72
72
  "--media-caption-track-duration": "var(--media-duration-controls)",
73
73
  "--media-caption-track-delay": "25ms",
74
- "--media-caption-track-y": "calc(var(--media-spacing) * -2)"
74
+ "--media-caption-track-y": "calc(var(--media-spacing) * -3)"
75
75
  },
76
76
  "& :where(.media-skin) video::-webkit-media-text-track-container": {
77
77
  zIndex: "20",
78
- scale: "0.98",
78
+ scale: ".98",
79
79
  translate: "0 var(--media-caption-track-y)",
80
80
  transition: "translate var(--media-caption-track-duration) ease-out",
81
81
  transitionDelay: "var(--media-caption-track-delay)",
82
82
  fontFamily: "inherit"
83
83
  },
84
- "& .media-skin[data-controls-visible]": {
84
+ "& :where(.media-skin)[data-controls-visible]": {
85
85
  "--media-caption-track-y": "var(--media-caption-controls-y)"
86
86
  },
87
- "@container media-root (width >= 42rem)": {
88
- '& .media-skin[data-theme="minimal"][data-controls-visible] video': {
89
- "--media-caption-track-y": "calc(var(--media-spacing) * -12)"
87
+ '& :where(.media-skin)[data-theme="compat"] video::-webkit-media-text-track-container': {
88
+ translate: "none",
89
+ scale: "none",
90
+ transform: "translateY(var(--media-caption-track-y, 0px)) scale(.98)",
91
+ transitionProperty: "transform"
92
+ },
93
+ "@container media-root (width < 42rem)": {
94
+ '& :where(.media-skin)[data-theme="default"][data-controls-visible] video': {
95
+ "--media-caption-track-y": "calc(var(--media-spacing) * -14)"
96
+ },
97
+ '& :where(.media-skin)[data-theme="neutral"][data-controls-visible] video': {
98
+ "--media-caption-track-y": "calc(var(--media-spacing) * -17)"
90
99
  }
91
100
  },
92
101
  '& :where(.media-skin[data-theme="default"]) .media-button': {
@@ -112,7 +121,7 @@ const e = {
112
121
  flexShrink: "0",
113
122
  placeItems: "center",
114
123
  padding: "0",
115
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
124
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
116
125
  display: "grid"
117
126
  },
118
127
  "@media (hover: hover)": {
@@ -126,11 +135,11 @@ const e = {
126
135
  outlineColor: "var(--media-ring)"
127
136
  },
128
137
  '& :where(.media-skin[data-theme="default"]) .media-button:not([aria-disabled="true"]):active': {
129
- scale: "0.97"
138
+ scale: ".97"
130
139
  },
131
140
  '& :where(.media-skin[data-theme="default"]) .media-button[aria-disabled="true"]': {
132
141
  cursor: "not-allowed",
133
- opacity: "0.5"
142
+ opacity: ".5"
134
143
  },
135
144
  "@media (prefers-reduced-motion: reduce)": {
136
145
  '& :where(.media-skin[data-theme="default"]) .media-button': {
@@ -139,7 +148,7 @@ const e = {
139
148
  scale: "1"
140
149
  }
141
150
  },
142
- '& :where(.media-skin[data-theme="default"]) .media-button:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where( :not([aria-disabled="true"]) )': {
151
+ '& :where(.media-skin[data-theme="default"]) .media-button:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
143
152
  backgroundColor: "var(--media-accent)",
144
153
  color: "var(--media-accent-foreground)"
145
154
  },
@@ -154,14 +163,15 @@ const e = {
154
163
  borderRadius: "inherit",
155
164
  backgroundColor: "var(--media-backdrop)",
156
165
  opacity: "1",
166
+ WebkitBackdropFilter: "var(--media-backdrop-filter-dialog)",
157
167
  backdropFilter: "var(--media-backdrop-filter-dialog)",
158
168
  transitionProperty: "opacity",
159
- transitionDuration: "0.15s",
169
+ transitionDuration: ".15s",
160
170
  transitionDelay: "var(--media-delay-dialog)"
161
171
  },
162
172
  {
163
173
  transitionDuration: "var(--media-duration-dialog)",
164
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
174
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
165
175
  position: "absolute",
166
176
  inset: "0"
167
177
  }
@@ -203,13 +213,13 @@ const e = {
203
213
  },
204
214
  '& :where(.media-skin[data-theme="default"]) .media-dialog-description': {
205
215
  overflowWrap: "anywhere",
206
- opacity: "0.7",
216
+ opacity: ".7",
207
217
  margin: "0"
208
218
  },
209
219
  '& :where(.media-skin[data-theme="default"]) .media-dialog-popup': [
210
220
  {
211
221
  zIndex: "50",
212
- maxHeight: "calc(100% - 0.5rem)",
222
+ maxHeight: "calc(100% - .5rem)",
213
223
  width: "var(--media-dialog-width)",
214
224
  maxWidth: "var(--media-dialog-max-width)",
215
225
  gap: "calc(var(--media-spacing) * 3)",
@@ -218,9 +228,10 @@ const e = {
218
228
  padding: "calc(var(--media-spacing) * 3)",
219
229
  color: "var(--media-popover-foreground)",
220
230
  boxShadow: "0 0 0 1px var(--media-surface-border, var(--media-border)), var(--media-shadow-surface)",
231
+ WebkitBackdropFilter: "var(--media-backdrop-filter-surface)",
221
232
  backdropFilter: "var(--media-backdrop-filter-surface)",
222
233
  transitionProperty: "opacity, scale",
223
- transitionDuration: "0.15s",
234
+ transitionDuration: ".15s",
224
235
  transitionDelay: "var(--media-delay-dialog)"
225
236
  },
226
237
  {
@@ -228,7 +239,7 @@ const e = {
228
239
  textShadow: "var(--media-text-shadow-dialog)",
229
240
  outlineStyle: "none",
230
241
  flexDirection: "column",
231
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
242
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
232
243
  display: "flex",
233
244
  position: "absolute",
234
245
  top: "50%",
@@ -282,6 +293,7 @@ const e = {
282
293
  '& :where(.media-skin[data-theme="default"]) .media-buffering-indicator:before': {
283
294
  backgroundColor: "var(--media-backdrop)",
284
295
  content: '""',
296
+ WebkitBackdropFilter: "var(--media-backdrop-filter-indicator)",
285
297
  backdropFilter: "var(--media-backdrop-filter-indicator)",
286
298
  position: "absolute",
287
299
  inset: "0"
@@ -308,8 +320,8 @@ const e = {
308
320
  width: "100%",
309
321
  height: "100%",
310
322
  transitionProperty: "opacity",
311
- transitionDuration: "0.15s",
312
- transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
323
+ transitionDuration: ".15s",
324
+ transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)"
313
325
  },
314
326
  {
315
327
  transitionDuration: "var(--media-duration-slower)",
@@ -332,37 +344,6 @@ const e = {
332
344
  '& :where(.media-skin[data-theme="default"]) .media-poster-image:not([src]):not([srcset])': {
333
345
  visibility: "hidden"
334
346
  },
335
- '& :where(.media-skin[data-theme="default"]) .media-poster ': [
336
- {
337
- pointerEvents: "none",
338
- borderRadius: "inherit",
339
- width: "100%",
340
- height: "100%",
341
- transitionProperty: "opacity",
342
- transitionDuration: "0.15s",
343
- transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
344
- },
345
- {
346
- transitionDuration: "var(--media-duration-slower)",
347
- position: "absolute",
348
- inset: "0"
349
- }
350
- ],
351
- '& :where(.media-skin[data-theme="default"]) .media-poster:not([data-visible]) ': {
352
- opacity: "0"
353
- },
354
- '& :where(.media-skin[data-theme="default"]) .media-poster-image ': {
355
- borderRadius: "inherit",
356
- objectFit: "var(--media-object-fit, contain)",
357
- objectPosition: "var(--media-object-position, center)",
358
- width: "100%",
359
- height: "100%",
360
- position: "absolute",
361
- inset: "0"
362
- },
363
- '& :where(.media-skin[data-theme="default"]) .media-poster-image:not([src]):not([srcset]) ': {
364
- visibility: "hidden"
365
- },
366
347
  '& :where(.media-skin[data-theme="default"]) .media-title': [
367
348
  {
368
349
  pointerEvents: "none",
@@ -372,12 +353,12 @@ const e = {
372
353
  transformOrigin: "top",
373
354
  paddingInline: "calc(var(--media-spacing) * 6)",
374
355
  paddingTop: "calc(var(--media-spacing) * 2.5)",
375
- fontSize: "calc(var(--media-spacing) * 3.25)",
376
- letterSpacing: "-0.0125em",
356
+ fontSize: "calc(var(--media-spacing) * 4)",
357
+ letterSpacing: "-.0125em",
377
358
  overflowWrap: "anywhere",
378
359
  color: "var(--media-controls-foreground)",
379
360
  transitionProperty: "filter, opacity, scale, translate",
380
- transitionDuration: "0.15s"
361
+ transitionDuration: ".15s"
381
362
  },
382
363
  {
383
364
  transitionDuration: "calc(var(--media-duration-controls) / 2)",
@@ -385,7 +366,7 @@ const e = {
385
366
  insetInline: "0",
386
367
  alignItems: "center",
387
368
  fontWeight: "500",
388
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
369
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
389
370
  display: "flex",
390
371
  position: "absolute",
391
372
  top: "0"
@@ -405,8 +386,7 @@ const e = {
405
386
  "@container media-root (width >= 28rem)": {
406
387
  '& :where(.media-skin[data-theme="default"]) .media-title': {
407
388
  paddingInline: "calc(var(--media-spacing) * 6)",
408
- paddingTop: "calc(var(--media-spacing) * 4)",
409
- fontSize: "calc(var(--media-spacing) * 4.25)"
389
+ paddingTop: "calc(var(--media-spacing) * 4)"
410
390
  }
411
391
  },
412
392
  "@container media-root (width < 32rem)": {
@@ -414,7 +394,7 @@ const e = {
414
394
  paddingRight: "calc(var(--media-spacing) * 36)"
415
395
  }
416
396
  },
417
- '& :where(.media-skin[data-theme="default"]) .media-container, & .media-skin[data-theme="default"].media-container': [
397
+ '& :where(.media-skin[data-theme="default"]) .media-container, & :where(.media-skin[data-theme="default"]).media-container': [
418
398
  {
419
399
  isolation: "isolate",
420
400
  borderRadius: "var(--media-video-border-radius)",
@@ -427,21 +407,21 @@ const e = {
427
407
  MozOsxFontSmoothing: "auto",
428
408
  outlineOffset: "-4px",
429
409
  transitionProperty: "outline-offset, outline-color",
430
- transitionDuration: "0.15s"
410
+ transitionDuration: ".15s"
431
411
  },
432
412
  {
433
413
  transitionDuration: "var(--media-duration-fast)",
434
414
  "--spacing": "var(--media-spacing)",
435
415
  outline: "2px solid #0000",
436
416
  lineHeight: "1.5",
437
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
417
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
438
418
  display: "block",
439
419
  position: "relative",
440
420
  overflow: "clip",
441
421
  container: "media-root / inline-size"
442
422
  }
443
423
  ],
444
- '& :where(.media-skin[data-theme="default"]) .media-container:after, & .media-skin[data-theme="default"].media-container:after': {
424
+ '& :where(.media-skin[data-theme="default"]) .media-container:after, & :where(.media-skin[data-theme="default"]).media-container:after': {
445
425
  pointerEvents: "none",
446
426
  zIndex: "10",
447
427
  borderRadius: "inherit",
@@ -452,11 +432,11 @@ const e = {
452
432
  position: "absolute",
453
433
  inset: "0"
454
434
  },
455
- '& :where(.media-skin[data-theme="default"]) .media-container:focus-visible, & .media-skin[data-theme="default"].media-container:focus-visible': {
435
+ '& :where(.media-skin[data-theme="default"]) .media-container:focus-visible, & :where(.media-skin[data-theme="default"]).media-container:focus-visible': {
456
436
  outlineOffset: "2px",
457
437
  outlineColor: "var(--media-ring)"
458
438
  },
459
- '& :where(.media-skin[data-theme="default"]) .media-container:fullscreen:after, & .media-skin[data-theme="default"].media-container:fullscreen:after': {
439
+ '& :where(.media-skin[data-theme="default"]) .media-container:fullscreen:after, & :where(.media-skin[data-theme="default"]).media-container:fullscreen:after': {
460
440
  content: '""',
461
441
  display: "none"
462
442
  },
@@ -488,7 +468,7 @@ const e = {
488
468
  gridColumnStart: "3",
489
469
  justifySelf: "flex-end"
490
470
  },
491
- "@container media-root (width >= 42rem) ": {
471
+ "@container media-root (width >= 42rem)": {
492
472
  '& :where(.media-skin[data-theme="default"]) .media-seek-indicator': {
493
473
  padding: "calc(var(--media-spacing) * 6)"
494
474
  }
@@ -498,27 +478,27 @@ const e = {
498
478
  width: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 1.5)",
499
479
  height: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 1.5)",
500
480
  transitionProperty: "translate, opacity",
501
- transitionDuration: "0.15s"
481
+ transitionDuration: ".15s"
502
482
  },
503
483
  {
504
484
  transitionDuration: "var(--media-duration-slow)",
505
- transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
485
+ transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)",
506
486
  display: "none"
507
487
  }
508
488
  ],
509
- '& :where(.media-skin[data-theme="default"]) .media-seek-indicator[data-direction] .media-seek-indicator-icon': {
489
+ '& :where(:where(.media-skin[data-theme="default"]) .media-seek-indicator)[data-direction] .media-seek-indicator-icon': {
510
490
  display: "block"
511
491
  },
512
- '& :where(.media-skin[data-theme="default"]) .media-seek-indicator[data-direction="backward"] .media-seek-indicator-icon': {
492
+ '& :where(:where(.media-skin[data-theme="default"]) .media-seek-indicator)[data-direction="backward"] .media-seek-indicator-icon': {
513
493
  scale: "-1 1"
514
494
  },
515
- '& :where(.media-skin[data-theme="default"]) .media-seek-indicator[data-direction="backward"][data-starting-style] .media-seek-indicator-icon': {
495
+ '& :where(:where(.media-skin[data-theme="default"]) .media-seek-indicator)[data-direction="backward"][data-starting-style] .media-seek-indicator-icon': {
516
496
  translate: "var(--media-hidden-seek-offset) 0"
517
497
  },
518
- '& :where(.media-skin[data-theme="default"]) .media-seek-indicator[data-direction="forward"][data-starting-style] .media-seek-indicator-icon': {
498
+ '& :where(:where(.media-skin[data-theme="default"]) .media-seek-indicator)[data-direction="forward"][data-starting-style] .media-seek-indicator-icon': {
519
499
  translate: "calc(var(--media-hidden-seek-offset) * -1) 0"
520
500
  },
521
- '& :where(.media-skin[data-theme="default"]) .media-seek-indicator:is([data-starting-style], [data-ending-style]) .media-seek-indicator-icon': {
501
+ '& :where(:where(.media-skin[data-theme="default"]) .media-seek-indicator):is([data-starting-style], [data-ending-style]) .media-seek-indicator-icon': {
522
502
  opacity: "0"
523
503
  },
524
504
  '& :where(.media-skin[data-theme="default"]) .media-seek-indicator-value': {
@@ -532,10 +512,11 @@ const e = {
532
512
  backgroundColor: "var(--media-backdrop)",
533
513
  color: "var(--media-popover-foreground)",
534
514
  boxShadow: "0 0 0 1px var(--media-surface-border, var(--media-border)), var(--media-shadow-surface)",
515
+ WebkitBackdropFilter: "var(--media-backdrop-filter-surface)",
535
516
  backdropFilter: "var(--media-backdrop-filter-surface)",
536
517
  transitionDuration: "var(--media-duration-fast)",
537
518
  fontWeight: "500",
538
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
519
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
539
520
  position: "absolute"
540
521
  },
541
522
  "@supports (color: color-mix(in lab, red, red)) ": {
@@ -575,7 +556,7 @@ const e = {
575
556
  '& :where(.media-skin[data-theme="default"]) .media-indicator:is([data-starting-style], [data-ending-style])': {
576
557
  opacity: "0",
577
558
  transitionDuration: "var(--media-duration-indicator)",
578
- transitionTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
559
+ transitionTimingFunction: "cubic-bezier(.4, 0, 1, 1)"
579
560
  },
580
561
  "@media (pointer: fine) ": {
581
562
  '& :where(.media-skin[data-theme="default"]) .media-indicator:is([data-starting-style], [data-ending-style])': {
@@ -595,9 +576,10 @@ const e = {
595
576
  backgroundColor: "var(--media-backdrop)",
596
577
  padding: "calc(var(--media-spacing) * 4)",
597
578
  textAlign: "center",
579
+ WebkitBackdropFilter: "var(--media-backdrop-filter-indicator)",
598
580
  backdropFilter: "var(--media-backdrop-filter-indicator)",
599
581
  transitionProperty: "opacity, scale",
600
- transitionDuration: "0.15s"
582
+ transitionDuration: ".15s"
601
583
  },
602
584
  {
603
585
  transitionDuration: "var(--media-duration-slow)",
@@ -605,7 +587,7 @@ const e = {
605
587
  gridRowStart: "1",
606
588
  gridColumnStart: "2",
607
589
  placeContent: "center",
608
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
590
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
609
591
  display: "grid"
610
592
  }
611
593
  ],
@@ -616,7 +598,7 @@ const e = {
616
598
  },
617
599
  '& :where(.media-skin[data-theme="default"]) .media-playback-status-indicator[data-ending-style]': {
618
600
  transitionDuration: "var(--media-duration-fast)",
619
- transitionTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
601
+ transitionTimingFunction: "cubic-bezier(.4, 0, 1, 1)"
620
602
  },
621
603
  '& :where(.media-skin[data-theme="default"]) .media-playback-status-indicator:is([data-starting-style], [data-ending-style])': {
622
604
  scale: "var(--media-hidden-playback-scale) var(--media-hidden-playback-scale)",
@@ -629,16 +611,16 @@ const e = {
629
611
  scale: "var(--media-hidden-icon-scale) var(--media-hidden-icon-scale)",
630
612
  opacity: "0",
631
613
  transitionProperty: "opacity, scale",
632
- transitionDuration: "0.15s"
614
+ transitionDuration: ".15s"
633
615
  },
634
616
  {
635
617
  transitionDuration: "var(--media-duration)",
636
618
  gridRowStart: "1",
637
619
  gridColumnStart: "1",
638
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
620
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
639
621
  }
640
622
  ],
641
- '& :where(.media-skin[data-theme="default"]) .media-playback-status-indicator[data-status="pause"] .media-playback-status-indicator-pause-icon': {
623
+ '& :where(:where(.media-skin[data-theme="default"]) .media-playback-status-indicator)[data-status="pause"] .media-playback-status-indicator-pause-icon': {
642
624
  opacity: "1",
643
625
  scale: "1"
644
626
  },
@@ -649,16 +631,16 @@ const e = {
649
631
  scale: "var(--media-hidden-icon-scale) var(--media-hidden-icon-scale)",
650
632
  opacity: "0",
651
633
  transitionProperty: "opacity, scale",
652
- transitionDuration: "0.15s"
634
+ transitionDuration: ".15s"
653
635
  },
654
636
  {
655
637
  transitionDuration: "var(--media-duration)",
656
638
  gridRowStart: "1",
657
639
  gridColumnStart: "1",
658
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
640
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
659
641
  }
660
642
  ],
661
- '& :where(.media-skin[data-theme="default"]) .media-playback-status-indicator[data-status="play"] .media-playback-status-indicator-play-icon': {
643
+ '& :where(:where(.media-skin[data-theme="default"]) .media-playback-status-indicator)[data-status="play"] .media-playback-status-indicator-play-icon': {
662
644
  opacity: "1",
663
645
  translate: "1px",
664
646
  scale: "1"
@@ -668,7 +650,7 @@ const e = {
668
650
  flexShrink: "0",
669
651
  display: "none"
670
652
  },
671
- '& :where(.media-skin[data-theme="default"]) .media-status-indicator[data-status="captions-off"] .media-status-indicator-captions-off-icon': {
653
+ '& :where(:where(.media-skin[data-theme="default"]) .media-status-indicator)[data-status="captions-off"] .media-status-indicator-captions-off-icon': {
672
654
  display: "block"
673
655
  },
674
656
  '& :where(.media-skin[data-theme="default"]) .media-status-indicator-captions-on-icon': {
@@ -676,7 +658,7 @@ const e = {
676
658
  flexShrink: "0",
677
659
  display: "none"
678
660
  },
679
- '& :where(.media-skin[data-theme="default"]) .media-status-indicator[data-status="captions-on"] .media-status-indicator-captions-on-icon': {
661
+ '& :where(:where(.media-skin[data-theme="default"]) .media-status-indicator)[data-status="captions-on"] .media-status-indicator-captions-on-icon': {
680
662
  display: "block"
681
663
  },
682
664
  '& :where(.media-skin[data-theme="default"]) .media-status-indicator-content': {
@@ -688,7 +670,7 @@ const e = {
688
670
  flexShrink: "0",
689
671
  display: "none"
690
672
  },
691
- '& :where(.media-skin[data-theme="default"]) .media-status-indicator[data-status="fullscreen"] .media-status-indicator-fullscreen-enter-icon': {
673
+ '& :where(:where(.media-skin[data-theme="default"]) .media-status-indicator)[data-status="fullscreen"] .media-status-indicator-fullscreen-enter-icon': {
692
674
  display: "block"
693
675
  },
694
676
  '& :where(.media-skin[data-theme="default"]) .media-status-indicator-fullscreen-exit-icon': {
@@ -696,7 +678,7 @@ const e = {
696
678
  flexShrink: "0",
697
679
  display: "none"
698
680
  },
699
- '& :where(.media-skin[data-theme="default"]) .media-status-indicator[data-status="exit-fullscreen"] .media-status-indicator-fullscreen-exit-icon': {
681
+ '& :where(:where(.media-skin[data-theme="default"]) .media-status-indicator)[data-status="exit-fullscreen"] .media-status-indicator-fullscreen-exit-icon': {
700
682
  display: "block"
701
683
  },
702
684
  '& :where(.media-skin[data-theme="default"]) .media-status-indicator-pip-enter-icon': {
@@ -704,7 +686,7 @@ const e = {
704
686
  flexShrink: "0",
705
687
  display: "none"
706
688
  },
707
- '& :where(.media-skin[data-theme="default"]) .media-status-indicator[data-status="pip"] .media-status-indicator-pip-enter-icon': {
689
+ '& :where(:where(.media-skin[data-theme="default"]) .media-status-indicator)[data-status="pip"] .media-status-indicator-pip-enter-icon': {
708
690
  display: "block"
709
691
  },
710
692
  '& :where(.media-skin[data-theme="default"]) .media-status-indicator-pip-exit-icon': {
@@ -712,26 +694,21 @@ const e = {
712
694
  flexShrink: "0",
713
695
  display: "none"
714
696
  },
715
- '& :where(.media-skin[data-theme="default"]) .media-status-indicator[data-status="exit-pip"] .media-status-indicator-pip-exit-icon': {
697
+ '& :where(:where(.media-skin[data-theme="default"]) .media-status-indicator)[data-status="exit-pip"] .media-status-indicator-pip-exit-icon': {
716
698
  display: "block"
717
699
  },
718
700
  '& :where(.media-skin[data-theme="default"]) .media-status-indicator-value': {
719
701
  mixBlendMode: "difference",
720
702
  marginLeft: "auto"
721
703
  },
722
- "@supports (color: color-mix(in lab, red, red)) ": {},
723
- "@media (pointer: coarse) ": {},
724
- "@media (pointer: fine) ": {},
725
- "@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) ": {},
726
- "@media (pointer: fine) ": {},
727
704
  '& :where(.media-skin[data-theme="default"]) .media-volume-indicator': {
728
705
  width: "min(80%, 12rem)",
729
706
  transform: "translateX(0)"
730
707
  },
731
708
  "@media (prefers-reduced-motion: no-preference)": {
732
709
  '& :where(.media-skin[data-theme="default"]) .media-volume-indicator:is([data-min], [data-max]):not([data-starting-style], [data-ending-style])': {
733
- transition: "transform 0.3s linear(0, -24 20%, 16 40%, -8 60%, 4 80%, 1)",
734
- transform: "translateX(0.25px)"
710
+ transition: "transform .3s linear(0, -24 20%, 16 40%, -8 60%, 4 80%, 1)",
711
+ transform: "translateX(.25px)"
735
712
  }
736
713
  },
737
714
  '& :where(.media-skin[data-theme="default"]) .media-volume-indicator-fill': [
@@ -741,7 +718,7 @@ const e = {
741
718
  backgroundSize: "var(--media-volume-fill, 0%) 100%",
742
719
  width: "100%",
743
720
  transitionProperty: "background-size",
744
- transitionDuration: "0.15s"
721
+ transitionDuration: ".15s"
745
722
  },
746
723
  {
747
724
  transitionDuration: "var(--media-duration-slow)",
@@ -756,7 +733,7 @@ const e = {
756
733
  flexShrink: "0",
757
734
  display: "none"
758
735
  },
759
- '& :where(.media-skin[data-theme="default"]) .media-volume-indicator[data-level="high"] .media-volume-indicator-high-icon': {
736
+ '& :where(:where(.media-skin[data-theme="default"]) .media-volume-indicator)[data-level="high"] .media-volume-indicator-high-icon': {
760
737
  display: "block"
761
738
  },
762
739
  '& :where(.media-skin[data-theme="default"]) .media-volume-indicator-low-icon': {
@@ -764,7 +741,7 @@ const e = {
764
741
  flexShrink: "0",
765
742
  display: "none"
766
743
  },
767
- '& :where(.media-skin[data-theme="default"]) .media-volume-indicator[data-level="low"] .media-volume-indicator-low-icon': {
744
+ '& :where(:where(.media-skin[data-theme="default"]) .media-volume-indicator)[data-level="low"] .media-volume-indicator-low-icon': {
768
745
  display: "block"
769
746
  },
770
747
  '& :where(.media-skin[data-theme="default"]) .media-volume-indicator-off-icon': {
@@ -772,7 +749,7 @@ const e = {
772
749
  flexShrink: "0",
773
750
  display: "none"
774
751
  },
775
- '& :where(.media-skin[data-theme="default"]) .media-volume-indicator[data-level="off"] .media-volume-indicator-off-icon': {
752
+ '& :where(:where(.media-skin[data-theme="default"]) .media-volume-indicator)[data-level="off"] .media-volume-indicator-off-icon': {
776
753
  display: "block"
777
754
  },
778
755
  '& :where(.media-skin[data-theme="default"]) .media-volume-indicator-value': {
@@ -796,14 +773,14 @@ const e = {
796
773
  '& :where(.media-skin[data-theme="default"]) .media-airplay-button-enter-icon': {
797
774
  opacity: "0"
798
775
  },
799
- '& :where(.media-skin[data-theme="default"]) .media-airplay-button:not([data-airplay-state="connected"]) .media-airplay-button-enter-icon': {
776
+ '& :where(:where(.media-skin[data-theme="default"]) .media-airplay-button):not([data-airplay-state="connected"]) .media-airplay-button-enter-icon': {
800
777
  opacity: "1",
801
778
  scale: "1"
802
779
  },
803
780
  '& :where(.media-skin[data-theme="default"]) .media-airplay-button-exit-icon': {
804
781
  opacity: "0"
805
782
  },
806
- '& :where(.media-skin[data-theme="default"]) .media-airplay-button[data-airplay-state="connected"] .media-airplay-button-exit-icon': {
783
+ '& :where(:where(.media-skin[data-theme="default"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon': {
807
784
  opacity: "1",
808
785
  scale: "1"
809
786
  },
@@ -813,14 +790,14 @@ const e = {
813
790
  height: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
814
791
  filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
815
792
  transitionProperty: "opacity, scale",
816
- transitionDuration: "0.15s"
793
+ transitionDuration: ".15s"
817
794
  },
818
795
  {
819
796
  transitionDuration: "var(--media-duration)",
820
797
  textShadow: "inherit",
821
798
  gridRowStart: "1",
822
799
  gridColumnStart: "1",
823
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
800
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
824
801
  }
825
802
  ],
826
803
  '& :where(.media-skin[data-theme="default"]) .media-popup': {
@@ -886,25 +863,10 @@ const e = {
886
863
  insetInline: "0",
887
864
  top: "100%"
888
865
  },
889
- '& :where(.media-skin[data-theme="default"]) .media-popup-surface': {
890
- backgroundColor: "var(--media-popover)",
891
- color: "var(--media-popover-foreground)",
892
- boxShadow: "0 0 0 1px var(--media-surface-border, var(--media-border)), var(--media-shadow-surface)",
893
- backdropFilter: "var(--media-backdrop-filter-surface)"
894
- },
895
- '& :where(.media-skin[data-theme="default"]) .media-popup-surface:after': {
896
- content: '""',
897
- zIndex: "10",
898
- pointerEvents: "none",
899
- borderRadius: "inherit",
900
- boxShadow: "var(--media-shadow-surface-inset)",
901
- position: "absolute",
902
- inset: "0"
903
- },
904
866
  '& :where(.media-skin[data-theme="default"]) .media-popup-transition': {
905
867
  transitionProperty: "opacity, filter, transform, scale",
906
868
  transitionDuration: "var(--media-duration-fast)",
907
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
869
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
908
870
  },
909
871
  '& :where(.media-skin[data-theme="default"]) .media-popup-transition[data-ending-style]': {
910
872
  transitionDuration: "var(--media-duration-instant)"
@@ -929,17 +891,18 @@ const e = {
929
891
  minWidth: "1.5em",
930
892
  fontFamily: "inherit",
931
893
  fontSize: "calc(var(--media-spacing) * 2.75)",
932
- padding: "0.1em",
894
+ padding: ".1em",
933
895
  fontWeight: "600",
934
896
  lineHeight: "1.25"
935
897
  },
936
- '& :where(.media-skin[data-theme="default"]) .media-popup-surface ': {
898
+ '& :where(.media-skin[data-theme="default"]) .media-popup-surface': {
937
899
  backgroundColor: "var(--media-popover)",
938
900
  color: "var(--media-popover-foreground)",
939
901
  boxShadow: "0 0 0 1px var(--media-surface-border, var(--media-border)), var(--media-shadow-surface)",
902
+ WebkitBackdropFilter: "var(--media-backdrop-filter-surface)",
940
903
  backdropFilter: "var(--media-backdrop-filter-surface)"
941
904
  },
942
- '& :where(.media-skin[data-theme="default"]) .media-popup-surface:after ': {
905
+ '& :where(.media-skin[data-theme="default"]) .media-popup-surface:after': {
943
906
  content: '""',
944
907
  zIndex: "10",
945
908
  pointerEvents: "none",
@@ -951,56 +914,56 @@ const e = {
951
914
  '& :where(.media-skin[data-theme="default"]) .media-captions-button-off-icon': {
952
915
  opacity: "0"
953
916
  },
954
- '& :where(.media-skin[data-theme="default"]) .media-captions-button:not([data-active]) .media-captions-button-off-icon': {
917
+ '& :where(:where(.media-skin[data-theme="default"]) .media-captions-button):not([data-active]) .media-captions-button-off-icon': {
955
918
  opacity: "1",
956
919
  scale: "1"
957
920
  },
958
921
  '& :where(.media-skin[data-theme="default"]) .media-captions-button-on-icon': {
959
922
  opacity: "0"
960
923
  },
961
- '& :where(.media-skin[data-theme="default"]) .media-captions-button[data-active] .media-captions-button-on-icon': {
924
+ '& :where(:where(.media-skin[data-theme="default"]) .media-captions-button)[data-active] .media-captions-button-on-icon': {
962
925
  opacity: "1",
963
926
  scale: "1"
964
927
  },
965
928
  '& :where(.media-skin[data-theme="default"]) .media-cast-button-enter-icon': {
966
929
  opacity: "0"
967
930
  },
968
- '& :where(.media-skin[data-theme="default"]) .media-cast-button:not([data-cast-state="connected"]) .media-cast-button-enter-icon': {
931
+ '& :where(:where(.media-skin[data-theme="default"]) .media-cast-button):not([data-cast-state="connected"]) .media-cast-button-enter-icon': {
969
932
  opacity: "1",
970
933
  scale: "1"
971
934
  },
972
935
  '& :where(.media-skin[data-theme="default"]) .media-cast-button-exit-icon': {
973
936
  opacity: "0"
974
937
  },
975
- '& :where(.media-skin[data-theme="default"]) .media-cast-button[data-cast-state="connected"] .media-cast-button-exit-icon': {
938
+ '& :where(:where(.media-skin[data-theme="default"]) .media-cast-button)[data-cast-state="connected"] .media-cast-button-exit-icon': {
976
939
  opacity: "1",
977
940
  scale: "1"
978
941
  },
979
942
  '& :where(.media-skin[data-theme="default"]) .media-fullscreen-button-enter-icon': {
980
943
  opacity: "0"
981
944
  },
982
- '& :where(.media-skin[data-theme="default"]) .media-fullscreen-button:not([data-fullscreen]) .media-fullscreen-button-enter-icon': {
945
+ '& :where(:where(.media-skin[data-theme="default"]) .media-fullscreen-button):not([data-fullscreen]) .media-fullscreen-button-enter-icon': {
983
946
  opacity: "1",
984
947
  scale: "1"
985
948
  },
986
949
  '& :where(.media-skin[data-theme="default"]) .media-fullscreen-button-exit-icon': {
987
950
  opacity: "0"
988
951
  },
989
- '& :where(.media-skin[data-theme="default"]) .media-fullscreen-button[data-fullscreen] .media-fullscreen-button-exit-icon': {
952
+ '& :where(:where(.media-skin[data-theme="default"]) .media-fullscreen-button)[data-fullscreen] .media-fullscreen-button-exit-icon': {
990
953
  opacity: "1",
991
954
  scale: "1"
992
955
  },
993
956
  '& :where(.media-skin[data-theme="default"]) .media-pip-button-enter-icon': {
994
957
  opacity: "0"
995
958
  },
996
- '& :where(.media-skin[data-theme="default"]) .media-pip-button:not([data-pip]) .media-pip-button-enter-icon': {
959
+ '& :where(:where(.media-skin[data-theme="default"]) .media-pip-button):not([data-pip]) .media-pip-button-enter-icon': {
997
960
  opacity: "1",
998
961
  scale: "1"
999
962
  },
1000
963
  '& :where(.media-skin[data-theme="default"]) .media-pip-button-exit-icon': {
1001
964
  opacity: "0"
1002
965
  },
1003
- '& :where(.media-skin[data-theme="default"]) .media-pip-button[data-pip] .media-pip-button-exit-icon': {
966
+ '& :where(:where(.media-skin[data-theme="default"]) .media-pip-button)[data-pip] .media-pip-button-exit-icon': {
1004
967
  opacity: "1",
1005
968
  scale: "1"
1006
969
  },
@@ -1008,7 +971,7 @@ const e = {
1008
971
  scale: "var(--media-hidden-icon-scale) var(--media-hidden-icon-scale)",
1009
972
  opacity: "0"
1010
973
  },
1011
- '& :where(.media-skin[data-theme="default"]) .media-play-button[data-started]:not([data-paused]):not([data-ended]) .media-play-button-pause-icon': {
974
+ '& :where(:where(.media-skin[data-theme="default"]) .media-play-button)[data-started]:not([data-paused]):not([data-ended]) .media-play-button-pause-icon': {
1012
975
  opacity: "1",
1013
976
  scale: "1"
1014
977
  },
@@ -1016,7 +979,7 @@ const e = {
1016
979
  scale: "var(--media-hidden-icon-scale) var(--media-hidden-icon-scale)",
1017
980
  opacity: "0"
1018
981
  },
1019
- '& :where(.media-skin[data-theme="default"]) .media-play-button:not([data-ended]):not([data-started]) .media-play-button-play-icon, & :where(.media-skin[data-theme="default"]) .media-play-button:not([data-ended])[data-paused] .media-play-button-play-icon': {
982
+ '& :where(:where(.media-skin[data-theme="default"]) .media-play-button):not([data-ended]):not([data-started]) .media-play-button-play-icon, & :where(:where(.media-skin[data-theme="default"]) .media-play-button):not([data-ended])[data-paused] .media-play-button-play-icon': {
1020
983
  opacity: "1",
1021
984
  scale: "1"
1022
985
  },
@@ -1024,28 +987,28 @@ const e = {
1024
987
  scale: "var(--media-hidden-icon-scale) var(--media-hidden-icon-scale)",
1025
988
  opacity: "0"
1026
989
  },
1027
- '& :where(.media-skin[data-theme="default"]) .media-play-button[data-ended] .media-play-button-restart-icon': {
990
+ '& :where(:where(.media-skin[data-theme="default"]) .media-play-button)[data-ended] .media-play-button-restart-icon': {
1028
991
  opacity: "1",
1029
992
  scale: "1"
1030
993
  },
1031
994
  '& :where(.media-skin[data-theme="default"]) .media-mute-button-high-icon': {
1032
995
  opacity: "0"
1033
996
  },
1034
- '& :where(.media-skin[data-theme="default"]) .media-mute-button:not([data-muted]):not([data-volume-level="low"]) .media-mute-button-high-icon': {
997
+ '& :where(:where(.media-skin[data-theme="default"]) .media-mute-button):not([data-muted]):not([data-volume-level="low"]) .media-mute-button-high-icon': {
1035
998
  opacity: "1",
1036
999
  scale: "1"
1037
1000
  },
1038
1001
  '& :where(.media-skin[data-theme="default"]) .media-mute-button-low-icon': {
1039
1002
  opacity: "0"
1040
1003
  },
1041
- '& :where(.media-skin[data-theme="default"]) .media-mute-button:not([data-muted])[data-volume-level="low"] .media-mute-button-low-icon': {
1004
+ '& :where(:where(.media-skin[data-theme="default"]) .media-mute-button):not([data-muted])[data-volume-level="low"] .media-mute-button-low-icon': {
1042
1005
  opacity: "1",
1043
1006
  scale: "1"
1044
1007
  },
1045
1008
  '& :where(.media-skin[data-theme="default"]) .media-mute-button-off-icon': {
1046
1009
  opacity: "0"
1047
1010
  },
1048
- '& :where(.media-skin[data-theme="default"]) .media-mute-button[data-muted] .media-mute-button-off-icon': {
1011
+ '& :where(:where(.media-skin[data-theme="default"]) .media-mute-button)[data-muted] .media-mute-button-off-icon': {
1049
1012
  opacity: "1",
1050
1013
  scale: "1"
1051
1014
  },
@@ -1062,14 +1025,14 @@ const e = {
1062
1025
  height: "100%",
1063
1026
  position: "absolute"
1064
1027
  },
1065
- "@supports (color: color-mix(in lab, red, red)) ": {
1028
+ "@supports (color: color-mix(in lab, red, red)) ": {
1066
1029
  '& :where(.media-skin[data-theme="default"]) .media-slider-buffer:before': {
1067
1030
  backgroundColor: "color-mix(in oklab, currentcolor 20%, transparent)"
1068
1031
  }
1069
1032
  },
1070
1033
  '& :where(.media-skin[data-theme="default"]) .media-slider-buffer[data-orientation="horizontal"]': {
1071
1034
  left: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
1072
- right: "max( calc(100% - var(--media-slider-buffer)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)) )",
1035
+ right: "max(calc(100% - var(--media-slider-buffer, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
1073
1036
  clipPath: "inset(-1px 0)"
1074
1037
  },
1075
1038
  '& :where(.media-skin[data-theme="default"]) .media-slider-buffer[data-orientation="horizontal"]:before': {
@@ -1079,7 +1042,7 @@ const e = {
1079
1042
  },
1080
1043
  '& :where(.media-skin[data-theme="default"]) .media-slider-buffer[data-orientation="vertical"]': {
1081
1044
  bottom: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
1082
- top: "max( calc(100% - var(--media-slider-buffer)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)) )",
1045
+ top: "max(calc(100% - var(--media-slider-buffer, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
1083
1046
  clipPath: "inset(0 -1px)"
1084
1047
  },
1085
1048
  '& :where(.media-skin[data-theme="default"]) .media-slider-buffer[data-orientation="vertical"]:before': {
@@ -1102,12 +1065,12 @@ const e = {
1102
1065
  },
1103
1066
  '& :where(.media-skin[data-theme="default"]) .media-slider-fill[data-orientation="horizontal"]': {
1104
1067
  left: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
1105
- right: "max( calc(100% - var(--media-slider-fill)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)) )",
1068
+ right: "max(calc(100% - var(--media-slider-fill, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
1106
1069
  clipPath: "inset(-1px 0)"
1107
1070
  },
1108
- '& :where(.media-skin[data-theme="default"]) .media-slider[data-dragging] .media-slider-fill[data-orientation="horizontal"]': {
1071
+ '& :where(:where(.media-skin[data-theme="default"]) .media-slider)[data-dragging] .media-slider-fill[data-orientation="horizontal"]': {
1109
1072
  left: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
1110
- right: "max( calc(100% - var(--media-slider-pointer)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)) )",
1073
+ right: "max(calc(100% - var(--media-slider-pointer, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
1111
1074
  clipPath: "inset(-1px 0)"
1112
1075
  },
1113
1076
  '& :where(.media-skin[data-theme="default"]) .media-slider-fill[data-orientation="horizontal"]:before': {
@@ -1117,12 +1080,12 @@ const e = {
1117
1080
  },
1118
1081
  '& :where(.media-skin[data-theme="default"]) .media-slider-fill[data-orientation="vertical"]': {
1119
1082
  bottom: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
1120
- top: "max( calc(100% - var(--media-slider-fill)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)) )",
1083
+ top: "max(calc(100% - var(--media-slider-fill, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
1121
1084
  clipPath: "inset(0 -1px)"
1122
1085
  },
1123
- '& :where(.media-skin[data-theme="default"]) .media-slider[data-dragging] .media-slider-fill[data-orientation="vertical"]': {
1124
- bottom: "calc( var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0) )",
1125
- top: "max( calc(100% - var(--media-slider-pointer)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)) )",
1086
+ '& :where(:where(.media-skin[data-theme="default"]) .media-slider)[data-dragging] .media-slider-fill[data-orientation="vertical"]': {
1087
+ bottom: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
1088
+ top: "max(calc(100% - var(--media-slider-pointer, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
1126
1089
  clipPath: "inset(0 -1px)"
1127
1090
  },
1128
1091
  '& :where(.media-skin[data-theme="default"]) .media-slider-fill[data-orientation="vertical"]:before': {
@@ -1133,7 +1096,7 @@ const e = {
1133
1096
  '& :where(.media-skin[data-theme="default"]) .media-slider-thumb': [
1134
1097
  {
1135
1098
  top: "50%",
1136
- left: "var(--media-slider-fill)",
1099
+ left: "var(--media-slider-fill, 0%)",
1137
1100
  zIndex: "10",
1138
1101
  width: "calc(var(--media-spacing) * 3)",
1139
1102
  height: "calc(var(--media-spacing) * 3)",
@@ -1141,7 +1104,7 @@ const e = {
1141
1104
  boxShadow: "0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--media-shadow-thumb)",
1142
1105
  outlineOffset: "-4px",
1143
1106
  transitionProperty: "opacity, height, width, outline-offset, scale",
1144
- transitionDuration: "0.15s"
1107
+ transitionDuration: ".15s"
1145
1108
  },
1146
1109
  {
1147
1110
  transitionDuration: "var(--media-duration-slider)",
@@ -1149,13 +1112,13 @@ const e = {
1149
1112
  userSelect: "none",
1150
1113
  backgroundColor: "#fff",
1151
1114
  outline: "4px solid #0000",
1152
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1115
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
1153
1116
  position: "absolute",
1154
1117
  translate: "-50% -50%"
1155
1118
  }
1156
1119
  ],
1157
- '& :where(.media-skin[data-theme="default"]) .media-slider[data-dragging] .media-slider-thumb': {
1158
- scale: "0.9"
1120
+ '& :where(:where(.media-skin[data-theme="default"]) .media-slider)[data-dragging] .media-slider-thumb': {
1121
+ scale: ".9"
1159
1122
  },
1160
1123
  '& :where(.media-skin[data-theme="default"]) .media-slider-thumb:after': [
1161
1124
  {
@@ -1164,14 +1127,14 @@ const e = {
1164
1127
  borderRadius: "inherit",
1165
1128
  opacity: "0",
1166
1129
  transitionProperty: "opacity, scale",
1167
- transitionDuration: "0.15s"
1130
+ transitionDuration: ".15s"
1168
1131
  },
1169
1132
  {
1170
1133
  transitionDuration: "var(--media-duration)",
1171
1134
  content: '""',
1172
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1135
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
1173
1136
  position: "absolute",
1174
- scale: "0.5",
1137
+ scale: ".5",
1175
1138
  boxShadow: "0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 0 2px"
1176
1139
  }
1177
1140
  ],
@@ -1190,7 +1153,7 @@ const e = {
1190
1153
  outlineOffset: "0px",
1191
1154
  outlineColor: "currentColor"
1192
1155
  },
1193
- "@supports (color: color-mix(in lab, red, red)) ": {
1156
+ "@supports (color: color-mix(in lab, red, red)) ": {
1194
1157
  '& :where(.media-skin[data-theme="default"]) .media-slider-thumb:focus-visible': {
1195
1158
  outlineColor: "color-mix(in oklab, currentcolor 15%, transparent)"
1196
1159
  }
@@ -1200,14 +1163,14 @@ const e = {
1200
1163
  opacity: "1",
1201
1164
  scale: "1"
1202
1165
  },
1203
- '& :where(.media-skin[data-theme="default"]) .media-slider[data-dragging] .media-slider-thumb[data-orientation="horizontal"]': {
1166
+ '& :where(:where(.media-skin[data-theme="default"]) .media-slider)[data-dragging] .media-slider-thumb[data-orientation="horizontal"]': {
1204
1167
  left: "var(--media-slider-pointer)"
1205
1168
  },
1206
1169
  '& :where(.media-skin[data-theme="default"]) .media-slider-thumb[data-orientation="vertical"]': {
1207
- top: "calc(100% - var(--media-slider-fill))",
1170
+ top: "calc(100% - var(--media-slider-fill, 0%))",
1208
1171
  left: "50%"
1209
1172
  },
1210
- '& :where(.media-skin[data-theme="default"]) .media-slider[data-dragging] .media-slider-thumb[data-orientation="vertical"]': {
1173
+ '& :where(:where(.media-skin[data-theme="default"]) .media-slider)[data-dragging] .media-slider-thumb[data-orientation="vertical"]': {
1211
1174
  top: "calc(100% - var(--media-slider-pointer))"
1212
1175
  },
1213
1176
  '& :where(.media-skin[data-theme="default"]) .media-slider-track': {
@@ -1226,7 +1189,7 @@ const e = {
1226
1189
  position: "absolute",
1227
1190
  inset: "0"
1228
1191
  },
1229
- "@supports (color: color-mix(in lab, red, red)) ": {
1192
+ "@supports (color: color-mix(in lab, red, red)) ": {
1230
1193
  '& :where(.media-skin[data-theme="default"]) .media-slider-track:before': {
1231
1194
  backgroundColor: "color-mix(in oklab, currentcolor 20%, transparent)"
1232
1195
  }
@@ -1242,7 +1205,7 @@ const e = {
1242
1205
  {
1243
1206
  cursor: "pointer",
1244
1207
  transitionProperty: "--media-slider-fill, --media-slider-buffer",
1245
- transitionDuration: "0.15s"
1208
+ transitionDuration: ".15s"
1246
1209
  },
1247
1210
  {
1248
1211
  transitionDuration: "var(--media-duration-slider)",
@@ -1251,7 +1214,7 @@ const e = {
1251
1214
  flex: "1",
1252
1215
  justifyContent: "center",
1253
1216
  alignItems: "center",
1254
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1217
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
1255
1218
  display: "flex",
1256
1219
  position: "relative"
1257
1220
  }
@@ -1293,6 +1256,7 @@ const e = {
1293
1256
  "--media-popover-side-offset": "0rem",
1294
1257
  borderRadius: "0",
1295
1258
  boxShadow: "none !important",
1259
+ WebkitBackdropFilter: "none !important",
1296
1260
  backdropFilter: "none !important",
1297
1261
  backgroundColor: "#0000 !important"
1298
1262
  },
@@ -1300,7 +1264,6 @@ const e = {
1300
1264
  content: '""',
1301
1265
  display: "none"
1302
1266
  },
1303
- "@media (forced-colors: active) ": {},
1304
1267
  '& :where(.media-skin[data-theme="default"]) .media-slider-preview': {
1305
1268
  height: "var(--media-spacing)",
1306
1269
  minWidth: "var(--media-slider-preview-max-width)",
@@ -1317,18 +1280,18 @@ const e = {
1317
1280
  borderRadius: "var(--media-control-radius)",
1318
1281
  opacity: "0",
1319
1282
  transitionProperty: "opacity, scale",
1320
- transitionDuration: "0.15s"
1283
+ transitionDuration: ".15s"
1321
1284
  },
1322
1285
  {
1323
1286
  transitionDuration: "var(--media-duration-slow)",
1324
1287
  content: '""',
1325
1288
  backgroundColor: "currentColor",
1326
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1289
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
1327
1290
  position: "absolute",
1328
1291
  top: "50%",
1329
1292
  left: "50%",
1330
1293
  translate: "-50% -50%",
1331
- scale: "0.5"
1294
+ scale: ".5"
1332
1295
  }
1333
1296
  ],
1334
1297
  '& :where(.media-skin[data-theme="default"]) .media-slider-preview[data-pointing]:not([data-dragging]):before': {
@@ -1341,101 +1304,33 @@ const e = {
1341
1304
  "--media-slider-preview-max-width": "min(calc(var(--media-spacing) * 40), 100cqi)"
1342
1305
  }
1343
1306
  },
1344
- "@container media-root (width >= 42rem) ": {
1307
+ "@container media-root (width >= 42rem) ": {
1345
1308
  '& :where(.media-skin[data-theme="default"]) .media-slider-preview': {
1346
1309
  "--media-slider-preview-max-width": "min(calc(var(--media-spacing) * 48), 100cqi)"
1347
1310
  }
1348
1311
  },
1349
- '& :where(.media-skin[data-theme="default"]) .media-slider-preview-content': [
1350
- {
1351
- maxWidth: "var(--media-slider-preview-max-width)",
1352
- transformOrigin: "bottom",
1353
- translate: "-50% var(--media-hidden-preview-offset)",
1354
- scale: "var(--media-hidden-preview-scale) var(--media-hidden-preview-scale)",
1355
- opacity: "0",
1356
- filter: "blur(var(--media-hidden-blur))",
1357
- transitionProperty: "filter, opacity, scale",
1358
- transitionDuration: "0.15s"
1359
- },
1360
- {
1361
- transitionDuration: "var(--media-duration)",
1362
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1363
- position: "absolute"
1364
- }
1365
- ],
1366
- '& :where(.media-skin[data-theme="default"]) :where(.media-slider):has(:focus-visible) .media-slider-preview-content, & :where(.media-skin[data-theme="default"]) :where(.media-slider-preview)[data-pointing] .media-slider-preview-content': {
1367
- opacity: "1",
1368
- filter: "none",
1369
- scale: "1"
1370
- },
1371
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail': {
1372
- pointerEvents: "none",
1373
- bottom: "calc(100% + var(--media-slider-preview-offset))",
1374
- maxHeight: "var(--media-slider-preview-max-height)",
1375
- borderRadius: "var(--media-popup-radius)",
1376
- backgroundColor: "var(--media-backdrop)",
1377
- left: "50%",
1378
- overflow: "hidden"
1379
- },
1380
- "@supports (color: color-mix(in lab, red, red)) ": {
1312
+ "@supports (color: color-mix(in lab, red, red)) ": {
1381
1313
  '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail': {
1382
1314
  backgroundColor: "color-mix(in oklab, var(--media-backdrop) 90%, transparent)"
1383
1315
  }
1384
1316
  },
1385
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail:after': {
1386
- pointerEvents: "none",
1387
- borderRadius: "inherit",
1388
- content: '""',
1389
- backgroundImage: "var(--media-thumbnail-gradient)",
1390
- position: "absolute",
1391
- inset: "0"
1392
- },
1393
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail[data-loading]': {
1394
- aspectRatio: "16 / 9",
1395
- width: "var(--media-slider-preview-max-width)"
1396
- },
1397
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail-image': [
1398
- {
1399
- transitionProperty: "opacity",
1400
- transitionDuration: "0.15s"
1401
- },
1402
- {
1403
- transitionDuration: "var(--media-duration)",
1404
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1405
- display: "block"
1406
- }
1407
- ],
1408
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail[data-loading] .media-slider-thumbnail-image': {
1317
+ '& :where(:where(.media-skin[data-theme="default"]) .media-slider-thumbnail)[data-loading] .media-slider-thumbnail-image': {
1409
1318
  opacity: "0"
1410
1319
  },
1411
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail-spinner-icon': [
1412
- {
1413
- zIndex: "10",
1414
- width: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
1415
- height: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
1416
- opacity: "0",
1417
- filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
1418
- transitionProperty: "opacity",
1419
- transitionDuration: "0.15s"
1420
- },
1421
- {
1422
- transitionDuration: "var(--media-duration)",
1423
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1424
- position: "absolute",
1425
- top: "50%",
1426
- left: "50%",
1427
- translate: "-50% -50%"
1428
- }
1429
- ],
1430
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail:not([data-loading]) .media-slider-thumbnail-spinner-icon': {
1320
+ '& :where(:where(.media-skin[data-theme="default"]) .media-slider-thumbnail):not([data-loading]) .media-slider-thumbnail-spinner-icon': {
1431
1321
  "--media-spinner-animation": "none"
1432
1322
  },
1433
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail[data-loading] .media-slider-thumbnail-spinner-icon': {
1323
+ '& :where(:where(.media-skin[data-theme="default"]) .media-slider-thumbnail)[data-loading] .media-slider-thumbnail-spinner-icon': {
1434
1324
  opacity: "1"
1435
1325
  },
1326
+ '& :where(.media-skin[data-theme="default"]) .media-time-slider[data-playing]': {
1327
+ transitionProperty: "--media-slider-buffer",
1328
+ transitionDuration: ".15s",
1329
+ transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)"
1330
+ },
1436
1331
  '& :where(.media-skin[data-theme="default"]) .media-time-slider-chapter': {
1437
- "--media-chapter-inset-end": "0.5",
1438
- "--media-chapter-inset-start": "0.5",
1332
+ "--media-chapter-inset-end": ".5",
1333
+ "--media-chapter-inset-start": ".5",
1439
1334
  justifyContent: "center",
1440
1335
  alignItems: "center",
1441
1336
  minWidth: "0",
@@ -1456,11 +1351,11 @@ const e = {
1456
1351
  '& :where(.media-skin[data-theme="default"]) .media-time-slider-chapter[data-orientation="vertical"]': {
1457
1352
  clipPath: "inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0)"
1458
1353
  },
1459
- '& :where(.media-skin[data-theme="default"]) .media-time-slider-chapter[data-highlighted] .media-time-slider-chapter-layer[data-orientation="horizontal"]:before': {
1354
+ '& :where(:where(.media-skin[data-theme="default"]) .media-time-slider-chapter)[data-highlighted] .media-time-slider-chapter-layer[data-orientation="horizontal"]:before': {
1460
1355
  content: '""',
1461
1356
  minWidth: "calc(var(--media-spacing) * 1.75)"
1462
1357
  },
1463
- '& :where(.media-skin[data-theme="default"]) .media-time-slider-chapter[data-highlighted] .media-time-slider-chapter-layer[data-orientation="vertical"]:before': {
1358
+ '& :where(:where(.media-skin[data-theme="default"]) .media-time-slider-chapter)[data-highlighted] .media-time-slider-chapter-layer[data-orientation="vertical"]:before': {
1464
1359
  content: '""',
1465
1360
  minHeight: "calc(var(--media-spacing) * 1.75)"
1466
1361
  },
@@ -1478,14 +1373,14 @@ const e = {
1478
1373
  '& :where(.media-skin[data-theme="default"]) .media-time-slider-chapter-track': [
1479
1374
  {
1480
1375
  transitionProperty: "height, width",
1481
- transitionDuration: "0.15s"
1376
+ transitionDuration: ".15s"
1482
1377
  },
1483
1378
  {
1484
1379
  transitionDuration: "var(--media-duration-slow)",
1485
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
1380
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
1486
1381
  }
1487
1382
  ],
1488
- '& :where(.media-skin[data-theme="default"]) .media-time-slider-chapter[data-highlighted] .media-time-slider-chapter-track[data-orientation="horizontal"]': {
1383
+ '& :where(:where(.media-skin[data-theme="default"]) .media-time-slider-chapter)[data-highlighted] .media-time-slider-chapter-track[data-orientation="horizontal"]': {
1489
1384
  height: "calc(var(--media-spacing) * 1.75)"
1490
1385
  },
1491
1386
  '& :where(.media-skin[data-theme="default"]) .media-time-slider-chapter-track[data-orientation="horizontal"]:before': {
@@ -1494,7 +1389,7 @@ const e = {
1494
1389
  right: "calc(100% - var(--media-slider-chapter-end) + var(--media-spacing) * var(--media-chapter-inset-end))",
1495
1390
  clipPath: "inset(-1px)"
1496
1391
  },
1497
- '& :where(.media-skin[data-theme="default"]) .media-time-slider-chapter[data-highlighted] .media-time-slider-chapter-track[data-orientation="vertical"]': {
1392
+ '& :where(:where(.media-skin[data-theme="default"]) .media-time-slider-chapter)[data-highlighted] .media-time-slider-chapter-track[data-orientation="vertical"]': {
1498
1393
  width: "calc(var(--media-spacing) * 1.75)"
1499
1394
  },
1500
1395
  '& :where(.media-skin[data-theme="default"]) .media-time-slider-chapter-track[data-orientation="vertical"]:before': {
@@ -1524,14 +1419,14 @@ const e = {
1524
1419
  },
1525
1420
  '& :where(.media-skin[data-theme="default"]) .media-time-slider-thumb': {
1526
1421
  opacity: "0",
1527
- scale: "0.8"
1422
+ scale: ".8"
1528
1423
  },
1529
1424
  '& :where(.media-skin[data-theme="default"]) .media-time-slider-thumb:focus-visible, & :where(.media-skin[data-theme="default"]) .media-time-slider-thumb[data-interactive]': {
1530
1425
  opacity: "1"
1531
1426
  },
1532
- "@media (pointer: fine) ": {
1427
+ "@media (pointer: fine) ": {
1533
1428
  "@media (hover: hover)": {
1534
- '& :where(.media-skin[data-theme="default"]) .media-slider:hover .media-time-slider-thumb': {
1429
+ '& :where(:where(.media-skin[data-theme="default"]) .media-slider):hover .media-time-slider-thumb': {
1535
1430
  opacity: "1",
1536
1431
  scale: "1"
1537
1432
  }
@@ -1540,7 +1435,7 @@ const e = {
1540
1435
  '& :where(.media-skin[data-theme="default"]) .media-time-slider-value': {
1541
1436
  fontVariantNumeric: "tabular-nums"
1542
1437
  },
1543
- '& :where(.media-skin[data-theme="default"]) .media-slider-preview-content ': [
1438
+ '& :where(.media-skin[data-theme="default"]) .media-slider-preview-content': [
1544
1439
  {
1545
1440
  maxWidth: "var(--media-slider-preview-max-width)",
1546
1441
  transformOrigin: "bottom",
@@ -1549,20 +1444,20 @@ const e = {
1549
1444
  opacity: "0",
1550
1445
  filter: "blur(var(--media-hidden-blur))",
1551
1446
  transitionProperty: "filter, opacity, scale",
1552
- transitionDuration: "0.15s"
1447
+ transitionDuration: ".15s"
1553
1448
  },
1554
1449
  {
1555
1450
  transitionDuration: "var(--media-duration)",
1556
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1451
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
1557
1452
  position: "absolute"
1558
1453
  }
1559
1454
  ],
1560
- '& :where(.media-skin[data-theme="default"]) :where(.media-slider):has(:focus-visible) .media-slider-preview-content, & :where(.media-skin[data-theme="default"]) :where(.media-slider-preview)[data-pointing] .media-slider-preview-content ': {
1455
+ '& :where(.media-skin[data-theme="default"]) :where(.media-slider):has(:focus-visible) .media-slider-preview-content, & :where(.media-skin[data-theme="default"]) :where(.media-slider-preview)[data-pointing] .media-slider-preview-content': {
1561
1456
  opacity: "1",
1562
1457
  filter: "none",
1563
1458
  scale: "1"
1564
1459
  },
1565
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail ': {
1460
+ '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail': {
1566
1461
  pointerEvents: "none",
1567
1462
  bottom: "calc(100% + var(--media-slider-preview-offset))",
1568
1463
  maxHeight: "var(--media-slider-preview-max-height)",
@@ -1571,12 +1466,12 @@ const e = {
1571
1466
  left: "50%",
1572
1467
  overflow: "hidden"
1573
1468
  },
1574
- "@supports (color: color-mix(in lab, red, red)) ": {
1469
+ "@supports (color: color-mix(in lab, red, red)) ": {
1575
1470
  '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail': {
1576
1471
  backgroundColor: "color-mix(in oklab, var(--media-backdrop) 90%, transparent)"
1577
1472
  }
1578
1473
  },
1579
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail:after ': {
1474
+ '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail:after': {
1580
1475
  pointerEvents: "none",
1581
1476
  borderRadius: "inherit",
1582
1477
  content: '""',
@@ -1584,25 +1479,25 @@ const e = {
1584
1479
  position: "absolute",
1585
1480
  inset: "0"
1586
1481
  },
1587
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail[data-loading] ': {
1482
+ '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail[data-loading]': {
1588
1483
  aspectRatio: "16 / 9",
1589
1484
  width: "var(--media-slider-preview-max-width)"
1590
1485
  },
1591
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail-image ': [
1486
+ '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail-image': [
1592
1487
  {
1593
1488
  transitionProperty: "opacity",
1594
- transitionDuration: "0.15s"
1489
+ transitionDuration: ".15s"
1595
1490
  },
1596
1491
  {
1597
1492
  transitionDuration: "var(--media-duration)",
1598
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1493
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
1599
1494
  display: "block"
1600
1495
  }
1601
1496
  ],
1602
1497
  '& :where(.media-skin[data-theme="default"]) :where(.media-slider-thumbnail)[data-loading] .media-slider-thumbnail-image': {
1603
1498
  opacity: "0"
1604
1499
  },
1605
- '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail-spinner-icon ': [
1500
+ '& :where(.media-skin[data-theme="default"]) .media-slider-thumbnail-spinner-icon': [
1606
1501
  {
1607
1502
  zIndex: "10",
1608
1503
  width: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
@@ -1610,11 +1505,11 @@ const e = {
1610
1505
  opacity: "0",
1611
1506
  filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
1612
1507
  transitionProperty: "opacity",
1613
- transitionDuration: "0.15s"
1508
+ transitionDuration: ".15s"
1614
1509
  },
1615
1510
  {
1616
1511
  transitionDuration: "var(--media-duration)",
1617
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1512
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
1618
1513
  position: "absolute",
1619
1514
  top: "50%",
1620
1515
  left: "50%",
@@ -1635,7 +1530,7 @@ const e = {
1635
1530
  flexShrink: "0",
1636
1531
  rotate: "180deg"
1637
1532
  },
1638
- '& :where(.media-skin[data-theme="default"]) .media-menu-back-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-back-chevron': {
1533
+ '& :where(:where(.media-skin[data-theme="default"]) .media-menu-back-item):where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-back-chevron': {
1639
1534
  color: "inherit"
1640
1535
  },
1641
1536
  '& :where(.media-skin[data-theme="default"]) .media-menu-back-chevron:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
@@ -1649,7 +1544,7 @@ const e = {
1649
1544
  filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
1650
1545
  flexShrink: "0"
1651
1546
  },
1652
- '& :where(.media-skin[data-theme="default"]) .media-menu-trigger-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-forward-chevron': {
1547
+ '& :where(:where(.media-skin[data-theme="default"]) .media-menu-trigger-item):where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-forward-chevron': {
1653
1548
  color: "inherit"
1654
1549
  },
1655
1550
  '& :where(.media-skin[data-theme="default"]) .media-menu-forward-chevron:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
@@ -1661,7 +1556,7 @@ const e = {
1661
1556
  marginInlineStart: "auto",
1662
1557
  marginInlineEnd: "calc(var(--media-spacing) * -1)"
1663
1558
  },
1664
- '& :where(.media-skin[data-theme="default"]) .media-menu-radio-item[aria-checked="true"] .media-menu-item-indicator': {
1559
+ '& :where(:where(.media-skin[data-theme="default"]) .media-menu-radio-item)[aria-checked="true"] .media-menu-item-indicator': {
1665
1560
  opacity: "1"
1666
1561
  },
1667
1562
  '& :where(.media-skin[data-theme="default"]) .media-menu-radio-item': [
@@ -1679,7 +1574,7 @@ const e = {
1679
1574
  fontVariantNumeric: "tabular-nums",
1680
1575
  outlineOffset: "-2px",
1681
1576
  transitionProperty: "background-color, color",
1682
- transitionDuration: "0.15s"
1577
+ transitionDuration: ".15s"
1683
1578
  },
1684
1579
  {
1685
1580
  transitionDuration: "var(--media-duration-fast)",
@@ -1687,7 +1582,7 @@ const e = {
1687
1582
  userSelect: "none",
1688
1583
  textShadow: "0 1px 0 var(--media-shadow-current-color)",
1689
1584
  outline: "2px solid #0000",
1690
- transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
1585
+ transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)",
1691
1586
  display: "flex",
1692
1587
  position: "relative"
1693
1588
  }
@@ -1699,12 +1594,12 @@ const e = {
1699
1594
  '& :where(.media-skin[data-theme="default"]) .media-menu-radio-item[aria-disabled="true"]': {
1700
1595
  pointerEvents: "none",
1701
1596
  cursor: "not-allowed",
1702
- opacity: "0.5"
1597
+ opacity: ".5"
1703
1598
  },
1704
1599
  '& :where(.media-skin[data-theme="default"]) .media-menu-radio-item[data-availability="unavailable"], & :where(.media-skin[data-theme="default"]) .media-menu-radio-item[data-availability="unsupported"]': {
1705
1600
  display: "none"
1706
1601
  },
1707
- '& :where(.media-skin[data-theme="default"]) .media-menu-radio-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where( :not([aria-disabled="true"]) )': {
1602
+ '& :where(.media-skin[data-theme="default"]) .media-menu-radio-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
1708
1603
  backgroundColor: "var(--media-accent)",
1709
1604
  color: "var(--media-accent-foreground)"
1710
1605
  },
@@ -1715,7 +1610,7 @@ const e = {
1715
1610
  '& :where(.media-skin[data-theme="default"]) .media-menu-radio-item[data-highlighted]': {
1716
1611
  anchorName: "--media-menu-item-highlight-anchor"
1717
1612
  },
1718
- '& :where(.media-skin[data-theme="default"]) .media-menu-radio-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where( :not([aria-disabled="true"]) )': {
1613
+ '& :where(.media-skin[data-theme="default"]) .media-menu-radio-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
1719
1614
  transitionDuration: "var(--media-duration-slow)",
1720
1615
  backgroundColor: "#0000"
1721
1616
  }
@@ -1727,12 +1622,12 @@ const e = {
1727
1622
  filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
1728
1623
  flexShrink: "0"
1729
1624
  },
1730
- '& :where(.media-skin[data-theme="default"]) .media-menu-radio-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-radio-item-icon': {
1625
+ '& :where(:where(.media-skin[data-theme="default"]) .media-menu-radio-item):where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-radio-item-icon': {
1731
1626
  color: "inherit"
1732
1627
  },
1733
1628
  '& :where(.media-skin[data-theme="default"]) .media-menu-back-item': [
1734
1629
  {
1735
- marginBottom: "calc(var(--media-spacing) * 0.5)",
1630
+ marginBottom: "calc(var(--media-spacing) * .5)",
1736
1631
  cursor: "pointer",
1737
1632
  alignItems: "center",
1738
1633
  gap: "calc(var(--media-spacing) * 1.5)",
@@ -1744,7 +1639,7 @@ const e = {
1744
1639
  whiteSpace: "nowrap",
1745
1640
  outlineOffset: "-2px",
1746
1641
  transitionProperty: "background-color, color",
1747
- transitionDuration: "0.15s"
1642
+ transitionDuration: ".15s"
1748
1643
  },
1749
1644
  {
1750
1645
  transitionDuration: "var(--media-duration-fast)",
@@ -1752,7 +1647,7 @@ const e = {
1752
1647
  userSelect: "none",
1753
1648
  textShadow: "0 1px 0 var(--media-shadow-current-color)",
1754
1649
  outline: "2px solid #0000",
1755
- transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
1650
+ transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)",
1756
1651
  display: "flex",
1757
1652
  position: "relative"
1758
1653
  }
@@ -1761,7 +1656,7 @@ const e = {
1761
1656
  outlineOffset: "2px",
1762
1657
  outlineColor: "var(--media-ring)"
1763
1658
  },
1764
- '& :where(.media-skin[data-theme="default"]) .media-menu-back-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where( :not([aria-disabled="true"]) )': {
1659
+ '& :where(.media-skin[data-theme="default"]) .media-menu-back-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
1765
1660
  backgroundColor: "var(--media-accent)",
1766
1661
  color: "var(--media-accent-foreground)"
1767
1662
  },
@@ -1769,7 +1664,7 @@ const e = {
1769
1664
  '& :where(.media-skin[data-theme="default"]) .media-menu-back-item': {
1770
1665
  transitionDuration: "var(--media-duration-instant)"
1771
1666
  },
1772
- '& :where(.media-skin[data-theme="default"]) .media-menu-back-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where( :not([aria-disabled="true"]) )': {
1667
+ '& :where(.media-skin[data-theme="default"]) .media-menu-back-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
1773
1668
  transitionDuration: "var(--media-duration-slow)"
1774
1669
  }
1775
1670
  },
@@ -1778,18 +1673,18 @@ const e = {
1778
1673
  maxHeight: "inherit",
1779
1674
  overscrollBehavior: "none",
1780
1675
  transitionProperty: "translate, filter",
1781
- transitionDuration: "0.15s"
1676
+ transitionDuration: ".15s"
1782
1677
  },
1783
1678
  {
1784
1679
  transitionDuration: "var(--media-duration-menu)",
1785
1680
  anchorScope: "--media-menu-item-highlight-anchor",
1786
1681
  outlineStyle: "none",
1787
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1682
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
1788
1683
  position: "absolute",
1789
1684
  overflow: "auto"
1790
1685
  }
1791
1686
  ],
1792
- "@media (forced-colors: active) ": {
1687
+ "@media (forced-colors: active) ": {
1793
1688
  '& :where(.media-skin[data-theme="default"]) .media-menu-content': {
1794
1689
  outlineOffset: "2px",
1795
1690
  outline: "2px solid #0000"
@@ -1798,7 +1693,7 @@ const e = {
1798
1693
  '& :where(.media-skin[data-theme="default"]) .media-menu-content:not([data-submenu])': {
1799
1694
  insetInline: "var(--media-spacing)",
1800
1695
  top: "var(--media-spacing)",
1801
- gap: "calc(var(--media-spacing) * 0.5)",
1696
+ gap: "calc(var(--media-spacing) * .5)",
1802
1697
  flexDirection: "column",
1803
1698
  display: "flex"
1804
1699
  },
@@ -1830,7 +1725,7 @@ const e = {
1830
1725
  overflow: "hidden",
1831
1726
  translate: "100%"
1832
1727
  },
1833
- '& :where(.media-skin[data-theme="default"]) .media-menu-content[data-submenu]:is([data-starting-style], [data-ending-style]):where( :dir(rtl), [dir="rtl"], [dir="rtl"] * )': {
1728
+ '& :where(.media-skin[data-theme="default"]) .media-menu-content[data-submenu]:is([data-starting-style], [data-ending-style]):where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
1834
1729
  translate: "-100%"
1835
1730
  },
1836
1731
  "@supports (top: anchor(top)) ": {
@@ -1857,26 +1752,21 @@ const e = {
1857
1752
  '& :where(.media-skin[data-theme="default"]) .media-menu-hint': {
1858
1753
  alignItems: "center",
1859
1754
  gap: "var(--media-spacing)",
1860
- color: "currentColor",
1861
1755
  minWidth: "0",
1862
1756
  marginInlineStart: "auto",
1863
1757
  paddingInlineStart: "calc(var(--media-spacing) * 2)",
1864
1758
  display: "inline-flex"
1865
1759
  },
1866
- "@supports (color: color-mix(in lab, red, red)) ": {
1867
- '& :where(.media-skin[data-theme="default"]) .media-menu-hint': {
1868
- color: "color-mix(in oklab, currentcolor 65%, transparent)"
1869
- }
1870
- },
1871
1760
  '& :where(.media-skin[data-theme="default"]) .media-menu-hint-label': {
1872
1761
  maxWidth: "calc(var(--media-spacing) * 24)",
1873
1762
  textOverflow: "ellipsis",
1874
1763
  whiteSpace: "nowrap",
1764
+ opacity: ".65",
1875
1765
  overflow: "hidden"
1876
1766
  },
1877
1767
  '& :where(.media-skin[data-theme="default"]) .media-menu-radio-group': {
1878
1768
  maxHeight: "inherit",
1879
- gap: "calc(var(--media-spacing) * 0.5)",
1769
+ gap: "calc(var(--media-spacing) * .5)",
1880
1770
  anchorScope: "--media-menu-item-highlight-anchor",
1881
1771
  flexDirection: "column",
1882
1772
  display: "flex"
@@ -1914,7 +1804,7 @@ const e = {
1914
1804
  boxShadow: "0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--media-shadow-separator)",
1915
1805
  display: "block"
1916
1806
  },
1917
- "@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) ": {
1807
+ "@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) ": {
1918
1808
  '& :where(.media-skin[data-theme="default"]) .media-menu-separator': {
1919
1809
  borderColor: "var(--media-foreground)"
1920
1810
  },
@@ -1939,7 +1829,7 @@ const e = {
1939
1829
  fontVariantNumeric: "tabular-nums",
1940
1830
  outlineOffset: "-2px",
1941
1831
  transitionProperty: "background-color, color",
1942
- transitionDuration: "0.15s"
1832
+ transitionDuration: ".15s"
1943
1833
  },
1944
1834
  {
1945
1835
  transitionDuration: "var(--media-duration-fast)",
@@ -1947,7 +1837,7 @@ const e = {
1947
1837
  userSelect: "none",
1948
1838
  textShadow: "0 1px 0 var(--media-shadow-current-color)",
1949
1839
  outline: "2px solid #0000",
1950
- transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
1840
+ transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)",
1951
1841
  display: "flex",
1952
1842
  position: "relative"
1953
1843
  }
@@ -1959,12 +1849,12 @@ const e = {
1959
1849
  '& :where(.media-skin[data-theme="default"]) .media-menu-trigger-item[aria-disabled="true"]': {
1960
1850
  pointerEvents: "none",
1961
1851
  cursor: "not-allowed",
1962
- opacity: "0.5"
1852
+ opacity: ".5"
1963
1853
  },
1964
1854
  '& :where(.media-skin[data-theme="default"]) .media-menu-trigger-item[data-availability="unavailable"], & :where(.media-skin[data-theme="default"]) .media-menu-trigger-item[data-availability="unsupported"]': {
1965
1855
  display: "none"
1966
1856
  },
1967
- '& :where(.media-skin[data-theme="default"]) .media-menu-trigger-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where( :not([aria-disabled="true"]) )': {
1857
+ '& :where(.media-skin[data-theme="default"]) .media-menu-trigger-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
1968
1858
  backgroundColor: "var(--media-accent)",
1969
1859
  color: "var(--media-accent-foreground)"
1970
1860
  },
@@ -1975,7 +1865,7 @@ const e = {
1975
1865
  '& :where(.media-skin[data-theme="default"]) .media-menu-trigger-item[data-highlighted]': {
1976
1866
  anchorName: "--media-menu-item-highlight-anchor"
1977
1867
  },
1978
- '& :where(.media-skin[data-theme="default"]) .media-menu-trigger-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where( :not([aria-disabled="true"]) )': {
1868
+ '& :where(.media-skin[data-theme="default"]) .media-menu-trigger-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
1979
1869
  transitionDuration: "var(--media-duration-slow)",
1980
1870
  backgroundColor: "#0000"
1981
1871
  }
@@ -1987,43 +1877,27 @@ const e = {
1987
1877
  filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
1988
1878
  flexShrink: "0"
1989
1879
  },
1990
- '& :where(.media-skin[data-theme="default"]) .media-menu-trigger-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-trigger-item-icon': {
1880
+ '& :where(:where(.media-skin[data-theme="default"]) .media-menu-trigger-item):where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-trigger-item-icon': {
1991
1881
  color: "inherit"
1992
1882
  },
1993
- "@supports (top: anchor(top)) ": {},
1994
1883
  '& :where(.media-skin[data-theme="default"]) .media-menu-badge': {
1995
1884
  borderRadius: "var(--media-control-radius)",
1996
1885
  backgroundColor: "var(--media-accent)",
1997
1886
  paddingInline: "calc(var(--media-spacing) * 1.5)",
1998
- fontSize: "0.7em",
1887
+ fontSize: ".7em",
1999
1888
  fontWeight: "600"
2000
1889
  },
2001
- "@media (forced-colors: active) ": {},
2002
- "@supports (top: anchor(top)) ": {},
2003
- "@supports (color: color-mix(in lab, red, red)) ": {},
2004
- "@supports (top: anchor(top)) ": {},
2005
- "@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) ": {
2006
- "@supports (color: color-mix(in lab, red, red))": {}
2007
- },
2008
1890
  '& :where(.media-skin[data-theme="default"]) .media-menu-tier': {
2009
- color: "currentColor",
2010
- paddingInlineStart: "calc(var(--media-spacing) * 0.5)",
1891
+ opacity: ".7",
1892
+ paddingInlineStart: "calc(var(--media-spacing) * .5)",
2011
1893
  paddingTop: "1px",
2012
- fontSize: "0.7em",
1894
+ fontSize: ".7em",
2013
1895
  fontWeight: "600",
2014
1896
  lineHeight: "1"
2015
1897
  },
2016
- "@supports (color: color-mix(in lab, red, red)) ": {
2017
- '& :where(.media-skin[data-theme="default"]) .media-menu-tier': {
2018
- color: "color-mix(in oklab, currentcolor 70%, transparent)"
2019
- }
2020
- },
2021
- "@supports (top: anchor(top)) ": {},
2022
- "@media (forced-colors: active) ": {},
2023
- "@supports (top: anchor(top)) ": {},
2024
1898
  '& :where(.media-skin[data-theme="default"]) .media-menu-popup': {
2025
1899
  height: "var(--media-menu-height)",
2026
- maxHeight: "min( var(--media-menu-available-height, calc(var(--media-spacing) * 56)), calc(var(--media-spacing) * 56) )",
1900
+ maxHeight: "min(var(--media-menu-available-height, calc(var(--media-spacing) * 56)), calc(var(--media-spacing) * 56))",
2027
1901
  width: "var(--media-menu-width)",
2028
1902
  maxWidth: "var(--media-menu-available-width)",
2029
1903
  minWidth: "calc(var(--media-spacing) * 44)",
@@ -2036,13 +1910,13 @@ const e = {
2036
1910
  borderStyle: "solid",
2037
1911
  borderWidth: "0",
2038
1912
  margin: "0",
2039
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1913
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
2040
1914
  overflow: "hidden !important"
2041
1915
  },
2042
1916
  '& :where(.media-skin[data-theme="default"]) .media-menu-popup:is([data-starting-style], [data-ending-style])': {
2043
1917
  transitionProperty: "opacity, filter, transform, scale",
2044
1918
  transitionDuration: "var(--media-duration-fast)",
2045
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
1919
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
2046
1920
  },
2047
1921
  '& :where(.media-skin[data-theme="default"]) .media-menu-resizable-popup': {
2048
1922
  transitionProperty: "opacity, filter, transform, scale, width, height",
@@ -2051,14 +1925,14 @@ const e = {
2051
1925
  '& :where(.media-skin[data-theme="default"]) .media-settings-menu-trigger-icon': [
2052
1926
  {
2053
1927
  transitionProperty: "transform, translate, scale, rotate",
2054
- transitionDuration: "0.15s"
1928
+ transitionDuration: ".15s"
2055
1929
  },
2056
1930
  {
2057
1931
  transitionDuration: "var(--media-duration)",
2058
- transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
1932
+ transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)"
2059
1933
  }
2060
1934
  ],
2061
- '& :where(.media-skin[data-theme="default"]) .media-settings-menu-trigger[aria-expanded="true"] .media-settings-menu-trigger-icon': {
1935
+ '& :where(:where(.media-skin[data-theme="default"]) .media-settings-menu-trigger)[aria-expanded="true"] .media-settings-menu-trigger-icon': {
2062
1936
  rotate: "90deg"
2063
1937
  },
2064
1938
  "@media (prefers-reduced-motion: reduce) ": {
@@ -2092,11 +1966,11 @@ const e = {
2092
1966
  borderRadius: "inherit",
2093
1967
  backgroundImage: "var(--media-controls-gradient)",
2094
1968
  transitionProperty: "opacity",
2095
- transitionDuration: "0.15s"
1969
+ transitionDuration: ".15s"
2096
1970
  },
2097
1971
  {
2098
1972
  transitionDuration: "var(--media-duration-controls)",
2099
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1973
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
2100
1974
  position: "absolute",
2101
1975
  inset: "0"
2102
1976
  }
@@ -2114,12 +1988,12 @@ const e = {
2114
1988
  padding: "var(--media-spacing)",
2115
1989
  color: "var(--media-controls-foreground)",
2116
1990
  transitionProperty: "filter, opacity, scale, translate",
2117
- transitionDuration: "0.15s"
1991
+ transitionDuration: ".15s"
2118
1992
  },
2119
1993
  {
2120
1994
  transitionDuration: "calc(var(--media-duration-controls) / 2)",
2121
1995
  textShadow: "0 1px 0 var(--media-shadow-current-color)",
2122
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
1996
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
2123
1997
  display: "contents"
2124
1998
  }
2125
1999
  ],
@@ -2132,6 +2006,7 @@ const e = {
2132
2006
  backgroundColor: "var(--media-popover)",
2133
2007
  color: "var(--media-popover-foreground)",
2134
2008
  boxShadow: "0 0 0 1px var(--media-surface-border, var(--media-border)), var(--media-shadow-surface)",
2009
+ WebkitBackdropFilter: "var(--media-backdrop-filter-surface)",
2135
2010
  backdropFilter: "var(--media-backdrop-filter-surface)",
2136
2011
  alignItems: "center",
2137
2012
  display: "flex",
@@ -2162,7 +2037,7 @@ const e = {
2162
2037
  }
2163
2038
  }
2164
2039
  },
2165
- "@container media-root (width >= 42rem) ": {
2040
+ "@container media-root (width >= 42rem) ": {
2166
2041
  '& :where(.media-skin[data-theme="default"][data-preset="video"]) .video-controls-content': {
2167
2042
  insetInline: "calc(var(--media-spacing) * 3)",
2168
2043
  bottom: "calc(var(--media-spacing) * 3)"
@@ -2175,14 +2050,14 @@ const e = {
2175
2050
  zIndex: "30",
2176
2051
  transformOrigin: "bottom",
2177
2052
  borderRadius: "var(--media-controls-radius)",
2178
- padding: "calc(var(--media-spacing) * 0.5)",
2053
+ padding: "calc(var(--media-spacing) * .5)",
2179
2054
  transitionProperty: "filter, opacity, scale, translate",
2180
- transitionDuration: "0.15s"
2055
+ transitionDuration: ".15s"
2181
2056
  },
2182
2057
  {
2183
2058
  transitionDuration: "calc(var(--media-duration-controls) / 2)",
2184
2059
  alignItems: "center",
2185
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
2060
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
2186
2061
  display: "flex",
2187
2062
  position: "absolute"
2188
2063
  }
@@ -2200,9 +2075,10 @@ const e = {
2200
2075
  backgroundColor: "var(--media-popover)",
2201
2076
  color: "var(--media-popover-foreground)",
2202
2077
  boxShadow: "0 0 0 1px var(--media-surface-border, var(--media-border)), var(--media-shadow-surface)",
2078
+ WebkitBackdropFilter: "var(--media-backdrop-filter-surface)",
2203
2079
  backdropFilter: "var(--media-backdrop-filter-surface)"
2204
2080
  },
2205
- '& :where(.media-skin[data-theme="default"][data-preset="video"]) .video-controls-content:not([data-visible]) .video-controls-primary': {
2081
+ '& :where(:where(.media-skin[data-theme="default"][data-preset="video"]) .video-controls-content):not([data-visible]) .video-controls-primary': {
2206
2082
  pointerEvents: "none",
2207
2083
  translate: "0 var(--media-hidden-offset)",
2208
2084
  scale: "var(--media-hidden-scale) var(--media-hidden-scale)",
@@ -2219,7 +2095,7 @@ const e = {
2219
2095
  inset: "0"
2220
2096
  },
2221
2097
  "@media (pointer: fine)": {
2222
- '& :where(.media-skin[data-theme="default"][data-preset="video"]) .video-controls-content:not([data-visible]) .video-controls-primary': {
2098
+ '& :where(:where(.media-skin[data-theme="default"][data-preset="video"]) .video-controls-content):not([data-visible]) .video-controls-primary': {
2223
2099
  filter: "blur(var(--media-hidden-blur))"
2224
2100
  }
2225
2101
  }
@@ -2231,15 +2107,15 @@ const e = {
2231
2107
  zIndex: "30",
2232
2108
  transformOrigin: "top",
2233
2109
  borderRadius: "var(--media-controls-radius)",
2234
- padding: "calc(var(--media-spacing) * 0.5)",
2110
+ padding: "calc(var(--media-spacing) * .5)",
2235
2111
  transitionProperty: "filter, opacity, scale, translate",
2236
- transitionDuration: "0.15s"
2112
+ transitionDuration: ".15s"
2237
2113
  },
2238
2114
  {
2239
2115
  transitionDuration: "calc(var(--media-duration-controls) / 2)",
2240
2116
  alignItems: "center",
2241
2117
  gap: "1px",
2242
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
2118
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
2243
2119
  display: "flex",
2244
2120
  position: "absolute"
2245
2121
  }
@@ -2258,9 +2134,10 @@ const e = {
2258
2134
  backgroundColor: "var(--media-popover)",
2259
2135
  color: "var(--media-popover-foreground)",
2260
2136
  boxShadow: "0 0 0 1px var(--media-surface-border, var(--media-border)), var(--media-shadow-surface)",
2137
+ WebkitBackdropFilter: "var(--media-backdrop-filter-surface)",
2261
2138
  backdropFilter: "var(--media-backdrop-filter-surface)"
2262
2139
  },
2263
- '& :where(.media-skin[data-theme="default"][data-preset="video"]) .video-controls-content:not([data-visible]) .video-controls-secondary': {
2140
+ '& :where(:where(.media-skin[data-theme="default"][data-preset="video"]) .video-controls-content):not([data-visible]) .video-controls-secondary': {
2264
2141
  pointerEvents: "none",
2265
2142
  translate: "0 calc(var(--media-hidden-offset) * -1)",
2266
2143
  scale: "var(--media-hidden-scale) var(--media-hidden-scale)",
@@ -2277,7 +2154,7 @@ const e = {
2277
2154
  inset: "0"
2278
2155
  },
2279
2156
  "@media (pointer: fine)": {
2280
- '& :where(.media-skin[data-theme="default"][data-preset="video"]) .video-controls-content:not([data-visible]) .video-controls-secondary': {
2157
+ '& :where(:where(.media-skin[data-theme="default"][data-preset="video"]) .video-controls-content):not([data-visible]) .video-controls-secondary': {
2281
2158
  filter: "blur(var(--media-hidden-blur))"
2282
2159
  }
2283
2160
  }
@@ -2317,13 +2194,13 @@ const e = {
2317
2194
  fontVariantNumeric: "tabular-nums",
2318
2195
  outlineOffset: "-2px",
2319
2196
  transitionProperty: "outline-color, outline-offset",
2320
- transitionDuration: "0.15s"
2197
+ transitionDuration: ".15s"
2321
2198
  },
2322
2199
  {
2323
2200
  transitionDuration: "var(--media-duration-fast)",
2324
- borderRadius: "0.25rem",
2201
+ borderRadius: ".25rem",
2325
2202
  outline: "2px solid #0000",
2326
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
2203
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
2327
2204
  }
2328
2205
  ],
2329
2206
  '& :where(.media-skin[data-theme="default"][data-preset="video"]) .media-time-toggle:focus-visible': {
@@ -2332,24 +2209,24 @@ const e = {
2332
2209
  },
2333
2210
  '& :where(.media-skin[data-theme="default"][data-preset="video"]) .media-time-toggle[aria-disabled="true"]': {
2334
2211
  cursor: "not-allowed",
2335
- opacity: "0.5"
2212
+ opacity: ".5"
2336
2213
  },
2337
2214
  '& :where(.media-skin[data-theme="default"][data-preset="video"]) .media-time-value': [
2338
2215
  {
2339
2216
  fontVariantNumeric: "tabular-nums",
2340
2217
  transitionProperty: "opacity",
2341
- transitionDuration: "0.15s"
2218
+ transitionDuration: ".15s"
2342
2219
  },
2343
2220
  {
2344
2221
  transitionDuration: "var(--media-duration-slow)",
2345
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
2222
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
2346
2223
  }
2347
2224
  ],
2348
2225
  '& :where(.media-skin[data-theme="default"][data-preset="video"]) .media-time-value[data-unavailable]': {
2349
- opacity: "0.5"
2226
+ opacity: ".5"
2350
2227
  },
2351
- "@media (pointer: fine) ": {
2352
- '& :where(.media-skin[data-theme="default"][data-preset="video"]) .video-skin:not([data-controls-visible]), & .media-skin[data-theme="default"][data-preset="video"].video-skin:not([data-controls-visible])': {
2228
+ "@media (pointer: fine) ": {
2229
+ '& :where(.media-skin[data-theme="default"][data-preset="video"]) .video-skin:not([data-controls-visible]), & :where(.media-skin[data-theme="default"][data-preset="video"]).video-skin:not([data-controls-visible])': {
2353
2230
  cursor: "none"
2354
2231
  }
2355
2232
  }
@@ -2358,57 +2235,58 @@ const e = {
2358
2235
  "& .media-skin": {
2359
2236
  "--media-background": "oklch(0% 0 0)",
2360
2237
  "--media-foreground": "oklch(100% 0 0)",
2361
- "--media-controls": "oklch(0% 0 0 / 0.35)",
2238
+ "--media-controls": "oklch(0% 0 0 / .35)",
2362
2239
  "--media-controls-foreground": "var(--media-foreground)",
2363
- "--media-popover": "oklch(100% 0 0 / 0.1)",
2240
+ "--media-popover": "oklch(100% 0 0 / .1)",
2364
2241
  "--media-popover-foreground": "var(--media-foreground)",
2365
2242
  "--media-primary": "var(--media-accent-color, var(--media-default-accent-color))",
2366
- "--media-primary-foreground": "var( --media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-default-accent-color))) )",
2243
+ "--media-primary-foreground": "var(--media-accent-text-color, var(--media-default-accent-text-color))",
2367
2244
  "--media-accent": "var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent))",
2368
- "--media-accent-foreground": "var( --media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))) )",
2369
- "--media-muted": "oklch(100% 0 0 / 0.15)",
2370
- "--media-muted-foreground": "oklch(100% 0 0 / 0.65)",
2371
- "--media-border": "oklch(0% 0 0 / 0.1)",
2245
+ "--media-accent-foreground": "var(--media-accent-text-color, currentColor)",
2246
+ "--media-muted": "oklch(100% 0 0 / .15)",
2247
+ "--media-muted-foreground": "oklch(100% 0 0 / .65)",
2248
+ "--media-border": "oklch(0% 0 0 / .1)",
2372
2249
  "--media-ring": "oklch(100% 0 0)",
2373
2250
  "--media-backdrop": "oklch(0% 0 0)",
2374
- "--media-live-color": "oklch(65% 0.22 27)",
2375
- "--media-shadow-surface": "0 1px 3px 0 oklch(0% 0 0 / 0.15), 0 1px 2px -1px oklch(0% 0 0 / 0.15)",
2251
+ "--media-live-color": "oklch(65% .22 27)",
2252
+ "--media-shadow-surface": "0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15)",
2376
2253
  "--media-shadow-surface-inset": "inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d",
2377
2254
  "--media-shadow-thumb": "0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059",
2378
2255
  "--media-shadow-tooltip": "0 0 0 1px var(--media-border), var(--media-shadow-surface)",
2379
- "--media-shadow-separator": "0 1px 0 0 oklch(100% 0 0 / 0.075)",
2380
- "--media-shadow-current-color": "oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15))",
2381
- "--media-shadow-subtle-current-color": "oklch(from var(--media-shadow-current-color) l c h / calc(alpha * 0.4))",
2256
+ "--media-shadow-separator": "0 1px 0 0 oklch(100% 0 0 / .075)",
2257
+ "--media-shadow-current-color": "oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15))",
2258
+ "--media-shadow-subtle-current-color": "color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent)",
2382
2259
  "--media-text-shadow-dialog": "0 1px 0 #00000040",
2383
- "--media-backdrop-filter-surface": "blur(16px) saturate(150%)",
2260
+ "--media-backdrop-filter-surface": "blur(16px) saturate(110%)",
2384
2261
  "--media-backdrop-filter-indicator": "blur(8px)",
2385
- "--media-backdrop-filter-dialog": "blur(16px) saturate(150%)",
2262
+ "--media-backdrop-filter-dialog": "blur(16px) saturate(110%)",
2386
2263
  "--media-control-corner-shape": "round",
2387
2264
  "--media-control-radius": "99px",
2388
2265
  "--media-control-size": "calc(var(--media-spacing) * 9)",
2389
2266
  "--media-controls-radius": "var(--media-control-radius)",
2390
2267
  "--media-default-accent-color": "oklch(100% 0 0)",
2268
+ "--media-default-accent-text-color": "oklch(0% 0 0)",
2391
2269
  "--media-duration-instant": "50ms",
2392
- "--media-duration-fast": "0.1s",
2393
- "--media-duration": "0.15s",
2394
- "--media-duration-slow": "0.2s",
2395
- "--media-duration-slower": "0.25s",
2396
- "--media-duration-controls": "0.1s",
2397
- "--media-duration-dialog": "0.35s",
2270
+ "--media-duration-fast": ".1s",
2271
+ "--media-duration": ".15s",
2272
+ "--media-duration-slow": ".2s",
2273
+ "--media-duration-slower": ".25s",
2274
+ "--media-duration-controls": ".1s",
2275
+ "--media-duration-dialog": ".35s",
2398
2276
  "--media-duration-indicator": "var(--media-duration-slower)",
2399
- "--media-duration-menu": "0.25s",
2277
+ "--media-duration-menu": ".25s",
2400
2278
  "--media-duration-slider": "var(--media-duration-fast)",
2401
- "--media-delay-dialog": "0.1s",
2402
- "--media-hidden-scale": "0.95",
2279
+ "--media-delay-dialog": ".1s",
2280
+ "--media-hidden-scale": ".95",
2403
2281
  "--media-hidden-blur": "8px",
2404
2282
  "--media-hidden-offset": "calc(var(--media-spacing) * 1)",
2405
2283
  "--media-hidden-icon-scale": "0",
2406
- "--media-hidden-indicator-scale": "0.9",
2284
+ "--media-hidden-indicator-scale": ".9",
2407
2285
  "--media-hidden-indicator-offset": "-25%",
2408
- "--media-hidden-playback-scale": "0.85",
2409
- "--media-hidden-popup-scale": "0.95",
2286
+ "--media-hidden-playback-scale": ".85",
2287
+ "--media-hidden-popup-scale": ".95",
2410
2288
  "--media-hidden-popup-blur": "4px",
2411
- "--media-hidden-preview-scale": "0.8",
2289
+ "--media-hidden-preview-scale": ".8",
2412
2290
  "--media-hidden-preview-offset": "calc(var(--media-spacing) * 2)",
2413
2291
  "--media-hidden-seek-offset": "60%",
2414
2292
  "--media-menu-item-radius": "calc(var(--media-spacing) * 2)",
@@ -2424,11 +2302,27 @@ const e = {
2424
2302
  "--media-slider-preview-label-offset": "calc(var(--media-spacing) * 10.5)",
2425
2303
  "--media-video-border-radius": "var(--media-border-radius, 28px)",
2426
2304
  "--media-scale": "1",
2427
- "--media-scrollbar-thumb-color": "oklch(from currentColor l c h / 0.3)",
2305
+ "--media-scrollbar-thumb-color": "color-mix(in oklab, currentColor 30%, transparent)",
2428
2306
  "--media-spacing": "calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4)",
2429
2307
  scrollbarColor: "var(--media-scrollbar-thumb-color) transparent",
2430
2308
  scrollbarWidth: "thin"
2431
2309
  },
2310
+ "@supports (color: contrast-color(red))": {
2311
+ "& .media-skin": {
2312
+ "--media-primary-foreground": "var(--media-accent-text-color, contrast-color(var(--media-primary)))",
2313
+ "--media-accent-foreground": "var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))))"
2314
+ }
2315
+ },
2316
+ "@supports (color: oklch(from red l c h))": {
2317
+ "& .media-skin": {
2318
+ "--media-shadow-subtle-current-color": "oklch(from var(--media-shadow-current-color) l c h / calc(alpha * .4))"
2319
+ }
2320
+ },
2321
+ "@supports (color: oklch(from currentColor l c h))": {
2322
+ "& .media-skin": {
2323
+ "--media-scrollbar-thumb-color": "oklch(from currentColor l c h / .3)"
2324
+ }
2325
+ },
2432
2326
  "& .media-skin::-webkit-scrollbar-thumb": {
2433
2327
  background: "var(--media-scrollbar-thumb-color)",
2434
2328
  borderRadius: "9999px"
@@ -2455,29 +2349,63 @@ const e = {
2455
2349
  },
2456
2350
  "@layer base.preset": {
2457
2351
  '& .media-skin:is([data-preset="video"], [data-preset="live-video"])': {
2458
- "--media-frame-border": "var(--media-border-color, light-dark(#0000001a, #ffffff26))",
2459
- "--media-controls-gradient": "linear-gradient( to top in oklab, oklch(from var(--media-backdrop) l c h / 0.4), oklch(from var(--media-backdrop) l c h / 0.2), oklch(from var(--media-backdrop) l c h / 0.5) )",
2460
- "--media-caption-controls-y": "calc(var(--media-spacing) * -14)",
2352
+ "--media-frame-border": "var(--media-border-color, #0000001a)",
2353
+ "--media-controls-gradient": "linear-gradient(to top, color-mix(in oklab, var(--media-backdrop) 40%, transparent), color-mix(in oklab, var(--media-backdrop) 20%, transparent), color-mix(in oklab, var(--media-backdrop) 50%, transparent))",
2354
+ "--media-caption-controls-y": "calc(var(--media-spacing) * -16)",
2461
2355
  "--media-slider-preview-offset": "calc(var(--media-spacing) * 9)",
2462
- "--media-thumbnail-gradient": "linear-gradient( to top, oklch(from var(--media-backdrop) l c h / 0.5), oklch(from var(--media-backdrop) l c h / 0.1), transparent )"
2356
+ "--media-thumbnail-gradient": "linear-gradient(to top, color-mix(in oklab, var(--media-backdrop) 50%, transparent), color-mix(in oklab, var(--media-backdrop) 10%, transparent), transparent)"
2463
2357
  },
2464
- '& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="minimal"]': {
2465
- "--media-frame-border": "var(--media-border-color, light-dark(#00000026, #ffffff26))",
2466
- "--media-controls-gradient": "linear-gradient( to top in oklab, oklch(from var(--media-backdrop) l c h / 0.5), oklch(from var(--media-backdrop) l c h / 0.2) )",
2467
- "--media-indicator-gradient": "linear-gradient( to bottom, oklch(from var(--media-backdrop) l c h / 0.35), oklch(from var(--media-backdrop) l c h / 0.2) calc(var(--media-spacing) * 12), transparent )",
2468
- "--media-caption-controls-y": "calc(var(--media-spacing) * -18)",
2358
+ "@supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red))": {
2359
+ '& .media-skin:is([data-preset="video"], [data-preset="live-video"])': {
2360
+ "--media-controls-gradient": "linear-gradient(to top in oklab, oklch(from var(--media-backdrop) l c h / .4), oklch(from var(--media-backdrop) l c h / .2), oklch(from var(--media-backdrop) l c h / .5))"
2361
+ }
2362
+ },
2363
+ "@supports (color: oklch(from red l c h))": {
2364
+ '& .media-skin:is([data-preset="video"], [data-preset="live-video"])': {
2365
+ "--media-thumbnail-gradient": "linear-gradient(to top, oklch(from var(--media-backdrop) l c h / .5), oklch(from var(--media-backdrop) l c h / .1), transparent)"
2366
+ }
2367
+ },
2368
+ '& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"]': {
2369
+ "--media-frame-border": "var(--media-border-color, #00000026)",
2370
+ "--media-controls-gradient": "linear-gradient(to top, color-mix(in oklab, var(--media-backdrop) 50%, transparent), color-mix(in oklab, var(--media-backdrop) 20%, transparent))",
2371
+ "--media-indicator-gradient": "linear-gradient(to bottom, color-mix(in oklab, var(--media-backdrop) 35%, transparent), color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12), transparent)",
2372
+ "--media-caption-controls-y": "calc(var(--media-spacing) * -14)",
2469
2373
  "--media-slider-preview-offset": "calc(var(--media-spacing) * 11)"
2374
+ },
2375
+ '& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"]': {
2376
+ "--media-caption-controls-y": "calc(var(--media-spacing) * -18)"
2377
+ },
2378
+ '& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="scaffold"]': {
2379
+ "--media-caption-controls-y": "calc(var(--media-spacing) * -20)"
2380
+ },
2381
+ "@supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) ": {
2382
+ '& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"]': {
2383
+ "--media-controls-gradient": "linear-gradient(to top in oklab, oklch(from var(--media-backdrop) l c h / .5), oklch(from var(--media-backdrop) l c h / .2))"
2384
+ }
2385
+ },
2386
+ "@supports (color: oklch(from red l c h)) ": {
2387
+ '& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"]': {
2388
+ "--media-indicator-gradient": "linear-gradient(to bottom, oklch(from var(--media-backdrop) l c h / .35), oklch(from var(--media-backdrop) l c h / .2) calc(var(--media-spacing) * 12), transparent)"
2389
+ }
2390
+ },
2391
+ "@supports (color: light-dark(red, red))": {
2392
+ '& .media-skin:is([data-preset="video"], [data-preset="live-video"])': {
2393
+ "--media-frame-border": "var(--media-border-color, light-dark(#0000001a, #ffffff26))"
2394
+ },
2395
+ '& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"]': {
2396
+ "--media-frame-border": "var(--media-border-color, light-dark(#00000026, #ffffff26))"
2397
+ }
2470
2398
  }
2471
2399
  },
2472
2400
  "@layer base.preferences": {
2473
2401
  "@media (pointer: fine) and (prefers-reduced-motion: no-preference)": {
2474
2402
  "& .media-skin:not([data-controls-visible])": {
2475
- "--media-duration-controls": "0.3s"
2403
+ "--media-duration-controls": ".3s"
2476
2404
  }
2477
2405
  },
2478
2406
  "@media (pointer: coarse) and (prefers-reduced-motion: no-preference)": {
2479
2407
  "& .media-skin:not([data-controls-visible])": {
2480
- "--media-duration-controls": "0.15s"
2408
+ "--media-duration-controls": ".15s"
2481
2409
  }
2482
2410
  },
2483
2411
  "@media (prefers-reduced-motion: reduce)": {
@@ -2513,12 +2441,17 @@ const e = {
2513
2441
  "@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)": {
2514
2442
  "& .media-skin": {
2515
2443
  "--media-popover": "var(--media-background)",
2516
- "--media-scrollbar-thumb-color": "oklch(from currentColor l c h / 0.8)",
2444
+ "--media-scrollbar-thumb-color": "color-mix(in oklab, currentColor 80%, transparent)",
2517
2445
  "--media-backdrop-filter-surface": "none",
2518
2446
  "--media-backdrop-filter-indicator": "none",
2519
2447
  "--media-backdrop-filter-dialog": "none",
2520
2448
  "--media-shadow-surface-inset": "inset 0 1px 0 0 #ffffff40, inset 0 0 0 1px #ffffff20",
2521
2449
  scrollbarWidth: "auto"
2450
+ },
2451
+ "@supports (color: oklch(from currentColor l c h))": {
2452
+ "& .media-skin": {
2453
+ "--media-scrollbar-thumb-color": "oklch(from currentColor l c h / .8)"
2454
+ }
2522
2455
  }
2523
2456
  },
2524
2457
  "@media (forced-colors: active)": {
@@ -2540,7 +2473,7 @@ const e = {
2540
2473
  paddingInline: "calc(var(--media-spacing) * 3)",
2541
2474
  paddingBlock: "calc(var(--media-spacing) * 2)",
2542
2475
  fontSize: "calc(var(--media-spacing) * 2.75)",
2543
- letterSpacing: "0.05em",
2476
+ letterSpacing: ".05em",
2544
2477
  textTransform: "uppercase",
2545
2478
  fontWeight: "600",
2546
2479
  lineHeight: "1",
@@ -2551,7 +2484,7 @@ const e = {
2551
2484
  width: "calc(var(--media-spacing) * 2)",
2552
2485
  height: "calc(var(--media-spacing) * 2)",
2553
2486
  transitionProperty: "background-color",
2554
- transitionDuration: "0.15s"
2487
+ transitionDuration: ".15s"
2555
2488
  },
2556
2489
  {
2557
2490
  transitionDuration: "var(--media-duration)",
@@ -2559,7 +2492,7 @@ const e = {
2559
2492
  backgroundColor: "currentColor",
2560
2493
  borderRadius: "9999px",
2561
2494
  flexShrink: "0",
2562
- transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
2495
+ transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
2563
2496
  display: "inline-block"
2564
2497
  }
2565
2498
  ],
@@ -2588,9 +2521,9 @@ const e = {
2588
2521
  right: "-1px"
2589
2522
  },
2590
2523
  '& :where(.media-skin[data-theme="default"]) .media-seek-button-label': {
2591
- letterSpacing: "-0.05em",
2524
+ letterSpacing: "-.05em",
2592
2525
  fontVariantNumeric: "tabular-nums",
2593
- fontSize: "0.7em",
2526
+ fontSize: ".7em",
2594
2527
  fontWeight: "500",
2595
2528
  position: "absolute",
2596
2529
  bottom: "-3px"