@use '../assets';

#app-mount .wrapper-1gVUIN {
	background: var(--background);
	border-bottom: 1px solid var(--base-border);
	z-index: 100;
	.videoControls-353CsJ {
		padding: 0 var(--spacing) var(--spacing);
	}
	.gradientContainer-phMG8d {
		opacity: 0.5;
	}
	.videoWrapper-2v09vt {
		background-color: var(--background);
	}
	.rightTrayIcon-1m3hnG {
		margin-left: var(--spacing);
	}
	.bottomControls-lIJyYL {
		z-index: 1000 !important;
		position: relative;
	}
	.root-1Emen5 {
		background: transparent;
		.header-1BxQhu {
			color: var(--text-normal);
			font-size: var(--font-size);
			font-weight: var(--font-weight-normal);
		}
	}
	.headerWrapper-1ULEPv {
		margin: 0 calc(var(--spacing) * -1);
		.button-1fGHAH {
			margin: 0 var(--spacing);
		}
		.avatar-b2yTGD {
			margin: 0 var(--spacing-half);
			margin-left: 0;
		}
		.playingText-16QsYy {
			color: var(--text-normal);
			font-weight: var(--font-weight-semibold);
			font-size: var(--font-size-md);
			margin: 0;
		}
	}
	.quickSelect-384d3G {
		color: var(--text-normal);
		font-size: var(--font-size);
		margin-top: var(--spacing);
		.quickSelectLabel-ArUyd9 {
			line-height: normal;
			text-transform: capitalize;
			&::after {
				content: ':';
			}
		}
		.flex-1xMQg5 {
			margin: 0;
			margin-left: var(--spacing-half);
			.quickSelectValue-rmtkbe {
				margin: 0;
				font-weight: var(--font-weight-semibold);
			}
		}
	}
	.controlIcon-10O-4h {
		color: var(--text-normal);
		path[d='M10 5V3H5.375C4.06519 3 3 4.06519 3 5.375V18.625C3 19.936 4.06519 21 5.375 21H18.625C19.936 21 21 19.936 21 18.625V14H19V19H5V5H10Z'] {
			d: path(assets.$path_link);
			transform: scale(1.45) translateX(1.5px) translateY(0.5px);
			& ~ path {
				display: none;
			}
		}
		path[d='M19,3H14V5h5v5h2V5A2,2,0,0,0,19,3Z'] {
			d: path(assets.$path_fullscreen);
			& ~ path {
				display: none;
			}
		}
		path[d='M11.383 3.07904C11.009 2.92504 10.579 3.01004 10.293 3.29604L6 8.00204H3C2.45 8.00204 2 8.45304 2 9.00204V15.002C2 15.552 2.45 16.002 3 16.002H6L10.293 20.71C10.579 20.996 11.009 21.082 11.383 20.927C11.757 20.772 12 20.407 12 20.002V4.00204C12 3.59904 11.757 3.23204 11.383 3.07904ZM14 5.00195V7.00195C16.757 7.00195 19 9.24595 19 12.002C19 14.759 16.757 17.002 14 17.002V19.002C17.86 19.002 21 15.863 21 12.002C21 8.14295 17.86 5.00195 14 5.00195ZM14 9.00195C15.654 9.00195 17 10.349 17 12.002C17 13.657 15.654 15.002 14 15.002V13.002C14.551 13.002 15 12.553 15 12.002C15 11.451 14.551 11.002 14 11.002V9.00195Z'],
		path[d='M10.293 3.29604C10.579 3.01004 11.009 2.92504 11.383 3.07904C11.757 3.23204 12 3.59904 12 4.00204V20.002C12 20.407 11.757 20.772 11.383 20.927C11.009 21.082 10.579 20.996 10.293 20.71L6 16.002H3C2.45 16.002 2 15.552 2 15.002V9.00204C2 8.45304 2.45 8.00204 3 8.00204H6L10.293 3.29604ZM14 9.00195C15.654 9.00195 17 10.349 17 12.002C17 13.657 15.654 15.002 14 15.002V13.002C14.551 13.002 15 12.553 15 12.002C15 11.451 14.551 11.002 14 11.002V9.00195Z'] {
			d: path(assets.$path_speaker_alt);
		}
		path[d='M19.73 9L21 10.27l-2.23 2.23L21 14.73 19.73 16l-2.23-2.23L15.27 16 14 14.73l2.23-2.23L14 10.27 15.27 9l2.23 2.23z'] {
			d: path(assets.$path_speaker_disabled_alt);
			+ path {
				display: none;
			}
		}
		path[d='M16.59 8.59004L12 13.17L7.41 8.59004L6 10L12 16L18 10L16.59 8.59004Z'] {
			d: path(assets.$path_chevron);
		}
	}
	.overlay-2RIWoZ {
		margin: 0;
		transition: none;
		.status-15kcmy {
			border-radius: var(--border-radius);
			margin-left: var(--spacing);
			padding: var(--spacing-half);
			box-sizing: border-box;
			width: 24px;
			height: 24px;
			color: var(--white);
			background: rgb(0, 0, 0, 0.5);
		}
		.overlayTitle-2efoIF {
			padding: var(--spacing-third) var(--spacing);
			border-radius: var(--border-radius);
			background: var(--background);
			color: var(--text-normal);
			box-shadow: var(--elevation-1);
			font-size: var(--font-size);
			border: 1px solid var(--base-border);
			position: relative;
			font-weight: var(--font-weight-semibold);
		}
	}
	.root-24JyNP {
		&[style*='padding-left: 0'] {
			.tile-2TcwiO {
				margin: 0 !important;
			}
		}
		.participantsButton-1WBdFP {
			right: -2px;
			padding: 0;
			border-radius: var(--border-radius);
			background: var(--background);
			transition: none;
			border: 1px solid var(--base-border);
			cursor: var(--cursor);
			&:hover {
				background: var(--background-modifier-hover);
			}
			&:active {
				background: var(--background-modifier-active);
			}
		}
		.members-FhDsf6 {
			display: none;
		}
	}
	.root-fxRb6O {
		.tileSizer-3SnN8s {
			margin-bottom: var(--spacing);
			width: 100%;
			.tile-2Dr6M1 {
				margin-right: var(--spacing);
			}
		}
	}
	.indicators-3zIm5K {
		top: var(--spacing);
		right: var(--spacing);
	}
	.wrapper-vj0FTk {
		padding: 0 0 0 var(--spacing);
	}
	.tile-2TcwiO {
		border-radius: var(--border-radius);
		background: var(--background-alt);
		margin-right: var(--spacing);
		box-sizing: border-box;
		.border-2Vy6FN {
			border-radius: var(--border-radius);
			box-shadow: inset 0 0 0 1px var(--base-border);
			&.speaking-7QZEkv {
				box-shadow: inset 0 0 0 2px rgb(var(--accent));
			}
		}
		.emptyPreview-1SMLD4 {
			background: transparent;
		}
		.selectedScreen-dCYer0 {
			background: rgb(0, 0, 0, 0.5);
			.selectedIcon-k6L6Yx {
				color: var(--white);
				path {
					d: path(assets.$path_video);
					transform: scale(1.45) translateY(1px);
				}
			}
		}
	}
	.pictureInPictureWindow-3ms5Zy {
		border-radius: 0;
		.elevationHigh-3KUiqj {
			box-shadow: none;
			.tile-2TcwiO {
				box-shadow: none;
			}
		}
	}
	.voiceCallWrapper-3UtDiC {
		padding: 0;
		.wrapper-3mYmFS.ringingIncoming-fibTw-::after,
		.wrapper-3mYmFS.ringingOutgoing-1NjfRn::after {
			border-radius: var(--border-radius);
			border: 3px solid rgb(var(--accent), 0.25);
		}
		.border-2BJQjd {
			border-radius: var(--border-radius);
			&.speaking-3RWJBr {
				box-shadow: inset 0 0 0 2px rgb(var(--accent)), 0 0 0 4px rgb(var(--accent), 0.25);
			}
		}
		.participant-1l6khj {
			margin: 0 var(--spacing);
			width: var(--avatar-size-xl) !important;
			height: var(--avatar-size-xl) !important;
			.status-1ZXjSF {
				border-radius: var(--border-radius);
				background: rgb(var(--status-red));
				border: 1px solid var(--base-border);
				box-sizing: border-box;
				height: 24px;
				width: 24px;
				padding: var(--spacing-third);
				bottom: -5px;
				right: -5px;
			}
			.wrapper-3mYmFS {
				box-shadow: inset 0 0 0 1px var(--base-border);
				background: var(--background-dark);
				border-radius: var(--border-radius);
				overflow: hidden;
			}
			.wrapper-3mYmFS,
			.callAvatarMask-fiNMWy {
				width: var(--avatar-size-xl) !important;
				height: var(--avatar-size-xl) !important;
				overflow: visible;
				foreignObject {
					mask: none;
					overflow: visible;
					.voiceAvatar-14IynY {
						border-radius: var(--border-radius);
						border: 1px solid var(--base-border);
						box-sizing: border-box;
					}
				}
				img {
					border-radius: 0;
				}
			}
		}
	}
	.green-3wkLbx {
		margin: 0;
		background: rgb(var(--status-green));
		cursor: var(--cursor);
		width: 40px;
		height: 40px;
		padding: 0;
		border-radius: 0;
		transition: none;
		color: var(--text-normal);
		background: var(--background-alt);
		border: 1px solid var(--base-border);
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
		.controlIcon-10O-4h {
			height: 18px;
			color: inherit;
		}
		&:hover {
			background: var(--background-modifier-hover);
		}
		&:active {
			background: var(--background-modifier-active);
		}
		&.active-3D763s {
			border-right: none;
			border-radius: var(--border-radius) 0 0 var(--border-radius);
		}
		path[d='M21.526 8.149C21.231 7.966 20.862 7.951 20.553 8.105L18 9.382V7C18 5.897 17.103 5 16 5H4C2.897 5 2 5.897 2 7V17C2 18.104 2.897 19 4 19H16C17.103 19 18 18.104 18 17V14.618L20.553 15.894C20.694 15.965 20.847 16 21 16C21.183 16 21.365 15.949 21.526 15.851C21.82 15.668 22 15.347 22 15V9C22 8.653 21.82 8.332 21.526 8.149Z'] {
			d: path(assets.$path_video);
			transform: scale(1.45) translateY(1px);
		}
		path[d='M11 5V3C16.515 3 21 7.486 21 13H19C19 8.589 15.411 5 11 5ZM17 13H15C15 10.795 13.206 9 11 9V7C14.309 7 17 9.691 17 13ZM11 11V13H13C13 11.896 12.105 11 11 11ZM14 16H18C18.553 16 19 16.447 19 17V21C19 21.553 18.553 22 18 22H13C6.925 22 2 17.075 2 11V6C2 5.447 2.448 5 3 5H7C7.553 5 8 5.447 8 6V10C8 10.553 7.553 11 7 11H6C6.063 14.938 9 18 13 18V17C13 16.447 13.447 16 14 16Z'] {
			d: path(assets.$path_phone);
			transform: scale(1.3) translateX(2px) translateY(1px);
		}
	}
	.wrapper-3t3Yqv {
		border-radius: var(--button-border-radius);
		box-shadow: 0 0 0 0.75px var(--base-border);
		overflow: hidden;
		margin: 0;
		.controlButton-2PMNom {
			margin: 0;
		}
		.contextMenuNub-NuTZ_U {
			padding: 0;
			background: transparent;
			border-radius: var(--border-radius);
			color: var(--text-normal);
			&:hover,
			&.active-3D763s {
				background: var(--background-dark);
			}
		}
		button {
			margin: 0;
			background: var(--background-alt);
			cursor: var(--cursor);
			width: 40px;
			height: 40px;
			padding: 0;
			border-radius: 0;
			transition: none;
			color: var(--text-normal);
			.controlIcon-10O-4h {
				height: 30px;
				color: inherit;
			}
			path[d='M21.526 8.149C21.231 7.966 20.862 7.951 20.553 8.105L18 9.382V7C18 5.897 17.103 5 16 5H4C2.897 5 2 5.897 2 7V17C2 18.104 2.897 19 4 19H16C17.103 19 18 18.104 18 17V14.618L20.553 15.894C20.694 15.965 20.847 16 21 16C21.183 16 21.365 15.949 21.526 15.851C21.82 15.668 22 15.347 22 15V9C22 8.653 21.82 8.332 21.526 8.149Z'] {
				d: path(assets.$path_video);
				transform: scale(1.45) translateY(1px);
			}
			path[d='M2 4.5C2 3.397 2.897 2.5 4 2.5H20C21.103 2.5 22 3.397 22 4.5V15.5C22 16.604 21.103 17.5 20 17.5H13V19.5H17V21.5H7V19.5H11V17.5H4C2.897 17.5 2 16.604 2 15.5V4.5ZM13.2 14.3375V11.6C9.864 11.6 7.668 12.6625 6 15C6.672 11.6625 8.532 8.3375 13.2 7.6625V5L18 9.6625L13.2 14.3375Z'] {
				d: path(assets.$path_desktop);
				transform: scale(1.1) translateX(3px) translateY(3px);
			}
			path[d='M21.1169 1.11603L22.8839 2.88403L19.7679 6.00003L22.8839 9.11603L21.1169 10.884L17.9999 7.76803L14.8839 10.884L13.1169 9.11603L16.2329 6.00003L13.1169 2.88403L14.8839 1.11603L17.9999 4.23203L21.1169 1.11603ZM18 22H13C6.925 22 2 17.075 2 11V6C2 5.447 2.448 5 3 5H7C7.553 5 8 5.447 8 6V10C8 10.553 7.553 11 7 11H6C6.063 14.938 9 18 13 18V17C13 16.447 13.447 16 14 16H18C18.553 16 19 16.447 19 17V21C19 21.553 18.553 22 18 22Z'] {
				d: path(assets.$path_phone);
				transform: scale(1.1) translateX(3px) translateY(3px);
			}
			path[d='M14.99 11C14.99 12.66 13.66 14 12 14C10.34 14 9 12.66 9 11V5C9 3.34 10.34 2 12 2C13.66 2 15 3.34 15 5L14.99 11ZM12 16.1C14.76 16.1 17.3 14 17.3 11H19C19 14.42 16.28 17.24 13 17.72V21H11V17.72C7.72 17.23 5 14.41 5 11H6.7C6.7 14 9.24 16.1 12 16.1ZM12 4C11.2 4 11 4.66667 11 5V11C11 11.3333 11.2 12 12 12C12.8 12 13 11.3333 13 11V5C13 4.66667 12.8 4 12 4Z'],
			path[d='M6.7 11H5C5 12.19 5.34 13.3 5.9 14.28L7.13 13.05C6.86 12.43 6.7 11.74 6.7 11Z'] {
				d: path(assets.$path_mic);
				transform: scale(1.5) translateX(1px);
				& ~ path {
					display: none;
				}
				&[d='M6.7 11H5C5 12.19 5.34 13.3 5.9 14.28L7.13 13.05C6.86 12.43 6.7 11.74 6.7 11Z'] {
					color: rgb(var(--status-red));
				}
			}
			foreignObject {
				mask: none;
			}
			&:hover {
				background: var(--background-modifier-hover);
			}
			&:active {
				background: var(--background-modifier-active);
			}
			&.red-3T8maV {
				background: rgb(var(--status-red));
				border-left: 1px solid var(--base-border);
				svg {
					color: var(--white);
				}
			}
		}
		.contextMenuContainer-1RO4DQ {
			height: 40px;
			width: 40px;
			button {
				height: 40px;
				width: 40px;
			}
			foreignObject {
				mask: none;
			}
			.controlIcon-10O-4h {
				height: 18px;
				width: 18px;
			}
		}
	}
}
