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