:host {
															--_focus-box-shadow: var(
																--media-focus-box-shadow,
																inset 0 0 0 2px rgb(27 127 204 / 0.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 / 0.7)
																)
															);
															height: calc(
																var(--media-control-height, 24px) + 2 *
																	var(--_media-range-padding)
															);
															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: 0;
														}
														input[type='range']:focus::-webkit-slider-runnable-track {
															outline: 0;
														}

														:host(:hover) {
															background: var(
																--media-control-hover-background,
																rgb(50 50 70 / 0.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: 0;
														}

														#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);

															-webkit-appearance: none;
															-webkit-tap-highlight-color: transparent;
															background: transparent;
															margin: 0;
															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 {
															-webkit-appearance: none;
															background: transparent;
															width: 0.1px;
															height: 0.1px;
														}

														#range::-moz-range-thumb {
															background: transparent;
															border: 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 / 0.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
															);
															-webkit-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);
														}

														#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: #777;
														}

														.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 0.1s ease-in-out
															);
															transform: var(
																--media-range-segment-transform,
																scaleY(1)
															);
															transform-origin: center;
														}