/* ==================================================

	Zoom interview modal ("German Guy")

	@related colors

================================================== */

:root {
	--zoom-w:        715.5px;
	--zoom-chrome:   #080808;
	--zoom-accent:   #FF0050;
	--zoom-ok:       #00E947;
	--zoom-gutter:   13.5px;
	--zoom-label:    7px;
}

.zoom-modal {
	position: fixed;
	inset: 0;
	z-index: 300;

	display: flex;
	align-items: center;
	justify-content: center;

	/* transparent backdrop deliberately does NOT close the call - End and Escape do */
}

/* base display beats the [hidden] UA style */
.zoom-modal[hidden] {
	display: none;
}

.zoom-modal__window {
	position: relative;

	width: min(92vw, var(--zoom-w));

	overflow: hidden;
	border: 0.75px solid #363636;
	border-radius: 10px;
	background-color: var(--zoom-chrome);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);

	color: var(--white);
	cursor: grab;
}

.zoom-modal__window.is-dragging {
	cursor: grabbing;
}

/* -------------------------------------
	=Bars (top / bottom chrome)
------------------------------------- */

.zoom-modal__bar {
	display: flex;
	justify-content: space-between;

	padding-inline: var(--zoom-gutter);
}

.zoom-modal__bar--top {
	align-items: center;

	height: 25.25px;
	padding-right: 12.5px;
}

.zoom-modal__bar--bottom {
	align-items: flex-start;

	height: 30.5px;
	padding-top: 3.5px;
	padding-right: 16px;
}

/* -------------------------------------
	=Brand lockup
------------------------------------- */

.zoom-modal__brand {
	align-self: flex-start;

	display: flex;
	flex-direction: column;
	gap: 0.5px;

	padding-top: 2.75px;
}

.zoom-modal__brand-mark {
	font-size: 6px;
	font-weight: var(--font-weight-bold);
	line-height: 1;
}

.zoom-modal__brand-product {
	font-size: 8px;
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
}

/* -------------------------------------
	=Top-right cluster
------------------------------------- */

.zoom-modal__top-actions {
	display: flex;
	align-items: center;
}

.zoom-modal__shield {
	display: block;

	width: 8px;
	height: 8px;
}

.zoom-modal__divider {
	width: 1px;
	height: 12px;
	margin-left: 7px;

	background-color: #2A2A2B;
}

.zoom-modal__view {
	display: flex;
	align-items: center;
	gap: 2.5px;

	padding: 0;
	margin-left: 15px;

	border: 0;
	background-color: transparent;

	color: var(--white);
	font-size: var(--zoom-label);
	line-height: 1;
	cursor: pointer;
}

.zoom-modal__view-icon {
	display: block;

	width: 6.25px;
	height: 6.25px;
}

.zoom-modal__avatar {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 13.25px;
	height: 13.25px;
	margin-left: 11.5px;

	border-radius: 4px;
	background-color: #202020;
}

.zoom-modal__avatar-tile {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 8.5px;
	height: 8.5px;

	border-radius: 3.5px;
	background-color: #D9D9D9;

	color: #202020;
	font-size: 6px;
	font-weight: var(--font-weight-bold);
	line-height: 1;
}

/* -------------------------------------
	=Stage (the video feed)
------------------------------------- */

.zoom-modal__stage {
	position: relative;

	padding-inline: 5.25px;
	background-color: var(--zoom-chrome);
}

.zoom-modal__video,
.zoom-modal__stage .plyr,
.zoom-modal__stage .plyr__video-wrapper {
	aspect-ratio: 16 / 10;
	width: 100%;
	height: auto;
}

.zoom-modal__video,
.zoom-modal__stage .plyr video {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.zoom-modal__name {
	position: absolute;
	bottom: 5px;
	left: var(--zoom-gutter);

	padding: 3px 4.5px;

	border-radius: 1.5px;
	background-color: #0B0B0B;

	color: var(--white);
	font-size: 6.5px;
	letter-spacing: 0.47px;
	line-height: 1;
}

/* -------------------------------------
	=Controls (Unmute / Video / End)
------------------------------------- */

.zoom-modal__controls {
	display: flex;
	gap: 28.5px;
}

.zoom-modal__ctrl,
.zoom-modal__end {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	height: 23px;
	padding: 0;

	border: 0;
	background-color: transparent;

	color: var(--white);
	cursor: pointer;
}

/* press dims and stays dimmed (nothing to do); End excluded - it closes the window */
.zoom-modal__ctrl,
.zoom-modal__view {
	transition: opacity var(--trans-dur) var(--trans-func);
}

.zoom-modal__ctrl.is-pressed,
.zoom-modal__view.is-pressed {
	opacity: 0.9;
}

.zoom-modal__ctrl-label {
	font-size: var(--zoom-label);
	line-height: 1.15;
	white-space: nowrap;
}

.zoom-modal__ctrl--mute {
	min-width: 25px;
}

.zoom-modal__mute-icon {
	display: block;

	width: 10px;
	height: 13.25px;
}

.zoom-modal__video-icon {
	display: block;

	width: 12px;
	height: 10.5px;
}

.zoom-modal__slash {
	stroke: var(--zoom-accent);
	visibility: hidden;
}

[aria-pressed="true"] .zoom-modal__slash {
	visibility: visible;
}

.zoom-modal__end {
	color: var(--zoom-accent);
}

.zoom-modal__end .zoom-modal__ctrl-label {
	color: var(--white);
}

.zoom-modal__end-icon {
	display: block;

	width: 14px;
	height: 12px;
}

/* -------------------------------------
	=Mobile

	max-height cap keeps the 9:16 feed inside a short screen; past it the picture crops via object-fit.
------------------------------------- */

@media ( max-width: 1076px ) {

	.zoom-modal__window {
		cursor: default;
	}

	.zoom-modal__video,
	.zoom-modal__stage .plyr,
	.zoom-modal__stage .plyr__video-wrapper {
		aspect-ratio: 9 / 16;
		max-height: calc(100dvh - 90px);
	}

}