.chat-container {
	flex-direction: column;
	padding: 0.5rem;
	padding-top: 0;
	flex: 1;
	min-height: 20rem;
	display: flex;
	border: $global-border;
	.toggle-button {
		display: none;
	}
	.chat-content {
		position: relative;
		display: flex;		
		flex-direction: column;
		justify-content: flex-end;
		flex: 1 0 auto;

	}

	.messages-list {
		margin:0;
		position: absolute;
		margin-left: 0;
		max-height: 100%; 
		width: 100%;
		bottom: 0;

		-webkit-overflow-scrolling: touch;
		overflow-y: scroll;
		@include breakpoint(large) {
			overflow-y: auto;
		}
		&::-webkit-scrollbar {
     		width: 0;
     		// background: $black;
		}
		&::-webkit-scrollbar-track {
      		background: $black;
		}
		&::-webkit-scrollbar-thumb {
      		background: map-get($foundation-palette,green);
		}
	}
	.message-container {
		padding: 0.5rem;
		flex: 1 0 auto;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		list-style-type:  none;
		.message-photo {
			width: 2rem;
			flex: 0 0 auto;
			margin-right: 0.25rem;
		}
	}
	.message-input-container {
		display: flex;
		align-items: center;
		.button {
			flex: 0 0 auto;
			margin-left: 0.5rem;
			border: none;
		}
		input, .button {
			margin-bottom: 0;
		}
	}
	.chat-menu {
		.button {
			margin: 0;
		}
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		// align-items: flex-start;
		background: $white;
		// border-bottom: $medium-gray;
		color: $dark-gray;
		&.is-online {
			// color: $white;
			.chat-status p {
				position: relative;
				&::before {
					position: absolute;
					content: '';
					width: 10px;
					height: 10px;
					top: 50%;
					transform: translateY(-4px);
					right: 100%;
					background: rgba($success-color, 1);
					margin-right: 0.2rem;
					border-radius: 50%;
				}
			}
		}
	}
	.chat-controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		visibility: hidden;
	}
	.chat-info {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.chat-visitors {
			padding: 0 $global-padding;
			flex: 0 0 auto;
			// color: $medium-gray;
		}
	}
	.title {
		margin: 0;
		font-size: 1.1rem;
		// color: $dark-gray;
		font-weight: $global-weight-bold;
		font-size: 80%;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin: 0 0.5rem;
	}
	.chat-status {
		p {
			margin: 0;
			margin-right: 0.5rem;
		}
		display: flex;
		// flex-direction: column-reverse;
		align-items: center;
		justify-content: flex-end;
		padding: 0.5rem;
		.photo-container {
			max-width: 2rem;
			min-width: 2rem;
			// margin: 0.5rem;
		}
	}

	.visitor-count {
		padding: 0.1rem $global-padding;
		display: flex;
		align-items: center;
		// color: $white;

		p {
			margin: 0;
		}

		i {
			margin-right: 0.25rem;
			font-size: 80%;
		}
		
		.sl-tooltip-text {
			bottom: 120%;
			top: auto;
			left: 50%;
			
			// transform: translateY(5px);
		}
	}
	.message-auto {
		color: $dark-gray;
		font-style:  italic;
	}
}

.stream-chat-container {

	position: relative;
	z-index: $chat-zindex;
	background: rgba(lighten($chat-container-bg-color, 5%), 0.75);//linear-gradient(to right, rgba($chat-container-bg-color, 0.6), rgba($chat-container-bg-color, 0.9));
	// box-shadow: -1px 0 10rem 0 rgba($chat-container-box-shadow-color, 0.35);
	padding: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	width: $chat-width-small;
	border: none;

	.chat-menu {
		flex-direction: column;
	}
	.chat-controls {
		visibility: visible;
	}

	@include breakpoint(large) {
		width: $chat-width-large;
	}
	> ul {
		position: relative;
		// background: rgba($black, 0.5);
		// border-bottom: 1px solid $black;
		box-shadow: 0 0px 3px 0 rgba($black, 0.5);
		z-index: 2;
	}
	transition: right .25s ease-in-out;
	.toggle-button, .toggle-button-small {
		display: block;
		&.show-button {
			margin-top: 1rem;
			position: absolute;
			right: $chat-width-small;
			@include breakpoint(large) {
				right: $chat-width-large;
			}
			top: 0;
			opacity: 1;
			visibility: visible;
			transition: opacity .25s ease-in-out .25s;
			.icon {
				opacity: 1;
			}
		}
		&.hide-button {
			border: none;
		}
	}

	&.show {
		.show-button {
			opacity: 0;
			visibility: hidden;
		}
	}
	@include breakpoint($chat-available-breakpoint) {
		display: flex;
		right: -$chat-width-small;
		@include breakpoint(large) {
			right: -$chat-width-large;
		}
		&.show {
			right: 0;
		}
	}
	.chat-content {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
	.message-input-container {
		padding: 0.5rem;
		padding-top: 0;
	}
	.message-container {
		padding: 0.25rem 0.1rem;
		.message-photo {
			.photo-container {
				border: none;
			}
		}
		.message-text {
			font-size: 90%;
			span {
				// color: $white;
			}
			strong {
				color: $dark-gray;// darken($medium-gray, 5%);
			}
		}
		.message-auto {
			color: $dark-gray;//$medium-gray;
			span {
				font-style: italic;
			}
		}
	}
	@include breakpoint(medium-small down) {
		box-shadow: none;
		display: flex;
		width: 100%;
		right: -100%;
		z-index: $navbar-zindex;
		max-width: 100%;
		// height: 100vh;
		position: fixed;
		// top: $navbar-height;
		// bottom: 0;
		.toggle-button-small {
			&.show-button {
				top: $navbar-height;
				position: absolute;
				right: 100%;
				z-index: 10;
				opacity: 1;
				visibility: visible;
			}
			// position: absolute;
			// right: 0;
			// position: fixed;
			// top: 0;
		}
		.chat-menu {
			// height: $navbar-height;
			// background: rgba($chat-container-bg-color, 0.7);
		}

		// .show-small {
		// 	display: block
		// }
		&.show-small {
			right: 0;
		}
	}
}
