/* Special layout to include the Talk sidebar */

/* The standard layout defined in the server includes a fixed header with a
 * sticky sidebar. This causes the scroll bar for the main area to appear to the
 * right of the sidebar, which looks confusing for the chat. Thus that layout is
 * overridden with a full set of flex containers to cascade parent element
 * height to the main view to limit the vertical scroll bar only to it (same
 * thing done for the sidebar and the chat view). */
#body-user,
#body-public {
	display: flex;
	flex-direction: column;
}

#body-user #header,
#body-public #header {
	/* Override fixed position from server to include it in the flex layout */
	position: static;
	flex-shrink: 0;
}

#content {
	display: flex;
	flex-direction: row;
	overflow: hidden;

	flex-grow: 1;

	/* Override "min-height: 100%" and "padding-top: 50px" set in server, as the
	 * header is part of the flex layout and thus the whole body is not
	 * available for the content. */
	min-height: 0;
	padding-top: 0;

	/* Does not change anything in normal mode, but ensures that the element
	 * will stretch to the full width in full screen mode. */
	width: 100%;

	/* Override margin used in server, as the header is part of the flex layout
	 * and thus the content does not need to be pushed down. */
	margin-top: 0;
}

#app-content {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;

	flex-grow: 1;

	margin-right: 0;
}

#files-public-content {
	flex-grow: 1;
}



.icon-menu-people {
	@include icon-color('menu-people', 'spreed', $color-primary-text, 1);
}

#talk-sidebar-trigger {
	width: 44px;
	height: 44px;

	background-color: transparent;
	border-color: transparent;

	opacity: 0.6;

	&:hover,
	&:focus,
	&:active {
		opacity: 1;
	}
}



/* Properties based on the app-sidebar */
#talk-sidebar {
	position: relative;
	flex-shrink: 0;
	width: 27vw;
	min-width: 300px;

	background: var(--color-main-background);
	border-left: 1px solid var(--color-border);

	overflow-x: hidden;
	overflow-y: auto;
	z-index: 500;

	transition: var(--animation-quick) width ease-in-out,
				var(--animation-quick) min-width ease-in-out;
}

#talk-sidebar.disappear {
	width: 0;
	min-width: 0;
	border-left-width: 0;
}



/* Talk sidebar */
#talk-sidebar {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#talk-sidebar .emptycontent.room-not-joined {
	/* Override "margin-top: 30vh" set in server, as the message is already
	 * centered in the Talk sidebar. */
	margin-top: unset;

	button {
		padding-left: 24px;
		padding-right: 24px;

		.icon-loading-small {
			/* Prevent the text from being moved when the icon is shown. */
			position: absolute;

			margin-left: 5px;
			margin-top: 1px;

			/* Unset the size set by the server for icons in empty content */
			width: unset;
			height: unset;

			&.hidden {
				display: none;
			}
		}
	}
}

#talk-sidebar #emptycontent {
	position: relative;

	margin-top: 10px;
}

#talk-sidebar #call-container-wrapper {
	/* Overlap the padding from the sidebar itself to maximize the area of the
	 * video as much as possible */
	margin-left: -15px;
	margin-right: -15px;
}

#talk-sidebar #call-container-wrapper #emptycontent {
	/* Compensate for the removed margins above. */
	margin-left: 30px;
	margin-right: 30px;

	/* Override "width: 100%" set in server so margins are respected. */
	width: auto;
}

#talk-sidebar #call-container-wrapper #emptycontent-icon {
	width: 128px;
	margin: 0 auto;
	padding-bottom: 20px;
}

#talk-sidebar #call-container-wrapper #call-container.incall ~ #emptycontent {
	display: none;
}

#talk-sidebar #call-container-wrapper #call-container:not(.incall) {
	display: none;
}

