@m4l/gclick 0.16.0 → 0.17.0

package/components/VideoPlayer/VideojsMinimalSkin.styles.js

@@ -0,0 +1,1561 @@
+const t = (i) => ({
+  /*
+   * ==========================================================================
+   * Reset
+   * ==========================================================================
+   */
+  ".media-minimal-skin *, .media-minimal-skin *::before, .media-minimal-skin *::after": {
+    boxSizing: "border-box"
+  },
+  ".media-minimal-skin img, .media-minimal-skin video, .media-minimal-skin svg": {
+    display: "block",
+    maxWidth: "100%"
+  },
+  ".media-minimal-skin button": {
+    font: "inherit"
+  },
+  ".media-minimal-skin [hidden][hidden]": {
+    /* Keep authored templates hidden even when component classes set display. */
+    display: "none"
+  },
+  "@media (prefers-reduced-motion: no-preference)": {
+    ".media-minimal-skin": {
+      interpolateSize: "allow-keywords"
+    }
+  },
+  /*
+   * ==========================================================================
+   * Root Container
+   * ==========================================================================
+   */
+  ".media-minimal-skin": {
+    "--media-current-shadow-color": "oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15))",
+    "--media-current-shadow-color-subtle": "oklch(from var(--media-current-shadow-color) l c h / calc(alpha * 0.4))",
+    "--media-icon-size": "18px",
+    "--media-color-scrollbar-thumb": "oklch(from currentColor l c h / 0.3)",
+    position: "relative",
+    display: "block",
+    width: "100%",
+    height: "100%",
+    container: "media-root / inline-size",
+    // Themed deviation (vendor value: `Inter Variable, Inter, ui-sans-serif, system-ui, sans-serif`) —
+    // the chrome follows the platform font instead of the vendor stack.
+    fontFamily: i.typography.fontFamily,
+    fontSize: "0.8125rem",
+    /* 13px at 100% font size */
+    WebkitFontSmoothing: "auto",
+    MozOsxFontSmoothing: "auto",
+    lineHeight: "1.5",
+    letterSpacing: "normal",
+    outline: "2px solid transparent",
+    outlineOffset: "-4px",
+    scrollbarColor: "var(--media-color-scrollbar-thumb) transparent",
+    scrollbarWidth: "thin",
+    borderRadius: "var(--media-border-radius, 0.75rem)",
+    isolation: "isolate",
+    transitionTimingFunction: "ease-out",
+    transitionDuration: "100ms",
+    transitionProperty: "outline-offset, outline-color",
+    "&:focus-visible": {
+      outlineColor: "currentColor",
+      outlineOffset: "2px"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      background: "var(--media-color-scrollbar-thumb)",
+      borderRadius: "9999px"
+    },
+    "@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more)": {
+      "--media-color-scrollbar-thumb": "oklch(from currentColor l c h / 0.8)",
+      scrollbarWidth: "auto"
+    }
+  },
+  /*
+   * ==========================================================================
+   * Media Element
+   * ==========================================================================
+   */
+  ".media-minimal-skin ::slotted(video), .media-minimal-skin video": {
+    display: "block",
+    width: "100%",
+    height: "100%",
+    // Double cast: csstype narrows this property to keywords and rejects the
+    // vendor's `var()` expression. Serializes identically.
+    objectFit: "var(--media-object-fit, contain)",
+    objectPosition: "var(--media-object-position, center)"
+  },
+  ".media-minimal-skin ::slotted(video)": {
+    borderRadius: "var(--media-video-border-radius)"
+  },
+  ".media-minimal-skin video": {
+    borderRadius: "inherit"
+  },
+  ".media-minimal-skin:fullscreen ::slotted(video), .media-minimal-skin:fullscreen video": {
+    objectFit: "contain"
+  },
+  /*
+   * ==========================================================================
+   * Overlay / Scrim
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-overlay": {
+    position: "absolute",
+    inset: "0",
+    pointerEvents: "none",
+    backgroundImage: "linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0))",
+    borderRadius: "inherit",
+    opacity: "0",
+    backdropFilter: "blur(0) saturate(1)",
+    transitionTimingFunction: "ease-out",
+    transitionDuration: "var(--media-controls-transition-duration)",
+    transitionProperty: "opacity, backdrop-filter"
+  },
+  ".media-minimal-skin .media-error ~ .media-overlay": {
+    transitionDelay: "var(--media-error-dialog-transition-delay)",
+    transitionDuration: "var(--media-error-dialog-transition-duration)"
+  },
+  ".media-minimal-skin .media-controls[data-visible] ~ .media-overlay, .media-minimal-skin .media-error[data-open] ~ .media-overlay": {
+    opacity: "1"
+  },
+  ".media-minimal-skin .media-buffering-indicator[data-visible] ~ .media-overlay": {
+    background: "oklch(0 0 0 / 0.35)",
+    opacity: "1",
+    backdropFilter: "blur(8px)"
+  },
+  ".media-minimal-skin .media-error[data-open] ~ .media-overlay": {
+    backdropFilter: "blur(16px) saturate(1.2)"
+  },
+  /*
+   * ==========================================================================
+   * Buffering Indicator
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-buffering-indicator": {
+    position: "absolute",
+    inset: "0",
+    zIndex: "10",
+    display: "none",
+    placeContent: "center",
+    color: "oklch(1 0 0)",
+    pointerEvents: "none",
+    "&:not([data-visible])": {
+      "--media-spinner-animation": "none"
+    },
+    "&[data-visible]": {
+      display: "grid"
+    }
+  },
+  /*
+   * ==========================================================================
+   * Error Dialog
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-error:not([data-open])": {
+    display: "none"
+  },
+  ".media-minimal-skin .media-error__title": {
+    fontWeight: "600",
+    lineHeight: "1.25"
+  },
+  ".media-minimal-skin .media-error__description": {
+    overflowWrap: "anywhere",
+    opacity: "0.7"
+  },
+  ".media-minimal-skin .media-error__actions": {
+    display: "flex",
+    gap: "0.5rem",
+    "& > *": {
+      flex: "1"
+    }
+  },
+  ".media-minimal-skin .media-error[data-open] ~ .media-controls *": {
+    visibility: "hidden"
+  },
+  /*
+   * ==========================================================================
+   * Controls
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-controls": {
+    display: "flex",
+    alignItems: "center",
+    container: "media-controls / inline-size",
+    textShadow: "0 1px 0 var(--media-current-shadow-color)",
+    backgroundColor: "var(--media-controls-background-color)",
+    backdropFilter: "var(--media-controls-backdrop-filter)"
+  },
+  /*
+   * ==========================================================================
+   * Time Controls & Display
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-time-controls": {
+    display: "flex",
+    flex: "1",
+    flexDirection: "row-reverse",
+    gap: "0.75rem",
+    alignItems: "center",
+    container: "media-time-controls / inline-size"
+  },
+  ".media-minimal-skin .media-time-group": {
+    display: "flex",
+    gap: "0.25rem",
+    alignItems: "center"
+  },
+  ".media-minimal-skin .media-time": {
+    fontVariantNumeric: "tabular-nums"
+  },
+  '.media-minimal-skin .media-time[role="button"]': {
+    cursor: "pointer",
+    outline: "2px solid transparent",
+    outlineOffset: "-2px",
+    borderRadius: "0.25rem",
+    transitionTimingFunction: "ease-out",
+    transitionDuration: "100ms",
+    transitionProperty: "outline-color, outline-offset",
+    "@supports (corner-shape: squircle)": {
+      borderRadius: "1rem",
+      cornerShape: "squircle"
+    },
+    "&:focus-visible": {
+      outlineColor: "currentColor",
+      outlineOffset: "2px"
+    }
+  },
+  ".media-minimal-skin .media-time--current, .media-minimal-skin .media-time-separator": {
+    display: "none"
+  },
+  "@container media-root (width > 42rem)": {
+    ".media-minimal-skin .media-time-controls": {
+      flexDirection: "row"
+    },
+    ".media-minimal-skin .media-time--duration, .media-minimal-skin .media-time-separator": {
+      color: "oklch(from currentColor l c h / 0.6)"
+    },
+    ".media-minimal-skin .media-time--current, .media-minimal-skin .media-time-separator": {
+      display: "inline"
+    }
+  },
+  /*
+   * ==========================================================================
+   * Buttons
+   * ==========================================================================
+   */
+  /* Base button */
+  ".media-minimal-skin .media-button": {
+    display: "flex",
+    flexShrink: "0",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "0",
+    padding: "0.5rem 1rem",
+    textAlign: "center",
+    touchAction: "manipulation",
+    cursor: "pointer",
+    userSelect: "none",
+    outline: "2px solid transparent",
+    outlineOffset: "-2px",
+    border: "none",
+    borderRadius: "0.5rem",
+    transitionTimingFunction: "ease-out",
+    transitionDuration: "150ms",
+    transitionProperty: "background-color, outline-offset, scale",
+    /* Fix weird jumping when clicking on the buttons in Safari. */
+    willChange: "scale",
+    "&:focus-visible": {
+      outlineColor: "currentColor",
+      outlineOffset: "2px"
+    },
+    "&:active": {
+      scale: "0.98"
+    },
+    "&[disabled]": {
+      cursor: "not-allowed",
+      opacity: "0.5",
+      filter: "grayscale(1)"
+    },
+    '&[data-availability="unavailable"], &[data-availability="unsupported"]': {
+      display: "none"
+    }
+  },
+  "@supports (corner-shape: squircle)": {
+    ".media-minimal-skin .media-button": {
+      borderRadius: "1rem",
+      cornerShape: "squircle"
+    }
+  },
+  /* Primary button variant */
+  ".media-minimal-skin .media-button--primary": {
+    fontWeight: "500",
+    color: "oklch(0 0 0)",
+    textShadow: "none",
+    background: "oklch(1 0 0)"
+  },
+  /* Subtle button variant */
+  ".media-minimal-skin .media-button--subtle": {
+    color: "inherit",
+    textShadow: "inherit",
+    background: "transparent",
+    '&:hover, &:focus-visible, &[aria-expanded="true"]': {
+      background: "oklch(from currentColor l c h / 0.1)"
+    }
+  },
+  /* Icon button variant */
+  ".media-minimal-skin .media-button--icon": {
+    display: "grid",
+    width: "2.375rem",
+    aspectRatio: "1",
+    padding: "0",
+    "&:active": {
+      scale: "0.9"
+    },
+    "& .media-icon__container": {
+      display: "grid"
+    },
+    "& .media-icon": {
+      gridArea: "1 / 1",
+      transitionBehavior: "allow-discrete",
+      transitionProperty: "display, opacity",
+      transitionDuration: "150ms",
+      transitionTimingFunction: "ease-out",
+      filter: "drop-shadow(0 1px 0 var(--media-current-shadow-color))"
+    }
+  },
+  /* Seek button */
+  ".media-minimal-skin .media-button--seek": {
+    "& .media-icon__label": {
+      position: "absolute",
+      right: "-1px",
+      bottom: "-3px",
+      fontSize: "10px",
+      /* Hard coded due to size limitations. */
+      fontWeight: "500",
+      fontVariantNumeric: "tabular-nums",
+      letterSpacing: "-0.05em"
+    },
+    "&:has(.media-icon--flipped) .media-icon__label": {
+      right: "unset",
+      left: "-1px"
+    }
+  },
+  /* Playback rate button */
+  ".media-minimal-skin .media-button--playback-rate": {
+    padding: "0",
+    fontVariantNumeric: "tabular-nums",
+    "&::after": {
+      width: "4ch",
+      content: 'attr(data-rate) "\\00D7"'
+    },
+    "&[data-inline-rate-label]::after": {
+      content: "none"
+    }
+  },
+  /* Settings button */
+  ".media-minimal-skin .media-button--settings": {
+    display: "none",
+    "& .media-icon--settings": {
+      transition: "transform 150ms ease-in-out",
+      "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "0ms"
+      }
+    },
+    '&[aria-expanded="true"] .media-icon--settings': {
+      transform: "rotate(90deg)"
+    }
+  },
+  '.media-minimal-skin .media-button-group:has([data-availability="available"]) .media-button--settings': {
+    display: "grid"
+  },
+  /*
+   * Live button — wide pill button with a status dot (gray → red at the live
+   * edge) rendered via ::before, and "LIVE" text rendered as the button's own
+   * text content.
+   */
+  ".media-minimal-skin .media-button--live": {
+    display: "inline-flex",
+    gap: "0.4rem",
+    alignItems: "center",
+    width: "auto",
+    aspectRatio: "auto",
+    padding: "0.5rem 0.75rem",
+    fontSize: "0.75rem",
+    fontWeight: "600",
+    lineHeight: "1",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    "&::before": {
+      display: "inline-block",
+      flexShrink: "0",
+      width: "0.5rem",
+      height: "0.5rem",
+      content: '""',
+      backgroundColor: "oklch(from currentColor l c h / 0.4)",
+      borderRadius: "50%",
+      transition: "background-color 150ms ease-out"
+    },
+    "&[data-live-edge]::before": {
+      backgroundColor: "oklch(0.65 0.22 27)"
+    }
+  },
+  /*
+   * ==========================================================================
+   * Button Groups
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-button-group": {
+    display: "flex",
+    gap: "0.075rem",
+    alignItems: "center",
+    "@container media-root (width > 42rem)": {
+      gap: "0.125rem"
+    }
+  },
+  /*
+   * ==========================================================================
+   * Badge
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-badge": {
+    padding: "0.25rem 0.375rem",
+    fontSize: "0.6875rem",
+    fontWeight: "500",
+    lineHeight: "1",
+    color: "oklch(from currentColor l c h / 0.85)",
+    whiteSpace: "nowrap",
+    backgroundColor: "oklch(from currentColor l c h / 0.1)",
+    borderRadius: "0.25rem"
+  },
+  /*
+   * ==========================================================================
+   * Icons
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-icon__container": {
+    position: "relative"
+  },
+  ".media-minimal-skin .media-icon": {
+    flexShrink: "0",
+    width: "var(--media-icon-size)",
+    height: "var(--media-icon-size)"
+  },
+  ".media-minimal-skin .media-icon--flipped": {
+    scale: "-1 1"
+  },
+  /*
+   * ==========================================================================
+   * Poster Image
+   * ==========================================================================
+   */
+  ".media-minimal-skin media-poster, .media-minimal-skin > img": {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    transition: "opacity 0.25s"
+  },
+  ".media-minimal-skin media-poster:not([data-visible]), .media-minimal-skin > img:not([data-visible]), .media-minimal-skin > img[data-visible]:not([data-loaded])": {
+    opacity: "0"
+  },
+  ".media-minimal-skin media-poster ::slotted(img), .media-minimal-skin media-poster img": {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    // Double cast: csstype narrows this property to keywords and rejects the
+    // vendor's `var()` expression. Serializes identically.
+    objectFit: "var(--media-object-fit, contain)",
+    objectPosition: "var(--media-object-position, center)",
+    borderRadius: "var(--media-video-border-radius)"
+  },
+  ".media-minimal-skin > img": {
+    // Double cast: csstype narrows this property to keywords and rejects the
+    // vendor's `var()` expression. Serializes identically.
+    objectFit: "var(--media-object-fit, contain)",
+    objectPosition: "var(--media-object-position, center)",
+    borderRadius: "inherit"
+  },
+  /* Blurred placeholder: HTML path targets media-poster::before, React path targets the skin container::before */
+  ".media-minimal-skin media-poster::before, .media-minimal-skin::before": {
+    position: "absolute",
+    inset: "0",
+    pointerEvents: "none",
+    content: '""',
+    backgroundImage: "var(--media-poster-placeholder, none)",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "var(--media-object-position, center)",
+    backgroundSize: "var(--media-object-fit, contain)",
+    filter: "blur(var(--media-poster-placeholder-blur, 20px))"
+  },
+  /* React path: hidden by default, transitions in while poster loads */
+  ".media-minimal-skin::before": {
+    opacity: "0",
+    transition: "opacity 0.25s"
+  },
+  /* Show placeholder while the poster is visible but not yet loaded */
+  ".media-minimal-skin:has(img[data-visible]:not([data-loaded]))::before": {
+    opacity: "1"
+  },
+  ".media-minimal-skin:fullscreen media-poster ::slotted(img), .media-minimal-skin:fullscreen media-poster img, .media-minimal-skin:fullscreen > img": {
+    objectFit: "contain"
+  },
+  /*
+   * ==========================================================================
+   * Media thumbnail
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-thumbnail": {
+    pointerEvents: "none",
+    "& .media-thumbnail__image-wrapper": {
+      position: "relative",
+      backgroundColor: "oklch(0 0 0 / 0.9)",
+      borderRadius: "0.5rem"
+    },
+    "& .media-thumbnail__image": {
+      display: "block",
+      borderRadius: "inherit"
+    },
+    "& .media-thumbnail__time": {
+      display: "block",
+      marginTop: "0.5rem",
+      textAlign: "center"
+    },
+    "& .media-overlay": {
+      opacity: "1"
+    },
+    "& .media-thumbnail__spinner": {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      opacity: "0",
+      translate: "-50% -50%"
+    },
+    "& .media-thumbnail__image, & .media-thumbnail__spinner": {
+      transition: "opacity 150ms ease-out"
+    },
+    "&:not(:has(.media-thumbnail__image[data-loading]))": {
+      "& .media-thumbnail__spinner": {
+        "--media-spinner-animation": "none"
+      }
+    },
+    "&:has(.media-thumbnail__image[data-loading])": {
+      "& .media-thumbnail__image": {
+        opacity: "0"
+      },
+      "& .media-thumbnail__spinner": {
+        opacity: "1"
+      }
+    }
+  },
+  /*
+   * ==========================================================================
+   * Slider
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-slider": {
+    position: "relative",
+    display: "flex",
+    flex: "1",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    outline: "none",
+    borderRadius: "calc(infinity * 1px)",
+    '&[data-orientation="horizontal"]': {
+      width: "100%",
+      minWidth: "5rem",
+      height: "2rem"
+    },
+    '&[data-orientation="vertical"]': {
+      width: "2rem",
+      height: "4.5rem"
+    }
+  },
+  /* Track */
+  ".media-minimal-skin .media-slider__track": {
+    position: "relative",
+    overflow: "hidden",
+    userSelect: "none",
+    backgroundColor: "oklch(from currentColor l c h / 0.2)",
+    borderRadius: "inherit",
+    isolation: "isolate",
+    '&[data-orientation="horizontal"]': {
+      width: "100%",
+      height: "0.1875rem"
+    },
+    '&[data-orientation="vertical"]': {
+      width: "0.1875rem",
+      height: "100%"
+    }
+  },
+  /* Thumb */
+  ".media-minimal-skin .media-slider__thumb": {
+    position: "absolute",
+    zIndex: "10",
+    width: "0.75rem",
+    height: "0.75rem",
+    userSelect: "none",
+    outline: "2px solid transparent",
+    outlineOffset: "-2px",
+    backgroundColor: "currentColor",
+    borderRadius: "calc(infinity * 1px)",
+    boxShadow: "0 0 0 1px var(--media-current-shadow-color, oklch(0 0 0 / 0.15)), 0 1px 3px 0 oklch(0 0 0 / 0.15), 0 1px 2px -1px oklch(0 0 0 / 0.15)",
+    opacity: "0",
+    transformOrigin: "center",
+    scale: "0.7",
+    translate: "-50% -50%",
+    transitionTimingFunction: "ease-out",
+    transitionDuration: "150ms",
+    transitionProperty: "opacity, scale, outline-offset",
+    '&[data-orientation="horizontal"]': {
+      top: "50%",
+      left: "var(--media-slider-fill)"
+    },
+    '&[data-orientation="vertical"]': {
+      top: "calc(100% - var(--media-slider-fill))",
+      left: "50%"
+    },
+    "&:focus-visible": {
+      outlineColor: "currentColor",
+      outlineOffset: "2px"
+    }
+  },
+  ".media-minimal-skin .media-slider:hover .media-slider__thumb, .media-minimal-skin .media-slider:focus-within .media-slider__thumb, .media-minimal-skin .media-slider__thumb--persistent": {
+    opacity: "1",
+    scale: "1"
+  },
+  /* Preview */
+  ".media-minimal-skin .media-slider__preview": {
+    "& .media-slider__value, &::before": {
+      opacity: "0",
+      scale: "0.5",
+      transitionTimingFunction: "ease-out",
+      transitionDuration: "200ms",
+      transitionProperty: "opacity, scale"
+    },
+    "& .media-slider__value": {
+      position: "absolute",
+      bottom: "1.5rem",
+      textShadow: "0 1px 0 var(--media-current-shadow-color)",
+      filter: "blur(8px)",
+      translate: "-50% 0.5rem",
+      transitionProperty: "filter, opacity, scale, translate"
+    },
+    "&::before": {
+      display: "block",
+      content: '""',
+      backgroundColor: "oklch(from currentColor l c h / 0.35)"
+    },
+    "&[data-pointing] .media-slider__value, &[data-pointing]:not([data-dragging])::before": {
+      opacity: "1",
+      scale: "1"
+    },
+    "&[data-pointing] .media-slider__value": {
+      filter: "blur(0)",
+      translate: "-50% 0"
+    },
+    '&[data-orientation="horizontal"]::before': {
+      minWidth: "1px",
+      height: "1.25rem"
+    },
+    '&[data-orientation="vertical"]::before': {
+      width: "1.25rem",
+      minHeight: "1px"
+    }
+  },
+  /* Shared track fills */
+  ".media-minimal-skin .media-slider__buffer, .media-minimal-skin .media-slider__fill": {
+    position: "absolute",
+    pointerEvents: "none",
+    borderRadius: "inherit"
+  },
+  '.media-minimal-skin .media-slider__buffer[data-orientation="horizontal"], .media-minimal-skin .media-slider__fill[data-orientation="horizontal"]': {
+    insetBlock: "0",
+    left: "0"
+  },
+  '.media-minimal-skin .media-slider__buffer[data-orientation="vertical"], .media-minimal-skin .media-slider__fill[data-orientation="vertical"]': {
+    insetInline: "0",
+    bottom: "0"
+  },
+  /* Buffer */
+  ".media-minimal-skin .media-slider__buffer": {
+    backgroundColor: "oklch(from currentColor l c h / 0.2)",
+    transitionTimingFunction: "ease-out",
+    transitionDuration: "0.25s",
+    '&[data-orientation="horizontal"]': {
+      width: "var(--media-slider-buffer)",
+      transitionProperty: "width"
+    },
+    '&[data-orientation="vertical"]': {
+      height: "var(--media-slider-buffer)",
+      transitionProperty: "height"
+    }
+  },
+  /* Fill */
+  ".media-minimal-skin .media-slider__fill": {
+    backgroundColor: "currentColor",
+    '&[data-orientation="horizontal"]': {
+      width: "var(--media-slider-fill)"
+    },
+    '&[data-orientation="vertical"]': {
+      height: "var(--media-slider-fill)"
+    }
+  },
+  /* Dragging — thumb and fill follow the pointer position */
+  '.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"]': {
+    left: "var(--media-slider-pointer)"
+  },
+  '.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"]': {
+    top: "calc(100% - var(--media-slider-pointer))"
+  },
+  '.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="horizontal"]': {
+    width: "var(--media-slider-pointer)"
+  },
+  '.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="vertical"]': {
+    height: "var(--media-slider-pointer)"
+  },
+  /*
+   * ==========================================================================
+   * Popups & Animations
+   * ==========================================================================
+   */
+  ".media-minimal-skin ": {
+    "--media-popup-transition": "opacity var(--media-popup-transition-timing-function) var(--media-popup-transition-duration), filter var(--media-popup-transition-timing-function) var(--media-popup-transition-duration), transform var(--media-popup-transition-timing-function) var(--media-popup-transition-duration), scale var(--media-popup-transition-timing-function) var(--media-popup-transition-duration)"
+  },
+  ".media-minimal-skin .media-popover, .media-minimal-skin .media-tooltip": {
+    "--popup-translate-distance": "0.5rem",
+    margin: "0",
+    overflow: "visible",
+    color: "inherit",
+    border: "0",
+    transition: "var(--media-popup-transition)",
+    "&[data-starting-style], &[data-ending-style]": {
+      opacity: "0",
+      filter: "blur(4px)",
+      /* We have to use transform here for translate as the translate property is used for positioning by core. */
+      transform: "translate(var(--popup-translate-x-distance, 0), var(--popup-translate-y-distance, 0))",
+      scale: "0.95"
+    },
+    "&[data-ending-style]": {
+      transform: "none",
+      /* Speed up the exit transition. */
+      transitionDuration: "max(0ms, calc(var(--media-popup-transition-duration) - 50ms))"
+    },
+    '&[data-side="top"]': {
+      "--popup-translate-y-distance": "var(--popup-translate-distance)",
+      transformOrigin: "bottom"
+    },
+    '&[data-side="bottom"]': {
+      "--popup-translate-y-distance": "calc(var(--popup-translate-distance) * -1)",
+      transformOrigin: "top"
+    },
+    '&[data-side="left"]': {
+      "--popup-translate-x-distance": "var(--popup-translate-distance)",
+      transformOrigin: "right"
+    },
+    '&[data-side="right"]': {
+      "--popup-translate-x-distance": "calc(var(--popup-translate-distance) * -1)",
+      transformOrigin: "left"
+    },
+    /* Safe area between trigger and popup */
+    "&::before": {
+      position: "absolute",
+      pointerEvents: "inherit",
+      content: '""'
+    },
+    '&[data-side="top"]::before, &[data-side="bottom"]::before': {
+      insetInline: "0",
+      width: "100%"
+    },
+    '&[data-side="top"]::before': {
+      top: "100%"
+    },
+    '&[data-side="bottom"]::before': {
+      bottom: "100%"
+    },
+    '&[data-side="left"]::before, &[data-side="right"]::before': {
+      insetBlock: "0",
+      height: "100%"
+    },
+    '&[data-side="left"]::before': {
+      left: "100%"
+    },
+    '&[data-side="right"]::before': {
+      right: "100%"
+    }
+  },
+  ".media-minimal-skin .media-popover": {
+    '&[data-side="top"]::before, &[data-side="bottom"]::before': {
+      height: "var(--media-popover-side-offset)"
+    },
+    '&[data-side="left"]::before, &[data-side="right"]::before': {
+      width: "var(--media-popover-side-offset)"
+    }
+  },
+  ".media-minimal-skin .media-tooltip": {
+    padding: "0.25rem 0.5rem",
+    fontSize: "0.75rem",
+    /* 12px at 100% font size */
+    color: "var(--media-tooltip-text-color)",
+    whiteSpace: "nowrap",
+    backgroundColor: "var(--media-tooltip-background-color)",
+    borderRadius: "0.5rem",
+    boxShadow: "0 0 0 1px var(--media-tooltip-border-color), 0 4px 6px -1px oklch(0 0 0 / 0.2), 0 2px 4px -2px oklch(0 0 0 / 0.2)",
+    backdropFilter: "var(--media-tooltip-backdrop-filter)",
+    /* `display: flex` must not apply while closed — it overrides UA `[popover]` hiding. */
+    "&[data-open]": {
+      display: "flex",
+      columnGap: "0.25rem",
+      alignItems: "center"
+    },
+    '&[data-side="top"]::before, &[data-side="bottom"]::before': {
+      height: "var(--media-tooltip-side-offset)"
+    },
+    '&[data-side="left"]::before, &[data-side="right"]::before': {
+      width: "var(--media-tooltip-side-offset)"
+    },
+    "& .media-tooltip__kbd": {
+      minWidth: "1.5em",
+      padding: "0.1em",
+      marginRight: "-0.25rem",
+      fontFamily: "inherit",
+      fontSize: "90%",
+      fontWeight: "600",
+      lineHeight: "1.25",
+      textAlign: "center",
+      backgroundColor: "oklch(from currentColor l c h / 0.15)",
+      borderRadius: "0.25rem"
+    }
+  },
+  '.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability="unsupported"])': {
+    display: "none"
+  },
+  /*
+   * ==========================================================================
+   * Menus
+   * Note: Menus use `.media-popover` styles for positioning and transitions.
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-menu": {
+    "--menu-transition-duration": "250ms",
+    "--menu-max-height": "14rem",
+    "--menu-padding": "0.5rem",
+    "--menu-border-radius": "1rem",
+    "--menu-item-border-radius": "calc(var(--menu-border-radius) - var(--menu-padding))",
+    boxSizing: "border-box",
+    maxWidth: "var(--media-popover-available-width, none)",
+    maxHeight: "min(var(--media-popover-available-height, var(--menu-max-height)), var(--menu-max-height))",
+    padding: "var(--menu-padding)",
+    overflow: "auto",
+    overscrollBehavior: "none",
+    backgroundColor: "var(--media-popover-background-color)",
+    borderRadius: "var(--menu-border-radius)",
+    boxShadow: "0 0 0 1px var(--media-popover-border-color), 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1)",
+    backdropFilter: "var(--media-popover-backdrop-filter)",
+    "@media (prefers-reduced-motion: reduce)": {
+      "--menu-transition-duration": "0ms"
+    },
+    "& .media-menu__panel": {
+      position: "absolute",
+      inset: "0",
+      padding: "var(--menu-padding)",
+      overflow: "auto",
+      overscrollBehavior: "none",
+      outline: "none",
+      translate: "0 0",
+      transitionTimingFunction: "ease-in-out",
+      transitionDuration: "var(--menu-transition-duration)",
+      transitionProperty: "translate, filter",
+      willChange: "translate, filter",
+      "&[data-starting-style], &[data-ending-style]": {
+        overflow: "hidden"
+      },
+      /* Root settings view — slides out when a submenu is active */
+      '&[data-menu-root-view][data-menu-view-state="inactive"]': {
+        filter: "blur(8px)",
+        translate: "-100% 0",
+        /* Hide the indicator while transitioning */
+        "& .media-menu__group::before": {
+          display: "none"
+        }
+      },
+      /* Submenu panels — slide in/out alongside the root view */
+      "&[data-submenu]": {
+        zIndex: "10",
+        "&:not([data-open], [data-ending-style])": {
+          translate: "-100% 0",
+          transitionProperty: "none"
+        },
+        "&[data-starting-style], &[data-ending-style]": {
+          pointerEvents: "none",
+          filter: "blur(8px)"
+        },
+        '&[data-starting-style][data-direction="forward"], &[data-ending-style][data-direction="back"]': {
+          translate: "100% 0"
+        },
+        '&[data-ending-style][data-direction="forward"], &[data-starting-style][data-direction="back"]': {
+          translate: "-100% 0"
+        }
+      }
+    },
+    "& .media-menu__separator": {
+      margin: "0.25rem 0",
+      borderBottom: "1px solid oklch(1 0 0 / 0.1)"
+    },
+    "& .media-menu__group": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.125rem",
+      "@supports (top: anchor(top))": {
+        "&::before": {
+          position: "absolute",
+          positionAnchor: "--media-menu-item-highlight-anchor",
+          inset: "anchor(inside)",
+          pointerEvents: "none",
+          content: '""',
+          backgroundColor: "oklch(from currentColor l c h / 0.1)",
+          borderRadius: "var(--menu-item-border-radius)",
+          transition: "inset ease-in-out 100ms"
+        }
+      }
+    },
+    "& .media-menu__item, & .media-menu__back": {
+      display: "flex",
+      gap: "0.375rem",
+      alignItems: "center",
+      padding: "0.375rem 0.5rem",
+      textAlign: "left",
+      textShadow: "0 1px 0 var(--media-current-shadow-color)",
+      cursor: "pointer",
+      userSelect: "none",
+      outline: "2px solid transparent",
+      outlineOffset: "-2px",
+      borderRadius: "var(--menu-item-border-radius)",
+      transition: "background-color, color",
+      transitionTimingFunction: "ease-out",
+      transitionDuration: "100ms",
+      "&:focus-visible": {
+        outlineColor: "currentColor",
+        outlineOffset: "2px"
+      },
+      "&:hover, &[data-highlighted]": {
+        backgroundColor: "oklch(from currentColor l c h / 0.1)",
+        "@supports (top: anchor(top))": {
+          anchorName: "--media-menu-item-highlight-anchor",
+          backgroundColor: "transparent"
+        }
+      },
+      "& .media-icon": {
+        flexShrink: "0",
+        color: "oklch(from currentColor l c h / 0.5)",
+        filter: "drop-shadow(0 1px 0 var(--media-current-shadow-color))"
+      }
+    },
+    "& .media-menu__indicator": {
+      flexShrink: "0",
+      marginRight: "-0.25rem",
+      marginLeft: "auto",
+      opacity: "0"
+    },
+    "& .media-menu__item": {
+      justifyContent: "space-between",
+      fontVariantNumeric: "tabular-nums",
+      color: "inherit",
+      '&[aria-disabled="true"]': {
+        pointerEvents: "none",
+        cursor: "not-allowed",
+        opacity: "0.5"
+      },
+      '&[aria-checked="true"] .media-menu__indicator': {
+        opacity: "1"
+      },
+      '&[data-availability="unavailable"], &[data-availability="unsupported"]': {
+        display: "none"
+      }
+    },
+    "& .media-menu__tier": {
+      paddingTop: "1px",
+      paddingLeft: "0.125rem",
+      fontSize: "0.5625rem",
+      fontWeight: "600",
+      lineHeight: "1",
+      color: "oklch(from currentColor l c h / 0.7)"
+    },
+    "& .media-menu__back": {
+      width: "100%",
+      marginBottom: "0.125rem"
+    },
+    "& .media-menu__hint": {
+      display: "inline-flex",
+      gap: "0.25rem",
+      alignItems: "center",
+      minWidth: "0",
+      paddingLeft: "0.5rem",
+      marginLeft: "auto",
+      fontSize: "0.75rem",
+      color: "oklch(from currentColor l c h / 0.65)"
+    },
+    "& .media-menu__hint-label": {
+      maxWidth: "6rem",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    "& .media-menu__chevron": {
+      width: "0.875rem",
+      height: "0.875rem"
+    },
+    /* Settings menu */
+    "&.media-menu--settings": {
+      width: "var(--media-menu-width)",
+      minWidth: "12rem",
+      height: "var(--media-menu-height)",
+      overflow: "hidden",
+      /* Add height and width transitions. */
+      transition: "var(--media-popup-transition), height var(--media-popup-transition-timing-function) var(--menu-transition-duration), width var(--media-popup-transition-timing-function) var(--menu-transition-duration)",
+      /* Don't transition width and height on open/close. */
+      "&[data-starting-style], &[data-ending-style]": {
+        transition: "var(--media-popup-transition)"
+      }
+    }
+  },
+  /*
+   * ==========================================================================
+   * Native Caption Track
+   * ==========================================================================
+   */
+  ".media-minimal-skin  ": {
+    "--media-caption-track-duration": "var(--media-controls-transition-duration)",
+    "--media-caption-track-delay": "25ms",
+    "--media-caption-track-y": "-0.5rem",
+    "&:has(.media-controls[data-visible])": {
+      "--media-caption-track-y": "-5rem"
+    },
+    "@container media-root (width > 42rem)": {
+      "&:has(.media-controls[data-visible]) > *": {
+        "--media-caption-track-y": "-3rem"
+      }
+    }
+  },
+  ".media-minimal-skin video::-webkit-media-text-track-container": {
+    zIndex: "1",
+    fontFamily: "inherit",
+    scale: "0.98",
+    translate: "0 var(--media-caption-track-y)",
+    transition: "translate var(--media-caption-track-duration) ease-out",
+    transitionDelay: "var(--media-caption-track-delay)"
+  },
+  /*
+   * ==========================================================================
+   * Input Feedback
+   * ==========================================================================
+   */
+  ".media-minimal-skin .media-input-feedback": {
+    position: "absolute",
+    insetInline: "0",
+    top: "0",
+    bottom: "3.5rem",
+    /* Shift up a little in smaller containers */
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr 1fr",
+    alignItems: "center",
+    justifyItems: "center",
+    overflow: "hidden",
+    color: "var(--media-color-primary, oklch(1 0 0))",
+    pointerEvents: "none",
+    borderRadius: "inherit",
+    "@container media-root (width > 24rem)": {
+      bottom: "0"
+    }
+  },
+  /* --- Feedback islands ------------------------------------------------------- */
+  ".media-minimal-skin .media-input-feedback-island": {
+    position: "absolute",
+    insetInline: "0",
+    top: "0",
+    display: "flex",
+    justifyContent: "center",
+    paddingTop: "0.75rem",
+    paddingBottom: "8rem",
+    color: "inherit",
+    textShadow: "0 1px 0 var(--media-current-shadow-color)",
+    pointerEvents: "none",
+    backgroundImage: "linear-gradient(to bottom, oklch(0 0 0 / 0.35), oklch(0 0 0 / 0.2) 3rem, oklch(0 0 0 / 0))",
+    transformOrigin: "top center",
+    transitionTimingFunction: "ease-out",
+    transitionDuration: "100ms",
+    ".media-input-feedback-island__content": {
+      display: "flex",
+      gap: "0.5rem",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "0.25rem 0.625rem"
+    },
+    ".media-icon": {
+      display: "none",
+      flexShrink: "0",
+      filter: "drop-shadow(0 1px 0 var(--media-current-shadow-color))"
+    },
+    ".media-input-feedback-island__value": {
+      marginLeft: "auto"
+    },
+    "@media (pointer: fine)": {
+      transitionProperty: "translate, filter, opacity",
+      willChange: "translate, filter, opacity"
+    },
+    "@media (pointer: coarse)": {
+      transitionProperty: "translate, opacity",
+      willChange: "translate, opacity"
+    },
+    "@media (pointer: fine) and (prefers-reduced-motion: no-preference)": {
+      transitionProperty: "translate, filter, opacity"
+    },
+    "@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more)": {
+      ".media-input-feedback-island__content": {
+        background: "var(--media-controls-background-color)",
+        borderRadius: "0.5rem"
+      }
+    },
+    /* Default hidden state */
+    "&[data-starting-style], &[data-ending-style]": {
+      opacity: "0",
+      transitionTimingFunction: "ease-in",
+      transitionDuration: "400ms",
+      "@media (pointer: fine) and (prefers-reduced-motion: no-preference)": {
+        filter: "blur(8px)"
+      },
+      "@media (prefers-reduced-motion: no-preference)": {
+        "&[data-ending-style]": {
+          translate: "0 -100%"
+        }
+      }
+    }
+  },
+  ".media-minimal-skin .media-input-feedback-island--volume": {
+    ".media-input-feedback-island__content": {
+      width: "min(80%, 14rem)"
+    },
+    ".media-input-feedback-island__progress": {
+      "--media-progress-fill": "var(--media-volume-fill)",
+      width: "100%",
+      height: "0.1875rem",
+      backgroundImage: "linear-gradient( to right, currentColor 0%, currentColor var(--media-progress-fill), oklch(from currentColor l c h / 0.2) var(--media-progress-fill), oklch(from currentColor l c h / 0.2) 100% )",
+      borderRadius: "calc(Infinity * 1px)",
+      boxShadow: "0 1px 0 var(--media-current-shadow-color-subtle)"
+    },
+    '&[data-level="high"] .media-icon--volume-high, &[data-level="low"] .media-icon--volume-low, &[data-level="off"] .media-icon--volume-off': {
+      display: "block"
+    },
+    "@media (prefers-reduced-motion: no-preference)": {
+      "&[data-min] .media-input-feedback-island__content, &[data-max] .media-input-feedback-island__content": {
+        animation: "media-shake 300ms ease-in-out"
+      }
+    }
+  },
+  ".media-minimal-skin .media-input-feedback-island--status": {
+    '&[data-status="captions-on"] .media-icon--captions-on, &[data-status="captions-off"] .media-icon--captions-off, &[data-status="fullscreen"] .media-icon--fullscreen-enter, &[data-status="exit-fullscreen"] .media-icon--fullscreen-exit, &[data-status="pip"] .media-icon--pip-enter, &[data-status="exit-pip"] .media-icon--pip-exit': {
+      display: "block"
+    }
+  },
+  /* --- Bubble ---------------------------------------------------------------- */
+  ".media-minimal-skin .media-input-feedback-bubble": {
+    display: "grid",
+    gridRow: "1",
+    gridColumn: "2",
+    placeContent: "center",
+    padding: "1rem",
+    textAlign: "center",
+    /* Central bubble (play, pause) */
+    "&:not([data-direction])": {
+      transitionTimingFunction: "ease-out",
+      transitionDuration: "200ms",
+      transitionProperty: "opacity, scale",
+      "&[data-starting-style], &[data-ending-style]": {
+        opacity: "0",
+        scale: "0.85"
+      },
+      "&[data-ending-style]": {
+        transitionTimingFunction: "ease-in",
+        transitionDuration: "100ms"
+      },
+      "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "50ms",
+        transitionProperty: "opacity"
+      }
+    },
+    /* Directional bubbles (seek) */
+    "&[data-direction]": {
+      gap: "0.25rem",
+      "@container media-root (width > 24rem)": {
+        padding: "1.5rem"
+      }
+    },
+    '&[data-direction="backward"]': {
+      gridColumn: "1",
+      justifySelf: "left"
+    },
+    '&[data-direction="forward"]': {
+      gridColumn: "3",
+      justifySelf: "right"
+    },
+    /* Icons */
+    ".media-icon": {
+      display: "none",
+      width: "calc(var(--media-icon-size) * 2)",
+      height: "calc(var(--media-icon-size) * 2)"
+    },
+    ".media-icon--seek": {
+      width: "calc(var(--media-icon-size) * 1.5)",
+      height: "calc(var(--media-icon-size) * 1.5)"
+    },
+    '&[data-direction] .media-icon--seek, &[data-status="pause"] .media-icon--pause, &[data-status="play"] .media-icon--play': {
+      display: "block"
+    },
+    '&[data-direction="backward"] .media-icon--seek': {
+      scale: "-1 1"
+    },
+    "@media (prefers-reduced-motion: no-preference)": {
+      ".media-icon--seek": {
+        transitionTimingFunction: "ease-in-out",
+        transitionDuration: "200ms",
+        transitionProperty: "translate, opacity"
+      },
+      "&[data-starting-style] .media-icon--seek, &[data-ending-style] .media-icon--seek": {
+        opacity: "0"
+      },
+      '&[data-direction="forward"][data-starting-style] .media-icon--seek': {
+        translate: "-60% 0"
+      },
+      '&[data-direction="backward"][data-starting-style] .media-icon--seek': {
+        translate: "60% 0"
+      }
+    }
+  },
+  /*
+   * ==========================================================================
+   * Icon State Visibility for Video Skins
+   *
+   * Data-attribute-driven visibility rules for multi-state icon buttons.
+   * Uses :is() with both element selectors (for HTML custom element wrappers)
+   * and class selectors (for React rendered SVG elements).
+   * ==========================================================================
+   */
+  /* --- All icons hidden by default --- */
+  ".media-button--play .media-icon--restart, .media-button--play .media-icon--play, .media-button--play .media-icon--pause, .media-button--mute .media-icon--volume-off, .media-button--mute .media-icon--volume-low, .media-button--mute .media-icon--volume-high, .media-button--fullscreen .media-icon--fullscreen-enter, .media-button--fullscreen .media-icon--fullscreen-exit, .media-button--pip .media-icon--pip-enter, .media-button--pip .media-icon--pip-exit, .media-button--cast .media-icon--cast-enter, .media-button--cast .media-icon--cast-exit, .media-button--airplay .media-icon--airplay-enter, .media-button--airplay .media-icon--airplay-exit, .media-button--captions .media-icon--captions-off, .media-button--captions .media-icon--captions-on": {
+    display: "none",
+    opacity: "0"
+  },
+  /* --- Active icon per state --- */
+  /* Play: ended → restart */
+  '.media-button--play[data-ended] .media-icon--restart, .media-button--play:not([data-ended])[data-paused] .media-icon--play, .media-button--play:not([data-ended]):not([data-started]) .media-icon--play, .media-button--play[data-started]:not([data-paused]):not([data-ended]) .media-icon--pause, .media-button--mute[data-muted] .media-icon--volume-off, .media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low, .media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high, .media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter, .media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit, .media-button--pip:not([data-pip]) .media-icon--pip-enter, .media-button--pip[data-pip] .media-icon--pip-exit, .media-button--cast:not([data-cast-state="connected"]) .media-icon--cast-enter, .media-button--cast[data-cast-state="connected"] .media-icon--cast-exit, .media-button--airplay:not([data-airplay-state="connected"]) .media-icon--airplay-enter, .media-button--airplay[data-airplay-state="connected"] .media-icon--airplay-exit, .media-button--captions:not([data-active]) .media-icon--captions-off, .media-button--captions[data-active] .media-icon--captions-on': {
+    display: "block",
+    opacity: "1"
+  },
+  /* --- Pause keyframe animations on inactive icons --- */
+  /*
+   * The airplay-exit SVG defines its keyframes against CSS variables (mirroring
+   * the spinner pattern). When the AirPlay session isn't active the SVG is
+   * still in the DOM — just `display: none` — so its animations would keep
+   * running. Set the variables to `none` to short-circuit the keyframes.
+   */
+  '.media-button--airplay:not([data-airplay-state="connected"])': {
+    "--media-icon--airplay__fill-animation": "none",
+    "--media-icon--airplay__triangle-animation": "none"
+  },
+  /* -------------------------------------------------------------------------- */
+  /* Global @keyframes for all video skins (CSS & Tailwind) */
+  /* -------------------------------------------------------------------------- */
+  "@keyframes media-shake": {
+    "0%, 100%": {
+      translate: "0 0"
+    },
+    "20%": {
+      translate: "-6px 0"
+    },
+    "40%": {
+      translate: "4px 0"
+    },
+    "60%": {
+      translate: "-2px 0"
+    },
+    "80%": {
+      translate: "1px 0"
+    }
+  },
+  /* -------------------------------------------------------------------------- */
+  /* Global @properties for all video skins (CSS & Tailwind) */
+  /* -------------------------------------------------------------------------- */
+  "@property --media-progress-fill": {
+    syntax: '"<percentage>"',
+    inherits: "true",
+    initialValue: "0%"
+  },
+  /*
+   * ==========================================================================
+   * Root
+   * ==========================================================================
+   */
+  ".media-minimal-skin--video": {
+    "--media-border-color": "oklch(0 0 0 / 0.15)",
+    "--media-video-border-radius": "var(--media-border-radius, 0.75rem)",
+    "--media-controls-background-color": "transparent",
+    "--media-controls-transition-duration": "100ms",
+    "--media-controls-transition-timing-function": "ease-out",
+    "--media-error-dialog-transition-duration": "150ms",
+    "--media-error-dialog-transition-delay": "100ms",
+    "--media-error-dialog-transition-timing-function": "ease-out",
+    "--media-popup-transition-duration": "100ms",
+    "--media-popup-transition-timing-function": "ease-out",
+    "--media-tooltip-background-color": "oklch(0 0 0 / 0.5)",
+    "--media-tooltip-border-color": "oklch(1 0 0 / 0.1)",
+    "--media-tooltip-backdrop-filter": "blur(16px) saturate(1.5)",
+    "--media-tooltip-text-color": "currentColor",
+    "--media-tooltip-side-offset": "0.5rem",
+    "--media-tooltip-boundary-offset": "0.5rem",
+    "--media-popover-background-color": "var(--media-tooltip-background-color)",
+    "--media-popover-border-color": "var(--media-tooltip-border-color)",
+    "--media-popover-backdrop-filter": "var(--media-tooltip-backdrop-filter)",
+    "--media-popover-side-offset": "1.5rem",
+    "--media-popover-boundary-offset": "var(--media-tooltip-boundary-offset)",
+    overflow: "clip",
+    background: "oklch(0 0 0)",
+    "@media (prefers-reduced-motion: reduce)": {
+      "--media-error-dialog-transition-duration": "50ms",
+      "--media-error-dialog-transition-delay": "0ms",
+      "--media-popup-transition-duration": "0ms"
+    },
+    "@media (prefers-color-scheme: dark)": {
+      "--media-border-color": "oklch(1 0 0 / 0.15)"
+    },
+    "@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more)": {
+      "--media-controls-background-color": "oklch(0 0 0)",
+      "--media-tooltip-background-color": "oklch(0 0 0)"
+    },
+    "@container media-root (width > 42rem)": {
+      "& > *": {
+        "--media-popover-side-offset": "0.5rem"
+      }
+    },
+    "&:has(.media-controls:not([data-visible]))": {
+      /* Slight delay to hide controls on non-touch devices after interaction */
+      "@media (pointer: fine)": {
+        "--media-controls-transition-duration": "300ms"
+      },
+      "@media (pointer: coarse)": {
+        "--media-controls-transition-duration": "150ms"
+      },
+      "@media (prefers-reduced-motion: reduce)": {
+        "--media-controls-transition-duration": "50ms"
+      }
+    },
+    /* Inner border ring */
+    "&::after": {
+      position: "absolute",
+      inset: "0",
+      zIndex: "10",
+      pointerEvents: "none",
+      content: '""',
+      borderRadius: "inherit",
+      boxShadow: "inset 0 0 0 1px var(--media-border-color)"
+    },
+    /* Fullscreen */
+    "&:fullscreen": {
+      "--media-border-radius": "0"
+    }
+  },
+  /*
+   * ==========================================================================
+   * Error Dialog
+   * ==========================================================================
+   */
+  ".media-minimal-skin--video .media-error": {
+    position: "absolute",
+    inset: "0",
+    zIndex: "20",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none",
+    outline: "none"
+  },
+  ".media-minimal-skin--video .media-error__dialog": {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.75rem",
+    maxWidth: "16rem",
+    padding: "1rem",
+    color: "oklch(1 0 0)",
+    textShadow: "0 1px 0 oklch(0 0 0 / 0.5)",
+    pointerEvents: "auto",
+    transitionDelay: "var(--media-error-dialog-transition-delay)",
+    transitionTimingFunction: "var(--media-error-dialog-transition-timing-function)",
+    transitionDuration: "var(--media-error-dialog-transition-duration)",
+    transitionProperty: "opacity, scale"
+  },
+  ".media-minimal-skin--video .media-error[data-starting-style] .media-error__dialog, .media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog": {
+    opacity: "0",
+    scale: "0.5"
+  },
+  ".media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog": {
+    transitionDelay: "0ms"
+  },
+  ".media-minimal-skin--video .media-error__content": {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5rem",
+    padding: "0.375rem 0"
+  },
+  ".media-minimal-skin--video .media-error__title": {
+    fontSize: "1.125rem"
+  },
+  ".media-minimal-skin--video .media-error[data-open] ~ .media-controls": {
+    display: "none"
+  },
+  /*
+   * ==========================================================================
+   * Controls (hide/show behavior)
+   * ==========================================================================
+   */
+  ".media-minimal-skin--video .media-controls": {
+    position: "absolute",
+    insetInline: "0.25rem",
+    bottom: "0.25rem",
+    zIndex: "10",
+    flexWrap: "wrap",
+    columnGap: "0.5rem",
+    padding: "0.25rem",
+    color: "oklch(1 0 0)",
+    borderRadius: "0.75rem",
+    transitionTimingFunction: "var(--media-controls-transition-timing-function)",
+    transitionDuration: "var(--media-controls-transition-duration)",
+    "@media (pointer: fine)": {
+      transitionProperty: "translate, filter, opacity",
+      willChange: "translate, filter, opacity"
+    },
+    "@media (pointer: coarse)": {
+      transitionProperty: "translate, opacity",
+      willChange: "translate, opacity"
+    },
+    "&:not([data-visible])": {
+      pointerEvents: "none",
+      opacity: "0",
+      "@media (pointer: fine) and (prefers-reduced-motion: no-preference)": {
+        filter: "blur(8px)"
+      },
+      "@media (prefers-reduced-motion: no-preference)": {
+        translate: "0 100%"
+      }
+    },
+    "& .media-time-controls": {
+      flex: "0 0 100%",
+      order: "-1",
+      paddingInline: "0.625rem"
+    },
+    "& .media-button-group:first-of-type": {
+      flex: "1",
+      textAlign: "left"
+    },
+    "& .media-button-group:last-child": {
+      flex: "1",
+      justifyContent: "end"
+    },
+    "@container media-root (width > 42rem)": {
+      insetInline: "0.5rem",
+      bottom: "0.5rem",
+      flexWrap: "nowrap",
+      "& .media-time-controls": {
+        flex: "1",
+        order: "unset"
+      },
+      "& .media-button-group:first-of-type, & .media-button-group:last-child": {
+        flex: "0 0 auto"
+      }
+    }
+  },
+  /* Hide cursor when controls are hidden */
+  ".media-minimal-skin--video:has(.media-controls:not([data-visible]))": {
+    cursor: "none"
+  },
+  /*
+   * ==========================================================================
+   * Sliders
+   * ==========================================================================
+   */
+  ".media-minimal-skin--video .media-slider__track": {
+    boxShadow: "0 0 0 1px oklch(0 0 0 / 0.05)"
+  },
+  /*
+   * ==========================================================================
+   * Popups & Animations
+   * ==========================================================================
+   */
+  ".media-minimal-skin--video .media-popover--volume": {
+    paddingBlock: "0.75rem",
+    background: "transparent",
+    borderRadius: "0.75rem",
+    "@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more)": {
+      background: "var(--media-controls-background-color)"
+    },
+    "@container media-root (width > 42rem)": {
+      "& > *": {
+        "--media-popover-side-offset": "0rem"
+      }
+    }
+  },
+  /*
+   * ==========================================================================
+   * Slider preview
+   * ==========================================================================
+   */
+  ".media-minimal-skin--video .media-slider__thumbnail": {
+    "--media-slider-thumbnail-max-width": "11rem",
+    "--media-slider-thumbnail-max-height": "8rem",
+    "--media-slider-thumbnail-padding": "-0.5rem",
+    /*
+     * Inset is the difference between the container width and the slider (100%) width.
+     * We only add to the end as we render the time there.
+     */
+    "--media-slider-thumbnail-inset": "calc(100cqi - 100%)",
+    position: "absolute",
+    bottom: "100%",
+    left: "clamp( calc(var(--media-slider-thumbnail-max-width) / 2 + var(--media-slider-thumbnail-padding)), var(--media-slider-pointer), calc( 100% - var(--media-slider-thumbnail-max-width) / 2 - var(--media-slider-thumbnail-padding) + var(--media-slider-thumbnail-inset) ) )",
+    opacity: "0",
+    filter: "blur(8px)",
+    transformOrigin: "bottom",
+    scale: "0.8",
+    translate: "-50%",
+    transitionTimingFunction: "ease-out",
+    transitionDuration: "150ms",
+    transitionProperty: "scale, opacity, filter",
+    "@container media-root (width > 42rem)": {
+      left: "var(--media-slider-pointer)"
+    },
+    "& .media-thumbnail__image-wrapper": {
+      position: "relative",
+      "&::after": {
+        position: "absolute",
+        inset: "0",
+        content: '""',
+        borderRadius: "inherit",
+        boxShadow: "0 0 0 1px oklch(0 0 0 / 0.05), 0 1px 3px 0 oklch(0 0 0 / 0.2), 0 1px 2px -1px oklch(0 0 0 / 0.2)"
+      }
+    },
+    "& .media-thumbnail__image": {
+      maxWidth: "var(--media-slider-thumbnail-max-width)",
+      maxHeight: "var(--media-slider-thumbnail-max-height)"
+    }
+  },
+  '.media-minimal-skin--video .media-slider[data-pointing] .media-slider__thumbnail:has([role="img"]:not([data-hidden]))': {
+    opacity: "1",
+    filter: "blur(0)",
+    scale: "1"
+  },
+  '.media-minimal-skin--video .media-slider__thumbnail:has([role="img"]:not([data-hidden])) + .media-slider__preview .media-slider__value': {
+    display: "none"
+  }
+}), a = /* @__PURE__ */ new WeakMap(), n = (i) => {
+  let e = a.get(i);
+  return e || (e = t(i), a.set(i, e)), e;
+};
+export {
+  n as videojsMinimalSkinAllStyles
+};