/* Kibo UI VideoPlayer's shadcn theme, using the same Media Chrome components.
   Registry: https://www.kibo-ui.com/r/video-player.json
   Referenced by shadcnblocks/video-player/video-player-standard-1.
   HTML adapter avoids adding another React runtime to the exported site. */
#hex-video-player {
  width: 100%; overflow: hidden; border: 1px solid var(--border);
  border-radius: var(--radius); background: #000;
  --media-primary-color: var(--primary);
  --media-secondary-color: var(--background);
  --media-text-color: var(--foreground);
  --media-background-color: var(--background);
  --media-control-hover-background: var(--accent);
  --media-font-family: var(--font-sans);
  --media-range-track-background: var(--border);
  --media-control-padding: 10px;
  --media-focus-box-shadow: inset 0 0 0 2px var(--ring);
}
#hex-video-player video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 60svh; object-fit: contain; }
#hex-video-player media-control-bar { background: var(--background); }
#hex-video-timeline media-time-range { width: 100%; }
#hex-video-controls { align-items: center; }
#hex-video-controls > * { flex-shrink: 0; }
.hex-video-spacer { flex: 1; }
#hex-video-controls media-volume-range { width: 80px; }
#hex-video-player:fullscreen { border: 0; border-radius: 0; }
#hex-video-player:fullscreen video { height: 100%; max-height: 100%; }
@media (max-width: 600px) {
  #hex-video-player { --media-control-padding: 8px; --media-control-height: 20px; --media-font-size: 12px; }
  #hex-video-controls media-volume-range { display: none; }
  #hex-video-controls media-time-display { padding-left: 2px; padding-right: 2px; }
}
@media (max-width: 360px) {
  #hex-video-controls { flex-wrap: wrap; }
}
/* The artifact reset removes custom-element padding; restore Kibo's p-2.5. */
#hex-video-player > div { width: 100%; }
#hex-video-player media-control-bar { display: flex; width: 100%; }
#hex-video-player media-control-bar > :not(.hex-video-spacer) { padding: 10px; }
#hex-video-controls media-time-display { white-space: nowrap; }
@media (max-width: 600px) {
  #hex-video-player media-control-bar > :not(.hex-video-spacer) { padding: 8px; }
  #hex-video-controls media-time-display { padding-left: 2px; padding-right: 2px; }
}
/* Keep controls below the picture rather than covering the performance. */
#hex-video-player::part(vertical-layer) { position: relative; }
#hex-video-player:fullscreen video { height: calc(100% - 88px); }