:host {
																		position: relative;
																		font: var(
																			--media-font,
																			var(--media-font-weight, bold)
																				var(--media-font-size, 14px) /
																				var(
																					--media-text-content-height,
																					var(--media-control-height, 24px)
																				)
																				var(
																					--media-font-family,
																					helvetica neue,
																					segoe ui,
																					roboto,
																					arial,
																					sans-serif
																				)
																		);
																		color: var(
																			--media-text-color,
																			var(
																				--media-primary-color,
																				rgb(238 238 238)
																			)
																		);
																		background: var(
																			--media-control-background,
																			var(
																				--media-secondary-color,
																				rgb(20 20 30 / 0.7)
																			)
																		);
																		padding: var(
																			--media-button-padding,
																			var(--media-control-padding, 10px)
																		);
																		justify-content: var(
																			--media-button-justify-content,
																			center
																		);
																		display: inline-flex;
																		align-items: center;
																		vertical-align: middle;
																		box-sizing: border-box;
																		transition: background 0.15s linear;
																		pointer-events: auto;
																		cursor: var(--media-cursor, pointer);
																		-webkit-tap-highlight-color: transparent;
																	}

																	:host(:focus-visible) {
																		box-shadow: var(
																			--media-focus-box-shadow,
																			inset 0 0 0 2px rgb(27 127 204 / 0.9)
																		);
																		outline: 0;
																	}

																	:host(:where(:focus)) {
																		box-shadow: none;
																		outline: 0;
																	}

																	:host(:hover) {
																		background: var(
																			--media-control-hover-background,
																			rgba(50 50 70 / 0.7)
																		);
																	}

																	svg,
																	img,
																	::slotted(svg),
																	::slotted(img) {
																		width: var(--media-button-icon-width);
																		height: var(
																			--media-button-icon-height,
																			var(--media-control-height, 24px)
																		);
																		transform: var(
																			--media-button-icon-transform
																		);
																		transition: var(
																			--media-button-icon-transition
																		);
																		fill: var(
																			--media-icon-color,
																			var(
																				--media-primary-color,
																				rgb(238 238 238)
																			)
																		);
																		vertical-align: middle;
																		max-width: 100%;
																		max-height: 100%;
																		min-width: 100%;
																	}

																	media-tooltip {
																		max-width: 0;
																		overflow-x: clip;
																		opacity: 0;
																		transition:
																			opacity 0.3s,
																			max-width 0s 9s;
																	}

																	:host(:hover) media-tooltip,
																	:host(:focus-visible) media-tooltip {
																		max-width: 100vw;
																		opacity: 1;
																		transition: opacity 0.3s;
																	}

																	:host([notooltip]) slot[name='tooltip'] {
																		display: none;
																	}