#talk-sidebar #call-container-wrapper #call-container {
	position: relative;

	flex-grow: 1;

	/* Prevent shadows of videos from leaking on other elements. */
	overflow: hidden;

	/* Show the call container in a 16/9 proportion based on the sidebar
	 * width. This is the same proportion used for previews of images by the
	 * SidebarPreviewManager. */
	padding-bottom: 56.25%;
	max-height: 56.25%;

	/* Ensure that the background will be black also in voice only calls. */
	background-color: #000;
}

/* Video in Talk sidebar */
#talk-sidebar #call-container-wrapper #call-container #videos {
	flex-grow: 1;
}

#talk-sidebar #call-container-wrapper #call-container .videoContainer.promoted video {
	/* Base the size of the video on its width instead of on its height;
	 * otherwise the video could appear in full height but cropped on the sides
	 * due to the space available in the sidebar being typically larger in
	 * vertical than in horizontal. */
	width: 100%;
	height: auto;
}

/* Screensharing in Talk sidebar */
#talk-sidebar #call-container-wrapper #call-container.screensharing #screens {
	/* The row with the participants is shorter in the Talk sidebar to make room
	 * for the promoted video and the shared screens. */
	height: calc(100% - 100px);
}

#talk-sidebar #call-container-wrapper #call-container.screensharing .videoContainer {
	max-height: 100px;

	/* Avatars slightly overflow the container; although they overlap the shared
	 * screen it is not too bad and it is better than compressing even further
	 * the shared screen. */
	overflow: visible;
}



#talk-sidebar #call-container #videos .videoContainer:not(.promoted) video {
	/* Make the unpromoted videos smaller to not overlap too much the promoted
	 * video */
	max-height: 100px;
}

/* The avatars are requested with a size of 128px, so reduce it to not overlap
 * too much the promoted video */
#talk-sidebar #call-container #videos .videoContainer:not(.promoted) .avatardiv,
#talk-sidebar #call-container #videos .videoContainer:not(.promoted) .avatardiv img {
	width: 64px !important;
	height: 64px !important;
	line-height: 64px !important;
	/* imageplaceholder() sets font-size to "height * 0.55" */
	font-size: 35.2px !important;
}

/* Text avatars need to be forced to 128px when promoted, as imageplaceholder()
 * overrides the given size with the actual height of the element it was called
 * on, so the text avatar may have a hardcoded height of 64px. Note that this
 * does not apply to regular image avatars, as in that case they are always
 * requested with a size of 128px. */
#talk-sidebar #call-container #videos .videoContainer.promoted .avatardiv {
	width: 128px !important;
	height: 128px !important;
	line-height: 128px !important;
	/* imageplaceholder() sets font-size to "height * 0.55" */
	font-size: 70.4px !important;
}

#talk-sidebar #call-container.participants-1 .videoView,
#talk-sidebar #call-container.participants-2 .videoView {
	/* Do not force the width to 200px, as otherwise the video is too tall and
	 * overlaps too much with the promoted video. */
	min-width: initial;
	/* z-index of 10 would put the video on top of the close button. */
	z-index: 1;
}

#talk-sidebar #call-container .nameIndicator {
	/* Reduce padding to bring the name closer to the bottom */
	padding: 3px;
	/* Use default font size, as it takes too much space otherwise */
	font-size: initial;
}

#talk-sidebar #call-container.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
	/* Reduce padding to bring the name closer to the bottom */
	padding: 3px 35%;
}

#talk-sidebar #call-container .mediaIndicator {
	/* Move the media indicator closer to the bottom */
	bottom: 16px;
}



#talk-sidebar .call-button {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;

	button {
		padding-left: 26px;
		padding-right: 26px;
	}

	.icon-loading-small {
		/* Prevent the text from being moved when the icon is shown. */
		position: absolute;

		margin-left: 5px;
		margin-top: 1px;

		/* Unset the background image set by the server for loading icons inside
		 * buttons, as in this case the pure CSS icon can be used instead of the
		 * image. */
		background-image: unset;

		&.hidden {
			display: none;
		}
	}
}



