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