@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-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-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);
				}
			}
		}
	}
}