/**
 * Cascade parent element height to the chat view in the sidebar to limit the
 * vertical scroll bar only to the list of messages. Otherwise, the vertical
 * scroll bar would be shown for the whole sidebar and everything would be
 * moved when scrolling to see overflown messages.
 *
 * The list of messages should stretch to fill the available space at the bottom
 * of the right sidebar, so the height is cascaded using flex boxes.
 */
#talk-sidebar #chatView {
	display: flex;
	flex-direction: column;
	overflow: hidden;

	flex-grow: 1;

	/* Distribute available height between call container and chat view. */
	height: 50%;
}

#talk-sidebar .comments {
	overflow-y: auto;

	/* Needed for proper calculation of comment positions in the scrolling
	   container (as otherwise the comment position is calculated with respect
	   to the closest ancestor with a relative position) */
	position: relative;
}

#talk-sidebar #chatView .newCommentRow,
#talk-sidebar #chatView .comments {
	padding-left: 15px;
	padding-right: 15px;
}

#talk-sidebar #chatView .comments .wrapper-background,
#talk-sidebar #chatView .comments .wrapper {
	/* Padding is not respected in the comment wrapper due to its absolute
	 * positioning, so it must be set through its position. */
	left: 15px;
	right: 15px;
}

#talk-sidebar #chatView .newCommentForm.with-add-button {
	/* Make room to show the "Add" button if needed. */
	margin-right: 44px;
}



/**
 * Confirm icon inside input field.
 *
 * The input and the icon should be direct children of a wrapper with a relative
 * position. The input is expected to be as wide as its wrapper.
 *
 * It is assumed that the icon will have the standard width for buttons in
 * inputs of 34px. However, further adjustments may be needed for the input and
 * the padding depending on the context where they are used.
 *
 * The confirm icon can have a sibling loading icon to switch to (by hiding one
 * icon and showing the other) while the operation is in progress.
 */
input[type="text"],
input[type="password"] {
	padding-right: 34px;

	/* When the input is focused it is expected that pressing enter will confirm
	 * the input just like clicking on the icon would do. To hint this behaviour
	 * the opacity of the confirm icon is slightly increased in this case.
	 */
	&:focus + .icon-confirm:not(:disabled) {
		opacity: .6;
	}

	& + .icon-confirm {
		position: absolute;
		top: 0;
		/* Compensate for right margin of inputs set in the server. */
		right: 3px;

		/* Border and background color are removed to show only the icon inside
		* the input. */
		border: none;
		background-color: transparent;

		opacity: .3;

		&:hover:not(:disabled),
		&:focus:not(:disabled),
		&:active:not(:disabled) {
			opacity: 1;
		}

		+ .icon-loading-small {
			/* Mimic size set in server for confirm button. */
			width: 34px;
			height: 34px;
			padding: 7px 6px;
			margin-top: 3px;
			margin-bottom: 3px;

			position: absolute;
			top: 0;
			right: 3px;
		}
	}
}



.authorRow {
	.editable-text-label {
		.label-wrapper {
			display: flex;
			align-items: center;
			.edit-button .icon {
				background-color: transparent;
				border: none;
				padding: 13px 22px;
				margin: 0;

				opacity: .3;

				&:hover,
				&:focus,
				&:active {
					opacity: 1;
				}
			}
		}
		.input-wrapper {
			position: relative;

			.icon-confirm {
				/* Needed to override an important rule set in the
				 * server. */
				background-color: transparent !important;
			}
		}
		.label {
			margin-left: 5px;
		}
	}

	.guest-name p {
		display: inline-block;
		padding: 9px 0;
	}

	/* The specific locator is needed to have higher priority than other
	 * important rules set in the server. */
	input.checkbox + label.checkbox-label,
	input.radio + label {
		/* If ".icon-loading-small" is set hide the checkbox and show a
		 * loading icon instead. */
		&.icon-loading-small:before {
			background-image: none !important;
			background-color: transparent !important;
			border-color: transparent !important;
		}
		&.icon-loading-small:after {
			top: 22px;
			left: 21px;
		}
	}
}



.hidden-important {
	display: none !important;
}