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