$chat-zindex: 2;

$chat-container-bg-color: $light-gray;
$chat-container-box-shadow-color: $chat-container-bg-color;

$chat-container-bg-color-fullscreen: $light-gray;

$chat-available-breakpoint: medium;

@import "chat";
@import "plyr";

#sulo-video-container {
	background: black;
	margin-bottom: 0;
	.sulo-spinner-container {
		height: 100%;
		width: 100%;
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.video-player-container {
		position: absolute; 
		height: 100%;
		width: 100%;
	}
}

.stream-container {
	position:relative;
	&.sulo-show-chat {
		#sulo-wowza {
			#sulo-wowza-MediaController {
				width: auto;
				right: 0;
				transition: right .25s ease-in-out;
			}
			#sulo-wowza-MediaController, #sulo-wowza-MediaController-BitrateSelector-Palette {
				right: $chat-width-small;
				@include breakpoint(large) {
					right: $chat-width-large;
				}
			}
			#sulo-wowza-MediaController-BitrateSelector-Palette {
				right: $chat-width-small + 3.5rem;
				@include breakpoint(large) {
					right: $chat-width-large + 3.5rem;
				}
			}
		}

		#sulo-video-container {
			@include breakpoint(medium) {
				margin-right:  $chat-width-small;
			}
			@include breakpoint(large) {
				margin-right: $chat-width-large;
			}
		}
	}
	#sulo-video-container {
		margin-right: 0;
		transition: margin-right .25s ease-in-out;
	}
	.stream-chat-container {
		// background: rgba($light-gray, 0.5);//$white;
		border-bottom: $global-border;
	}
}
.fullscreen {
	.stream-chat-container {
		position: fixed;
		border: none;
		top:0;
		z-index: 2147483647;
		background: rgba($chat-container-bg-color-fullscreen, 0.8);
		box-shadow: -1px 0 10rem 0 rgba(black, 0.35);
	}


	.sulo-share-video-overlay {
		position: fixed !important;
		z-index: 2147483647 !important;
	}
}