// Import OpenVidu Hangouts Theme
@import './openvidu-hangouts-theme';

.openvidu-hangouts {
	width: 100%;
	height: 100%;
		
	.message-screen {
		height: 100%;
		background: #000;
		color: #fff;
		font-weight: bold;
		font-size: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.wrapper {
		display: flex;
		flex-direction: column;
		position: relative;
		height: 100%;

		.toolbar {
			.example-icon {
				padding: 0 14px;
			}

			.example-spacer {
				flex: 1 1 auto;
			}
		}
		mat-sidenav-container {
			flex: 1;
			
			height: 400px;
			
			mat-sidenav {
				display: flex;
				flex-direction: column;
				background: #212121;
				color: #fff;
				width: 25vw;
				min-width: 300px;
				
				.transparent-button {
					background: none;
					box-shadow: none;
				}
				.messages {
					flex: 1px;
					overflow: auto;
					
					ul {
						list-style: none;
						margin: 20px 0px;
						padding: 0px 30px;
						
						li {
							display: flex;
							flex-direction: row;
							font-size: 14px;
							margin: 7px 0 7px 0px;
							
							div {
								flex: 1;
								margin-right: 10px;
								color: rgba(255,255,255,0.70);
								word-break: break-word;
								
								span {
									color: #fff;
									margin-right: 6px;
								}
							}
							.date {
								color: rgba(255,255,255,0.30);
							}
						}
					}
				}
				.bottom {
					display: flex;
					flex-direction: row;
					border-top: 1px solid rgba(255,255,255,0.12);
					
					form {
						flex: 1;
						display: flex;
						flex-direction: row;
						
						mat-form-field {
							flex: 1;
							width: auto;
							
							/deep/ .mat-input-placeholder {
								color: rgba(255,255,255,0.54);
							}
							/deep/ .mat-input-underline {
								border-color: rgba(255,255,255,0.70);
							}
						}
						.send-message {
							color: #757575;

							&.enabled {
								color: #0f9d58;
							}
						}
					}
				}
			}
			.main-video {
				position: relative;
				min-height: 200px;
				flex: 1;
				height: 100%;
				overflow: hidden;
				background: #111;

				.message {
					color: #fff;
					text-align: center;
					position: absolute;
					top: 20px;
					left: 0px;
					right: 0px;
					text-shadow: #000 1px 1px 3px;
					z-index: 99;
				}
				.name-placeholder {
					width: 100%;
					height: 100%;
					text-align: center;
					position: relative;

					div {
						background: #70826a;
						width: 160px;
						height: 160px;
						border-radius: 50%;
						left: 50%;
						top: 50%;
						position: absolute;
						margin: -80px 0px 0px -80px;
						font-size: 100px;
						color: #fff;
						line-height: 160px;
					}
				}
			}
			.bottom-bar {
				bottom: 0;
				height: auto;
				left: 0;
				position: absolute;
				text-align: center;
				right: 0;

				.buttons {
					margin-bottom: 0;
					text-align: center;
					white-space: nowrap;
					position: relative;

					button {
						color: #fff;
						background-color: rgba(0,0,0,0.4);
						margin: 16px 8px 40px 8px;

						&:hover {
							background-color: rgba(0,0,0,.6);
						}
						&.toggle-mic, &.toggle-camera {
							&.disabled {
								color: #000;
								background-color: rgba(255, 255, 255, 1);

								mat-icon {
									display: none;

									&.disabled-icon {
										display: inline-block;
									}
								}
							}
							mat-icon {
								display: inline-block;

								&.disabled-icon {
									display: none;
								}
							}
						}
						&.close-session {
							background-color: rgba(219,68,55,1.0);
						}
					}
				}
				.streams {
					display: flex;
					justify-content: flex-start;
					max-width: 100%;
					text-align: start;
					padding: 8px 24px 0 24px;
					height: 132px;
					white-space: nowrap;
					-webkit-transition: bottom 250ms ease-out,height 250ms ease-out;
					transition: bottom 250ms ease-out,height 250ms ease-out;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					direction: rtl;
					overflow: auto;
					overflow: -moz-scrollbars-none;
				}
			}
			.toggle-chat {
				position: absolute;
				background: #212121;
				border-radius: 0px;
				width: 48px;
				height: 48px;
				bottom: 58px;
				
				mat-icon {
					font-size: 24px;
					line-height: 18px;
				}
			}
		}
	}
}