/* Request password button has the appearance of the log in button */
.request-password-wrapper {
	position: relative;
	width: 280px;
	margin: 16px auto;
}

.request-password-wrapper .icon {
	position: absolute;
	top: 23px;
	right: 23px;
	pointer-events: none;
}

input#request-password-button {
	width: 269px;
	padding: 10px 10px;
}

input#request-password-button:disabled ~ .icon {
	opacity: 0.5;
}



/* Special layout to include the Talk sidebar */
/* The original style of the body is kept until the layout has been adjusted to
 * include the Talk sidebar. If only "#body-login" was used, immediately after
 * load and before the sidebar was injected the original elements would be using
 * the style for the adjusted layout, which is not the proper one for them, and
 * this would cause the elements to "jump" to their final position once the
 * layout was adjusted. */
#body-login.talk-sidebar-enabled {
	flex-direction: row;
	align-items: stretch;
}

/* #body-login should be used to override the #content rules set in server. */
#body-login #content {
	flex-grow: 1;

	display: flex;
	flex-direction: column;
	align-items: center;

	height: auto;

	overflow-x: hidden;

	/* Override "padding-top: 50px" set in server. */
	padding-top: 0;
}

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

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

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

	transition: 300ms width ease-in-out,
				300ms 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 {
	position: relative;

	margin-top: 10px;
}

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

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

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

	flex-grow: 1;

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

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

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

/* Video in Talk sidebar */
#talk-sidebar #call-container #videos {
	position: relative;

	flex-grow: 1;
}

#talk-sidebar #call-container .videoContainer {
	/* The video container has some small padding to prevent the video from
	 * reaching the edges, but it also uses "width: 100%", so the padding should
	 * be included in the full width of the element. */
	box-sizing: border-box;
}

#talk-sidebar #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;
}

#talk-sidebar #call-container .nameIndicator {
	/* The name indicator has some small padding to prevent the name from
	 * reaching the edges, but it also uses "width: 100%", so the padding should
	 * be included in the full width of the element. */
	box-sizing: border-box;
}

/**
 * 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 .comments .wrapper {
	/* Reset the rules set for ".wrapper" elements by "guest.scss" in server, as
	 * they affect too the virtual list wrapper when they should not. */
	width: auto;
	margin-top: 0;
}

#talk-sidebar #chatView .comments .message {
	/* The messages are left padded, but they also use "width: calc(100%...", so
	 * the padding should be included in the full width of the element. */
	box-sizing: border-box;
}

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

/* Unset conflicting rules from guest.css for the sidebar */
#talk-sidebar {
	text-align: left;
}

#talk-sidebar form {
	width: unset;
	margin: 0;
}

#talk-sidebar .button {
	display: unset;
}

/* Restore rules from input.scss overriden by guest.css for the sidebar */
#talk-sidebar input:not([type='range']) {
	margin: 3px 3px 3px 0;
	padding: 7px 6px;
	font-size: 13px;
	border: 1px solid var(--color-border-dark);
	box-sizing: border-box;

	&:not(:disabled):not(.primary) {
		&:hover,
		&:focus {
			border-color: var(--color-primary-element);
		}
	}
}

#talk-sidebar input[type="text"],
#talk-sidebar input[type="password"] {
	width: 130px;

	padding-right: 34px;
}

/* Restore rules from style.scss (core) overriden by guest.css for the
 * sidebar */
#body-login #talk-sidebar a {
	color: var(--color-main-text);
	font-weight: inherit;
}

/* Unset conflicting rules from publicshareauth.css (core) for the sidebar */
#talk-sidebar input[type="submit"],
#talk-sidebar input.icon-confirm[type="submit"] {
	top: unset;
}

#talk-sidebar .guest-name input.icon-confirm[type="submit"] {
	top: -5px;
	right: 0px;
	border: none;
}

/* Unset conflicting rules from guest.css for the sidebar */
#talk-sidebar input[type="submit"].hidden,
#talk-sidebar input.icon-confirm[type="submit"].hidden {
	display: none;
}