:host { --media-box-border-radius: 4px; --media-box-padding-left: 10px; --media-box-padding-right: 10px; --media-preview-border-radius: var(--media-box-border-radius); --media-box-arrow-offset: var(--media-box-border-radius); --_control-background: var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7))); --_preview-background: var(--media-preview-background, var(--_control-background)); contain: layout; }
#buffered { background: var(--media-time-range-buffered-color, rgb(255 255 255 / .4)); position: absolute; height: 100%; will-change: width; width: 22.9662%; }
#preview-rail, #current-rail { width: 100%; position: absolute; left: 0px; bottom: 100%; pointer-events: none; will-change: transform; }
[part~="box"] { width: min-content; position: absolute; bottom: 100%; flex-direction: column; align-items: center; transform: translateX(-50%); }
[part~="current-box"] { display: var(--media-current-box-display, var(--media-box-display, flex)); margin: var(--media-current-box-margin, var(--media-box-margin, 0 0 5px)); visibility: hidden; }
[part~="preview-box"] { display: var(--media-preview-box-display, var(--media-box-display, flex)); margin: var(--media-preview-box-margin, var(--media-box-margin, 0 0 5px)); transition-property: var(--media-preview-transition-property, visibility, opacity); transition-duration: var(--media-preview-transition-duration-out, .25s); transition-delay: var(--media-preview-transition-delay-out, 0s); visibility: hidden; opacity: 0; }
:host(:is([mediapreviewimage], [mediapreviewtime])[dragging]) [part~="preview-box"] { transition-duration: var(--media-preview-transition-duration-in, .5s); transition-delay: var(--media-preview-transition-delay-in, .25s); visibility: visible; opacity: 1; }
@media (hover: hover) {
  :host(:is([mediapreviewimage], [mediapreviewtime]):hover) [part~="preview-box"] { transition-duration: var(--media-preview-transition-duration-in, .5s); transition-delay: var(--media-preview-transition-delay-in, .25s); visibility: visible; opacity: 1; }
}
media-preview-thumbnail, ::slotted(media-preview-thumbnail) { visibility: hidden; transition-behavior: normal; transition-duration: 0s; transition-timing-function: ease; transition-property: visibility; transition-delay: calc(var(--media-preview-transition-delay-out, 0s) + var(--media-preview-transition-duration-out, .25s)); background: var(--media-preview-thumbnail-background, var(--_preview-background)); box-shadow: var(--media-preview-thumbnail-box-shadow, 0 0 4px rgb(0 0 0 / .2)); max-width: var(--media-preview-thumbnail-max-width, 180px); max-height: var(--media-preview-thumbnail-max-height, 160px); min-width: var(--media-preview-thumbnail-min-width, 120px); min-height: var(--media-preview-thumbnail-min-height, 80px); border: var(--media-preview-thumbnail-border); border-radius: var(--media-preview-thumbnail-border-radius,
          var(--media-preview-border-radius) var(--media-preview-border-radius) 0 0); }
:host([mediapreviewimage][dragging]) media-preview-thumbnail, :host([mediapreviewimage][dragging]) ::slotted(media-preview-thumbnail) { transition-delay: var(--media-preview-transition-delay-in, .25s); visibility: visible; }
@media (hover: hover) {
  :host([mediapreviewimage]:hover) media-preview-thumbnail, :host([mediapreviewimage]:hover) ::slotted(media-preview-thumbnail) { transition-delay: var(--media-preview-transition-delay-in, .25s); visibility: visible; }
  :host([mediapreviewtime]:hover) { --media-time-range-hover-display: block; }
}
media-preview-chapter-display, ::slotted(media-preview-chapter-display) { font-size: var(--media-font-size, 13px); line-height: 17px; min-width: 0px; visibility: hidden; transition-behavior: normal, normal, normal, normal, normal; transition-duration: 0s, 0s, 0s, 0s, 0s; transition-timing-function: ease, ease, ease, ease, ease; transition-property: min-width, border-radius, margin, padding, visibility; transition-delay: calc(var(--media-preview-transition-delay-out, 0s) + var(--media-preview-transition-duration-out, .25s)); background: var(--media-preview-chapter-background, var(--_preview-background)); border-radius: var(--media-preview-chapter-border-radius,
          var(--media-preview-border-radius) var(--media-preview-border-radius)
          var(--media-preview-border-radius) var(--media-preview-border-radius)); padding: var(--media-preview-chapter-padding, 3.5px 9px); margin: var(--media-preview-chapter-margin, 0 0 5px); text-shadow: var(--media-preview-chapter-text-shadow, 0 0 4px rgb(0 0 0 / .75)); }
:host([mediapreviewimage]) media-preview-chapter-display, :host([mediapreviewimage]) ::slotted(media-preview-chapter-display) { transition-delay: var(--media-preview-transition-delay-in, .25s); border-radius: var(--media-preview-chapter-border-radius, 0); padding: var(--media-preview-chapter-padding, 3.5px 9px 0); margin: var(--media-preview-chapter-margin, 0); min-width: 100%; }
media-preview-chapter-display[mediapreviewchapter], ::slotted(media-preview-chapter-display[mediapreviewchapter]) { visibility: visible; }
media-preview-chapter-display:not([aria-valuetext]), ::slotted(media-preview-chapter-display:not([aria-valuetext])) { display: none; }
media-preview-time-display, ::slotted(media-preview-time-display), media-time-display, ::slotted(media-time-display) { font-size: var(--media-font-size, 13px); line-height: 17px; min-width: 0px; transition-behavior: normal, normal; transition-duration: 0s, 0s; transition-timing-function: ease, ease; transition-property: min-width, border-radius; transition-delay: calc(var(--media-preview-transition-delay-out, 0s) + var(--media-preview-transition-duration-out, .25s)); background: var(--media-preview-time-background, var(--_preview-background)); border-radius: var(--media-preview-time-border-radius,
          var(--media-preview-border-radius) var(--media-preview-border-radius)
          var(--media-preview-border-radius) var(--media-preview-border-radius)); padding: var(--media-preview-time-padding, 3.5px 9px); margin: var(--media-preview-time-margin, 0); text-shadow: var(--media-preview-time-text-shadow, 0 0 4px rgb(0 0 0 / .75)); transform: translateX(min(
          max(calc(50% - var(--_box-width) / 2),
          calc(var(--_box-shift, 0))),
          calc(var(--_box-width) / 2 - 50%)
        )); }
:host([mediapreviewimage]) media-preview-time-display, :host([mediapreviewimage]) ::slotted(media-preview-time-display) { transition-delay: var(--media-preview-transition-delay-in, .25s); border-radius: var(--media-preview-time-border-radius,
          0 0 var(--media-preview-border-radius) var(--media-preview-border-radius)); min-width: 100%; }
:host([mediapreviewtime]:hover) { --media-time-range-hover-display: block; }
[part~="arrow"], ::slotted([part~="arrow"]) { display: var(--media-box-arrow-display, inline-block); transform: translateX(min(
          max(calc(50% - var(--_box-width) / 2 + var(--media-box-arrow-offset)),
          calc(var(--_box-shift, 0))),
          calc(var(--_box-width) / 2 - 50% - var(--media-box-arrow-offset))
        )); border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-top-color: var(--media-box-arrow-background, var(--_control-background)); border-width: var(--media-box-arrow-border-width,
          var(--media-box-arrow-height, 5px) var(--media-box-arrow-width, 6px) 0); border-style: solid; justify-content: center; height: 0px; }
#segments-clipping rect:nth-child(0) { }