:host {
																			--_tooltip-background-color: var(
																				--media-tooltip-background-color,
																				var(
																					--media-secondary-color,
																					rgba(20, 20, 30, 0.7)
																				)
																			);
																			--_tooltip-background: var(
																				--media-tooltip-background,
																				var(--_tooltip-background-color)
																			);
																			--_tooltip-arrow-half-width: calc(
																				var(--media-tooltip-arrow-width, 12px) /
																					2
																			);
																			--_tooltip-arrow-height: var(
																				--media-tooltip-arrow-height,
																				5px
																			);
																			--_tooltip-arrow-background: var(
																				--media-tooltip-arrow-color,
																				var(--_tooltip-background-color)
																			);
																			position: relative;
																			pointer-events: none;
																			display: var(
																				--media-tooltip-display,
																				inline-flex
																			);
																			justify-content: center;
																			align-items: center;
																			box-sizing: border-box;
																			z-index: var(--media-tooltip-z-index, 1);
																			background: var(--_tooltip-background);
																			color: var(
																				--media-text-color,
																				var(
																					--media-primary-color,
																					rgb(238 238 238)
																				)
																			);
																			font: var(
																				--media-font,
																				var(--media-font-weight, 400)
																					var(--media-font-size, 13px) /
																					var(
																						--media-text-content-height,
																						var(--media-control-height, 18px)
																					)
																					var(
																						--media-font-family,
																						helvetica neue,
																						segoe ui,
																						roboto,
																						arial,
																						sans-serif
																					)
																			);
																			padding: var(
																				--media-tooltip-padding,
																				0.35em 0.7em
																			);
																			border: var(--media-tooltip-border, none);
																			border-radius: var(
																				--media-tooltip-border-radius,
																				5px
																			);
																			filter: var(
																				--media-tooltip-filter,
																				drop-shadow(0 0 4px rgba(0, 0, 0, 0.2))
																			);
																			white-space: var(
																				--media-tooltip-white-space,
																				nowrap
																			);
																		}

																		:host([hidden]) {
																			display: none;
																		}

																		img,
																		svg {
																			display: inline-block;
																		}

																		#arrow {
																			position: absolute;
																			width: 0px;
																			height: 0px;
																			border-style: solid;
																			display: var(
																				--media-tooltip-arrow-display,
																				block
																			);
																		}

																		:host(:not([placement])),
																		:host([placement='top']) {
																			position: absolute;
																			bottom: calc(
																				100% +
																					var(--media-tooltip-distance, 12px)
																			);
																			left: 50%;
																			transform: translate(
																				calc(
																					-50% -
																						var(--media-tooltip-offset-x, 0px)
																				),
																				0
																			);
																		}
																		:host(:not([placement])) #arrow,
																		:host([placement='top']) #arrow {
																			top: 100%;
																			left: 50%;
																			border-width: var(--_tooltip-arrow-height)
																				var(--_tooltip-arrow-half-width) 0
																				var(--_tooltip-arrow-half-width);
																			border-color: var(
																					--_tooltip-arrow-background
																				)
																				transparent transparent transparent;
																			transform: translate(
																				calc(
																					-50% +
																						var(--media-tooltip-offset-x, 0px)
																				),
																				0
																			);
																		}

																		:host([placement='right']) {
																			position: absolute;
																			left: calc(
																				100% +
																					var(--media-tooltip-distance, 12px)
																			);
																			top: 50%;
																			transform: translate(0, -50%);
																		}
																		:host([placement='right']) #arrow {
																			top: 50%;
																			right: 100%;
																			border-width: var(
																					--_tooltip-arrow-half-width
																				)
																				var(--_tooltip-arrow-height)
																				var(--_tooltip-arrow-half-width) 0;
																			border-color: transparent
																				var(--_tooltip-arrow-background)
																				transparent transparent;
																			transform: translate(0, -50%);
																		}

																		:host([placement='bottom']) {
																			position: absolute;
																			top: calc(
																				100% +
																					var(--media-tooltip-distance, 12px)
																			);
																			left: 50%;
																			transform: translate(
																				calc(
																					-50% -
																						var(--media-tooltip-offset-x, 0px)
																				),
																				0
																			);
																		}
																		:host([placement='bottom']) #arrow {
																			bottom: 100%;
																			left: 50%;
																			border-width: 0
																				var(--_tooltip-arrow-half-width)
																				var(--_tooltip-arrow-height)
																				var(--_tooltip-arrow-half-width);
																			border-color: transparent transparent
																				var(--_tooltip-arrow-background)
																				transparent;
																			transform: translate(
																				calc(
																					-50% +
																						var(--media-tooltip-offset-x, 0px)
																				),
																				0
																			);
																		}

																		:host([placement='left']) {
																			position: absolute;
																			right: calc(
																				100% +
																					var(--media-tooltip-distance, 12px)
																			);
																			top: 50%;
																			transform: translate(0, -50%);
																		}
																		:host([placement='left']) #arrow {
																			top: 50%;
																			left: 100%;
																			border-width: var(
																					--_tooltip-arrow-half-width
																				)
																				0 var(--_tooltip-arrow-half-width)
																				var(--_tooltip-arrow-height);
																			border-color: transparent transparent
																				transparent
																				var(--_tooltip-arrow-background);
																			transform: translate(0, -50%);
																		}

																		:host([placement='none']) #arrow {
																			display: none;
																		}