:host { --_focus-box-shadow: var(--media-focus-box-shadow, inset 0 0 0 2px rgb(27 127 204 / .9)); --_media-range-padding: var(--media-range-padding, var(--media-control-padding, 10px)); box-shadow: var(--_focus-visible-box-shadow, none); background: var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7))); height: calc(var(--media-control-height, 24px) + 2 * var(--_media-range-padding)); display: var(--media-control-display, var(--media-volume-range-display, inline-flex)); align-items: center; vertical-align: middle; box-sizing: border-box; position: relative; width: 100px; transition: background 0.15s linear; cursor: var(--media-cursor, pointer); pointer-events: auto; touch-action: none; }
input[type="range"]:focus { outline: 0px; }
input[type="range"]:focus::-webkit-slider-runnable-track { outline: 0px; }
:host(:hover) { background: var(--media-control-hover-background, rgb(50 50 70 / .7)); }
#leftgap { padding-left: var(--media-range-padding-left, var(--_media-range-padding)); }
#rightgap { padding-right: var(--media-range-padding-right, var(--_media-range-padding)); }
#startpoint, #endpoint { position: absolute; }
#endpoint { right: 0px; }
#container { width: var(--media-range-track-width, 100%); transform: translate(var(--media-range-track-translate-x, 0px), var(--media-range-track-translate-y, 0px)); position: relative; height: 100%; display: flex; align-items: center; min-width: 40px; }
#range { display: var(--media-time-range-hover-display, block); bottom: var(--media-time-range-hover-bottom, -7px); height: var(--media-time-range-hover-height, max(100% + 7px, 25px)); width: 100%; position: absolute; cursor: var(--media-cursor, pointer); appearance: none; -webkit-tap-highlight-color: transparent; background: transparent; margin: 0px; z-index: 1; }
@media (hover: hover) {
  #range { bottom: var(--media-time-range-hover-bottom, -5px); height: var(--media-time-range-hover-height, max(100% + 5px, 20px)); }
}
#range::-webkit-slider-thumb { appearance: none; background: transparent; width: 0.1px; height: 0.1px; }
#appearance { height: var(--media-range-track-height, 4px); display: flex; flex-direction: column; justify-content: center; width: 100%; position: absolute; will-change: transform; }
#track { background: var(--media-range-track-background, rgb(255 255 255 / .2)); border-radius: var(--media-range-track-border-radius, 1px); border: var(--media-range-track-border, none); outline: var(--media-range-track-outline); outline-offset: var(--media-range-track-outline-offset); backdrop-filter: var(--media-range-track-backdrop-filter); box-shadow: var(--media-range-track-box-shadow, none); position: absolute; width: 100%; height: 100%; overflow: hidden; }
#progress, #pointer { position: absolute; height: 100%; will-change: width; }
#progress { background: var(--media-range-bar-color, var(--media-primary-color, rgb(238 238 238))); transition: var(--media-range-track-transition); width: 0%; }
#pointer { background: var(--media-range-track-pointer-background); border-right: var(--media-range-track-pointer-border-right); transition: visibility 0.25s, opacity 0.25s; visibility: hidden; opacity: 0; }
@media (hover: hover) {
  :host(:hover) #pointer { transition: visibility 0.5s, opacity 0.5s; visibility: visible; opacity: 1; }
}
#thumb, ::slotted([slot="thumb"]) { width: var(--media-range-thumb-width, 10px); height: var(--media-range-thumb-height, 10px); transition: var(--media-range-thumb-transition); transform: var(--media-range-thumb-transform, none); opacity: var(--media-range-thumb-opacity, 1); translate: -50%; position: absolute; left: 0%; cursor: var(--media-cursor, pointer); }
#thumb { border-radius: var(--media-range-thumb-border-radius, 10px); background: var(--media-range-thumb-background, var(--media-primary-color, rgb(238 238 238))); box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent); border: var(--media-range-thumb-border, none); }
:host([disabled]) #thumb { background-color: rgb(119, 119, 119); }
.segments #appearance { height: var(--media-range-segment-hover-height, 7px); }
#track { clip-path: url("#segments-clipping"); }
#segments { --segments-gap: var(--media-range-segments-gap, 2px); position: absolute; width: 100%; height: 100%; }
#segments-clipping { transform: translateX(calc(var(--segments-gap) / 2)); }
#segments-clipping:empty { display: none; }
#segments-clipping rect { height: var(--media-range-track-height, 4px); y: calc((var(--media-range-segment-hover-height, 7px) - var(--media-range-track-height, 4px)) / 2); transition: var(--media-range-segment-transition, transform .1s ease-in-out); transform: var(--media-range-segment-transform, scaleY(1)); transform-origin: center center; }
#segments-clipping rect:nth-child(0) { }