@import "mixin";
@import "properties";

//$color_client_normal: #bebebe;
$color_client_normal: #cccccc;
$client_info_avatar_size: 10em;
$bot_thumbnail_width: 16em;
$bot_thumbnail_height: 9em;

html:root {
	--side-info-background: #2e2e2e;
	--side-info-shadow: rgba(0, 0, 0, 0.25);
	--side-info-title: #8b8b8b;

	--side-info-indicator: #dab8b4;
	--side-info-indicator-border: #6a0e0e;
	--side-info-indicator-background: #ca3e22;

	--side-info-value-background: #373737;
	--side-info-value: #5a5a5a;

	--side-info-ping-very-good: #3f7538;
	--side-info-ping-good: #365632;
	--side-info-ping-medium: #777f2c;
	--side-info-ping-poor: #7f5122;
	--side-info-ping-very-poor: #7f2222;

	--side-info-bot-add-song: #3f7538;
}

.container-chat-frame {
	flex-grow: 1;
	flex-shrink: 1;

	display: flex;
	flex-direction: column;
	justify-content: stretch;

	min-height: 200px;

	.container-info {
		user-select: none;

		flex-grow: 0;
		flex-shrink: 0;

		height: 9em;

		display: flex;
		flex-direction: column;
		justify-content: space-evenly;

		background-color: var(--side-info-background);
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;

		-moz-box-shadow: inset 0 0 5px var(--side-info-shadow);
		-webkit-box-shadow: inset 0 0 5px var(--side-info-shadow);
		box-shadow: inset 0 0 5px var(--side-info-shadow);

		.lane {
			padding-right: 10px;
			padding-left: 10px;

			display: flex;
			flex-direction: row;
			justify-content: stretch;

			height: 3.25em;

			.block, .button {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.block {
				flex-shrink: 1;
				flex-grow: 1;

				min-width: 0;

				&.right {
					text-align: right;

					&.mode-client_info {
						max-width: calc(50% - #{$client_info_avatar_size / 2});
						margin-left: calc(#{$client_info_avatar_size / 2});
					}
				}

				&.left {
					margin-right: .5em;
					text-align: left;
					padding-right: 10px;

					&.mode-client_info {
						max-width: calc(50% - #{$client_info_avatar_size / 2});
						margin-right: calc(#{$client_info_avatar_size} / 2);
					}
				}

				.title, .value, .small-value {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;

					min-width: 0;
					max-width: 100%;
				}

				.title {
					display: block;
					color: var(--side-info-title);

					.container-indicator {
						display: inline-flex;
						flex-direction: column;
						justify-content: space-around;

						background: var(--side-info-indicator-background);
						border: 1px solid var(--side-info-indicator-border);
						border-radius: 4px;

						text-align: center;

						vertical-align: text-top;

						color: var(--side-info-indicator);

						font-size: .66em;
						height: 1.3em;
						min-width: .9em;

						padding-right: 2px;
						padding-left: 2px;
					}
				}

				.value {
					color: var(--side-info-value);
					background-color: var(--side-info-value-background);

					display: inline-block;

					border-radius: .18em;
					padding-right: .31em;
					padding-left: .31em;

					> div {
						display: inline-block;
					}

					.icon-container, .icon {
						vertical-align: middle;
						margin-right: .25em;
					}

					&.value-ping {
						//very-good good medium poor very-poor
						&.very-good {
							color: var(--side-info-ping-very-good);
						}
						&.good {
							color: var(--side-info-ping-good);
						}
						&.medium {
							color: var(--side-info-ping-medium);
						}
						&.poor {
							color: var(--side-info-ping-poor);
						}
						&.very-poor {
							color: var(--side-info-ping-very-poor);
						}
					}

					&.chat-counter {
						cursor: pointer;
					}

					&.bot-add-song {
						color: var(--side-info-bot-add-song);
					}
				}

				.small-value {
					display: inline-block;
					color: var(--side-info-value);
					font-size: .66em;
					vertical-align: top;
					margin-top: -.2em;
				}

				.button {
					color: var(--side-info-value);
					background-color: var(--side-info-value-background);

					display: inline-block;

					&:not(.value) {
						border-radius: .18em;
						padding-right: .31em;
						padding-left: .31em;

						margin-top: 1.5em; /* because we've no title */
					}

					cursor: pointer;

					&:hover {
						background-color: #4e4e4e; /* TODO: Evaluate color */
					}
					@include transition(background-color $button_hover_animation_time ease-in-out);
				}
			}

			&:not(.mode-channel_chat) {
				.mode-channel_chat { display: none; }
			}

			&:not(.mode-private_chat) {
				.mode-private_chat { display: none; }
			}

			&:not(.mode-client_info) {
				.mode-client_info { display: none; }
			}

			&:not(.mode-music_bot) {
				.mode-music_bot { display: none; }
			}

			&.mode-music_bot {
				.mode-music_bot {
					&.right {
						margin-left: 8.5em;
					}
					&.left {
						margin-right: 8.5em;
					}

					width: 60em; /* same width  so flex-shrik applies equaly */
				}
			}
		}
	}

	.container-chat {
		width: 100%;

		flex-grow: 1;
		flex-shrink: 1;

		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;

		min-width: 350px;
		min-height: 16em;

		display: flex;
		flex-direction: column;

		.container-client-info {
			position: relative;

			height: 100%;

			flex-grow: 1;
			flex-shrink: 1;

			display: flex;
			flex-direction: column;
			justify-content: stretch;

			padding-right: 5px;
			padding-left: 5px;

			.heading {
				flex-shrink: 0;
				flex-grow: 0;

				display: flex;
				flex-direction: column;
				justify-content: stretch;

				.container-avatar {
					flex-grow: 0;
					flex-shrink: 0;

					position: relative;

					display: inline-block;
					margin: calc(#{$client_info_avatar_size} / -2) .75em .5em .5em;

					align-self: center;

					border-radius: 50%;
					overflow: hidden;

					.avatar {
						overflow: hidden;

						width: $client_info_avatar_size;
						height: $client_info_avatar_size;

						@include transition(opacity $button_hover_animation_time ease-in-out);
					}

					.container-avatar-edit {
						position: absolute;

						display: none;

						left: 0;
						right: 0;
						top: 0;
						bottom: 0;

						z-index: 2;

						text-align: center;

						> img {
							cursor: pointer;

							width: $client_info_avatar_size;
							height: $client_info_avatar_size;

							padding: calc(#{$client_info_avatar_size} / 6);

							overflow: hidden;
							opacity: 0;

							&:hover {
								opacity: 1;
							}
							@include transition(opacity $button_hover_animation_time ease-in-out);
						}
					}

					&.editable {
						.container-avatar-edit {
							display: inline-block;
						}

						.container-avatar-edit:hover + .avatar {
							opacity: .5;
						}
					}
				}

				.client-name {
					display: flex;
					flex-direction: row;
					justify-content: center;

					.htmltag-client {
						text-align: center;
						font-size: 1.5em;
						color: $color_client_normal;
						font-weight: bold;
					}
				}

				.container-description {
					padding-right: calc(#{$client_info_avatar_size} / 2);
					padding-left: calc(#{$client_info_avatar_size} / 2);
					text-align: center;

					display: flex;
					flex-direction: column;
					justify-content: stretch;

					.client-description {
						color: #6f6f6f;

						max-width: 100%;
						flex-shrink: 1;
						flex-grow: 1;
						overflow-wrap: break-word;
					}
				}
			}

			.general-info {
				padding-top: 1em;

				overflow-x: hidden;
				overflow-y: auto;

				@include chat-scrollbar-vertical();

				display: flex;
				flex-direction: row;
				justify-content: stretch;

				flex-grow: 1;
				flex-shrink: 1;

				.block {
					display: inline-block;
					height: 100%;

					flex-grow: 1;
					flex-shrink: 1;

					min-width: 6em;

					&.block-right {
						text-align: right;

						.container-property {
							flex-direction: row-reverse;

							.icon_em, .container-icon {
								margin-left: .2em;
							}

							.value {
								justify-content: flex-end;
							}
						}
					}
					&.block-left {
						text-align: left;

						.container-property {
							.icon_em, .container-icon {
								margin-right: .2em;
							}

							.value {
								justify-content: flex-start;
							}
						}
					}

					.container-property {
						display: flex;
						flex-direction: row;
						justify-content: stretch;

						> .icon_em, > .container-icon {
							margin-top: .1em;
							margin-bottom: .1em;

							font-size: 2em;

							flex-shrink: 0;
							flex-grow: 0;

							width: 1em;
							height: 1em;

							img {
								width: 100%;
								height: 100%;
							}
						}

						&.list {
							> .icon_em {
								margin-top: 0; /* for lists the .1em patting on the top looks odd */
							}
						}

						.property {
							line-height: 1.1em;

							flex-shrink: 1;
							flex-grow: 1;

							min-width: 4em; /* 2em for the icon the last 4 for the text */

							display: flex;
							flex-direction: column;
							justify-content: flex-start;

							.title, .value {
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.title {
								color: #636363;
								font-weight: bold;
								text-transform: uppercase;
							}

							.value {
								color: #d9d9d9;

								display: flex;
								flex-direction: row;

								.country {
									margin-right: .2em;
									align-self: center;
								}

								.group-container {
									display: flex;

									justify-content: flex-start;
									flex-direction: row-reverse;

									.icon-container, .icon_empty, .icon {
										margin-left: .5em;
										align-self: center;

										& > img {
											top: 0;
											left: 0;
											right: 0;
											bottom: 0;
										}
									}
								}

								.status-entry {
									> .icon_em {
										vertical-align: middle;
									}

									.away-message {
										margin-left: .25em;
									}
								}

								&.client-teaforo-account {
									a, a:visited {
										color: #d9d9d9;
									}
								}
							}
						}

						&.list {
							.property {
								.value {
									flex-direction: column;
								}
							}
						}

						&:not(first-of-type) {
							margin-top: 1em;
						}
					}
				}
			}

			.button-close {
				font-size: 4em;

				cursor: pointer;

				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;

				opacity: 0.3;

				width: .5em;
				height: .5em;

				margin-right: .1em;
				margin-top: .1em;

				&:hover {
					opacity: 1;
				}
				@include transition(opacity $button_hover_animation_time ease-in-out);

				&:before, &:after {
					position: absolute;
					left: .25em;
					content: ' ';
					height: .5em;
					width: .05em;
					background-color: #5a5a5a;
				}

				&:before {
					transform: rotate(45deg);
				}

				&:after {
					transform: rotate(-45deg);
				}
			}

			.button-more {
				flex-grow: 0;
				flex-shrink: 0;

				height: 1.5em;
				font-size: 1.25em;

				text-align: center;

				color: #999999;
				cursor: pointer;

				margin-left: -5px;
				margin-right: -5px;

				background-color: #2d2d2d;

				border-bottom-right-radius: 5px;
				border-bottom-left-radius: 5px;

				&:hover {
					background-color: #393939;
				}
				@include transition($button_hover_animation_time ease-in-out);
			}
		}

		.container-music-info {
			position: relative;

			height: 100%;

			flex-grow: 1;
			flex-shrink: 1;

			display: flex;
			flex-direction: column;
			justify-content: stretch;

			padding-right: 5px;
			padding-left: 5px;

			.player {
				flex-shrink: 0;
				flex-grow: 0;

				display: flex;
				flex-direction: column;
				justify-content: stretch;

				.container-thumbnail {
					flex-grow: 0;
					flex-shrink: 0;

					position: relative;

					display: inline-block;
					margin: calc(#{$bot_thumbnail_height} / -2) .75em .5em .5em;

					align-self: center;

					border-radius: .5em;
					overflow: hidden;

					.thumbnail {
						overflow: hidden;

						width: $bot_thumbnail_width;
						height: $bot_thumbnail_height;

						@include transition(opacity $button_hover_animation_time ease-in-out);

						img {
							position: absolute;

							width: 100%;
							height: 100%;
						}
					}
				}

				.container-song-info {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;

					flex-shrink: 1;
					flex-grow: 1;

					margin-left: .5em;
					margin-right: .5em;

					min-width: 1em;

					.song-name {
						font-size: 1.5em;

						min-width: 1em;
						max-width: 100%;

						flex-shrink: 1;
						flex-grow: 0;

						align-self: center;
						color: #999999;

						@include text-dotdotdot();
					}

					.song-description {
						display: none;
					}
				}

				.container-timeline {
					margin-left: .5em;
					margin-right: .5em;

					margin-bottom: .5em;

					.timestamps {
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						color: #999;
						font-size: .75em;
					}

					$timeline_height: .6em;
					.timeline {
						width: 100%;
						position: relative;

						font-size: 0.8em;
						margin-top: 0.1em;
						height: $timeline_height;
						cursor: pointer;
						background-color: #242527;
						border-radius: 0.2em;
						overflow: visible;

						.indicator {
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;

							border-radius: .2em;
						}

						.indicator-buffered {
							background-color: #2f3133;
							width: 30%;
						}

						.indicator-playtime {
							background-color: #4370a2;
							width: 25%;
						}

						$thumb_width: 1.2em;
						$thumb_inner_width: 0.4em;
						.thumb {
							position: absolute;

							height: $thumb_width;
							width: $thumb_width;

							left: -($thumb_width / 2);
							bottom: -$thumb_width / 2 + $timeline_height / 2;

							background-color: #a5a5a5;
							box-shadow: 0 0 0.5em 1px #a5a5a53d;

							display: flex;
							flex-direction: column;
							justify-content: center;

							.dot {
								align-self: center;

								height: $thumb_inner_width;
								width: $thumb_inner_width;


								background-color: #4370a2;
								box-shadow: 0 0 0.1em 1px hsla(212, 41%, 60%, 1);

								border-radius: 50%;
							}
							border-radius: 50%;

							//@include transition(.4s);

							margin-left: 25%;
						}
					}
				}

				.control-buttons {
					display: flex;
					flex-direction: row;
					justify-content: center;

					margin-top: 1em;

					.button {
						width: 2em;
						height: 2em;

						margin-right: .5em;
						margin-left: .5em;

						cursor: pointer;

						svg {
							width: 2em;
							height: 2em;


							fill: #242527;
							@include transition($button_hover_animation_time ease-in-out);
						}

						&:hover {
							svg {
								fill: #0a0a0a;
							}
						}
					}

					.button-play, .button-pause {
						&.hidden {
							display: none;
						}
					}
				}
			}

			.container-playlist {
				flex-grow: 1;
				flex-shrink: 1;

				min-height: calc(3em + 4px);
				position: relative;

				display: flex;
				flex-direction: column;
				justify-content: stretch;

				margin-bottom: 5px;
				margin-top: 1em;

				@include user-select(none);

				.overlay {
					position: absolute;
					z-index: 1;

					top: 0;
					left: 0;
					right: 0;
					bottom: 0;

					background: #2b2b28;

					display: flex;
					flex-direction: column;
					justify-content: center;

					border-radius: 0.2em;
					border: 1px #161616 solid;

					a {
						text-align: center;

						font-size: 1.5em;
						color: hsla(0, 1%, 40%, 1);
					}

					button {
						width: 8em;
						font-size: .8em;
						align-self: center;
						margin-top: .5em;
					}

					&.hidden {
						display: none;
					}
				}

				.playlist {
					flex-grow: 1;
					flex-shrink: 1;
					min-height: 3em;

					cursor: pointer;

					display: flex;
					flex-direction: column;
					justify-content: flex-start;

					overflow-x: hidden;
					overflow-y: auto;

					border: 1px #161616 solid;
					border-radius: 0.2em;
					background-color: rgba(43, 43, 40, 1);

					@include chat-scrollbar-vertical();

					.entry {
						flex-shrink: 0;
						flex-grow: 0;

						display: flex;
						flex-direction: row;
						justify-content: stretch;

						width: 100%;
						overflow: hidden;

						padding: .5em;

						color: #999;
						border-bottom: 1px solid #242527;

						opacity: 0;
						height: 0;

						@include transition(background-color $button_hover_animation_time ease-in-out);

						&:hover {
							background-color: hsla(220, 0%, 20%, 1);
						}

						&.shown {
							opacity: 1;
							height: 3.7em;
						}

						&.animation {
							@include transition(opacity 0.5s ease-in-out, height 0.5s ease-in);
						}

						&.deleted {
							@include transition(opacity 0.5s ease-in-out, height 0.5s ease-in, padding 0.5s ease-in);

							padding: 0;
							opacity: 0;
							height: 0;
						}

						&.reordering {
							z-index: 10000;

							position: fixed;
							cursor: move;

							border: 1px #161616 solid;
							border-radius: 0.2em;
							background-color: #2b2b28;
						}

						.container-thumbnail {
							flex-shrink: 0;
							flex-grow: 0;

							align-self: center;

							height: .9em;
							width: 1.6em;

							font-size: 3em;
							position: relative;

							border-radius: 0.05em;
							overflow: hidden;

							img {
								position: absolute;

								width: 100%;
								height: 100%;
							}
						}

						.container-data {
							margin-left: .5em;

							display: flex;
							flex-direction: column;
							justify-content: center;

							flex-shrink: 1;
							flex-grow: 1;
							min-width: 2em;

							.row {
								display: flex;
								flex-direction: row;
								justify-content: space-between;

								&.second {
									font-size: .8em;
								}

								.name {
									flex-shrink: 1;
									min-width: 1em;

									@include text-dotdotdot();
								}

								.container-delete {
									flex-grow: 0;
									flex-shrink: 0;

									width: 1.5em;
									height: 1em;
									margin-left: .5em;

									opacity: .4;
									@include transition($button_hover_animation_time ease-in-out);

									&:hover {
										opacity: 1;
									}
								}

								.description {
									flex-shrink: 1;
									min-width: 1em;

									@include text-dotdotdot();
								}

								.length {
									flex-grow: 0;
									flex-shrink: 0;

									margin-left: .5em;
								}
							}
						}

						&.current-song {
							background-color: hsla(130, 50%, 30%, .25);

							&:hover {
								background-color: hsla(130, 50%, 50%, .25);
							}

							.container-delete {
								display: none;
							}
						}
					}

					.reorder-indicator {
						$indicator_thickness: .2em;

						height: 0;
						border: none;
						border-top: $indicator_thickness solid hsla(0, 0%, 30%, 1);

						margin-top: $indicator_thickness / -2;
						margin-bottom: $indicator_thickness / -2;
					}
				}
			}

			.button-close {
				font-size: 4em;

				cursor: pointer;

				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;

				opacity: 0.3;

				width: .5em;
				height: .5em;

				margin-right: .1em;
				margin-top: .1em;

				&:hover {
					opacity: 1;
				}
				@include transition(opacity $button_hover_animation_time ease-in-out);

				&:before, &:after {
					position: absolute;
					left: .25em;
					content: ' ';
					height: .5em;
					width: .05em;
					background-color: #5a5a5a;
				}

				&:before {
					transform: rotate(45deg);
				}

				&:after {
					transform: rotate(-45deg);
				}
			}
		}
	}
}