:host([mediaisfullscreen])
																::slotted([slot='media']) {
																outline: none;
															}

															:host {
																box-sizing: border-box;
																position: relative;
																display: inline-block;
																line-height: 0;
																background-color: var(
																	--media-background-color,
																	#000
																);
																overflow: hidden;
															}

															:host(:not([audio]))
																[part~='layer']:not([part~='media-layer']) {
																position: absolute;
																top: 0;
																left: 0;
																bottom: 0;
																right: 0;
																display: flex;
																flex-flow: column nowrap;
																align-items: start;
																pointer-events: none;
																background: none;
															}

															slot[name='media'] {
																display: var(--media-slot-display, contents);
															}

															:host([audio]) slot[name='media'] {
																display: var(--media-slot-display, none);
															}

															:host([audio])
																[part~='layer'][part~='gesture-layer'] {
																height: 0;
																display: block;
															}

															:host(:not([audio])[gesturesdisabled])
																::slotted([slot='gestures-chrome']),
															:host(:not([audio])[gesturesdisabled])
																media-gesture-receiver[slot='gestures-chrome'] {
																display: none;
															}

															::slotted(
																:not([slot='media']):not([slot='poster']):not(
																		media-loading-indicator
																	):not([role='dialog']):not([hidden])
															) {
																pointer-events: auto;
															}

															:host(:not([audio]))
																*[part~='layer'][part~='centered-layer'] {
																align-items: center;
																justify-content: center;
															}

															:host(:not([audio]))
																::slotted(
																	media-gesture-receiver[slot='gestures-chrome']
																),
															:host(:not([audio]))
																media-gesture-receiver[slot='gestures-chrome'] {
																align-self: stretch;
																flex-grow: 1;
															}

															slot[name='middle-chrome'] {
																display: inline;
																flex-grow: 1;
																pointer-events: none;
																background: none;
															}

															::slotted([slot='media']),
															::slotted([slot='poster']) {
																width: 100%;
																height: 100%;
															}

															:host(:not([audio])) .spacer {
																flex-grow: 1;
															}

															:host(:-webkit-full-screen) {
																width: 100% !important;
																height: 100% !important;
															}

															::slotted(
																:not([slot='media']):not([slot='poster']):not(
																		[noautohide]
																	):not([hidden]):not([role='dialog'])
															) {
																opacity: 1;
																transition: var(
																	--media-control-transition-in,
																	opacity 0.25s
																);
															}

															:host(
																	[userinactive]:not([mediapaused]):not(
																			[mediaisairplaying]
																		):not([mediaiscasting]):not([audio])
																)
																::slotted(
																	:not([slot='media']):not([slot='poster']):not(
																			[noautohide]
																		):not([role='dialog'])
																) {
																opacity: 0;
																transition: var(
																	--media-control-transition-out,
																	opacity 1s
																);
															}

															:host(
																	[userinactive]:not([noautohide]):not(
																			[mediapaused]
																		):not([mediaiscasting]):not([audio])
																)
																::slotted([slot='media']) {
																cursor: none;
															}

															:host(
																	[userinactive][autohideovercontrols]:not(
																			[noautohide]
																		):not([mediapaused]):not(
																			[mediaiscasting]
																		):not([audio])
																)
																* {
																--media-cursor: none;
																cursor: none;
															}

															::slotted(media-control-bar) {
																align-self: stretch;
															}

															:host(:not([audio])[mediahasplayed])
																slot[name='poster'] {
																display: none;
															}

															::slotted([role='dialog']) {
																width: 100%;
																height: 100%;
																align-self: center;
															}

															::slotted([role='menu']) {
																align-self: end;
															}