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

.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: #2e2e2e;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;

		-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);

		.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: #8b8b8b;

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

						background: #ca3e22;
						border: 1px solid #6a0e0e;
						border-radius: 4px;

						text-align: center;

						vertical-align: text-top;

						color: #dab8b4;

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

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

				.value {
					color: #5a5a5a;
					background-color: #373737;

					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: #3f7538;
						}
						&.good {
							color: #365632;
						}
						&.medium {
							color: #777f2c;
						}
						&.poor {
							color: #7f5122;
						}
						&.very-poor {
							color: #7f2222;
						}
					}

					&.chat-counter {
						cursor: pointer;
					}

					&.bot-add-song {
						color: #3f7538;
					}
				}

				.small-value {
					display: inline-block;
					color: #5a5a5a;
					font-size: .66em;
					vertical-align: top;
					margin-top: -.2em;
				}

				.button {
					color: #5a5a5a;
					background-color: #373737;

					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-private-conversations {
			height: 100%;

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

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

			.conversation-list {
				margin-right: -2px; /* the fix for the seperator with of 3px */
				user-select: none;

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

				@include chat-scrollbar-vertical();

				width: 25%;
				min-width: 100px;

				position: relative;

				.no-chats {
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: center;

					> div {
						display: inline-block;
						color: #5a5a5a;
					}
				}

				.conversation-entry {
					position: relative;

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

					cursor: pointer;
					border-bottom: 1px solid #313132;

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

						position: relative;

						display: inline-block;
						margin: 5px 10px 5px 5px;

						.avatar {
							overflow: hidden;

							width: 2em;
							height: 2em;

							border-radius: 50%;
						}

						.chat-unread {
							display: none;

							position: absolute;
							top: 0;
							right: 0;
							background-color: #a81414;
							width: 7px;
							height: 7px;

							border-radius: 50%;

							-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.20);
							-moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.20);
							box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.20);
						}
					}

					&.unread {
						.chat-unread {
							display: block;
						}
					}

					.info {
						flex-grow: 1;
						flex-shrink: 1;
						min-width: 50px;

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

						> * {
							flex-grow: 0;
							flex-shrink: 0;

							display: inline-block;
							width: 100%;

							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.client-name {
							color: $color_client_normal;
							font-weight: bold;

							margin-bottom: -.4em;
						}

						.client-version {
							max-width: 100%;

							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.last-message {
							color: #555353;

							display: inline-block;
							font-size: .66em;
						}
					}

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

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

						opacity: 0.3;

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

						&: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);
						}
					}

					&:hover {
						background-color: #393939;
					}

					&.selected {
						background-color: #2c2c2c;
					}
					@include transition(background-color $button_hover_animation_time ease-in-out);
				}
			}

			.conversation {
				min-width: 250px;
				width: 75%;

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

				.spacer {
					min-height: 0;
					flex-grow: 1;
					flex-shrink: 1;
				}

				.container-messages {
					@include user-select(none);

					display: block;
					&[data-simplebar] {
						display: flex;
					}

					position: relative;

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

					min-height: 100px;

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

					.message-entry {
						display: flex;
						flex-direction: row;
						justify-content: stretch;

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

							position: relative;

							display: inline-block;
							margin: .5em 1em .5em .5em;

							.avatar {
								overflow: hidden;

								width: 2.5em;
								height: 2.5em;

								border-radius: 50%;
							}
						}

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

							min-width: 2em;

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

							-webkit-user-select: text;
							-moz-user-select: text;
							-ms-user-select: text;
							user-select: text;

							.info {
								display: block;

								white-space : nowrap;
								overflow : hidden;
								text-overflow: ellipsis;

								margin-top: .5em;

								.client-name, .client-name .htmltag-client {
									display: inline;

									font-weight: bold;
									color: $color_client_normal;
								}

								.timestamp {
									display: inline;

									font-size: 0.66em;
									color: #5d5b5b;
								}
							}

							.message {
								color: #b5b5b5;
								line-height: 1.1em;
								word-wrap: break-word;
							}
						}
					}

					.spacer-entry {
						text-align: center;
						//padding: .5em 1em;
						color: #565353;

						&.type-disconnect_self {
							color: #565353; /* not really critical at all */
						}

						&.type-new {
							color: darkred; /* TODO: Evaluate color */
						}

						&.type-disconnect {
							color: red; /* TODO: Evaluate color */
						}

						&.type-reconnect {
							color: green; /* TODO: Evaluate color */
						}

						&.type-closed {
							color: yellow; /* TODO: Evaluate color */
						}

						&.type-date {
							color: #565353;
							background-color: #353535;

							z-index: 2; /* over the avatar */
							position: sticky;
							top: 0;
						}
					}

					@include chat-scrollbar();
				}

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

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

					min-height: 2em;

					.container-typing {
						font-size: .85em;
						padding-left: .6em;
						line-height: 1;
						color: hsla(0, 0%, 30%, 1);

						opacity: 1;

						&.hidden {
							opacity: 0;
						}

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

			.container-seperator {
				z-index: 100;
				height: unset!important;
				width: 3px;
				background-color: transparent;
				border-right: 1px solid #292a2c;
			}
		}

		.container-chatbox {
			@include user-select(none);

			flex-grow: 1;
			flex-shrink: 0;
			min-height: calc(1.5em + 10px);
			height: auto; /* fallback */
			height: min-content;

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

			width: 100%;
			padding: 5px;

			.container-emojis {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;

				margin-right: 5px;

				.button-emoji {
					border-radius: 5px;
					padding: 2px;

					cursor: pointer;

					display: flex;
					flex-direction: row;
					justify-content: space-around;

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

					.container-icon {
						position: absolute;
						display: flex;

						width: calc(1.5em - 4px);
						height: calc(1.5em - 4px);

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

					.lsx-emojipicker-appender {
						position: relative;

						width: calc(1.5em - 4px);
						height: calc(1.5em - 4px);

						.lsx-emojipicker-container {
							&:after {
								right: calc(0.75em + 2px) !important
							}

							.lsx-emojipicker-tabs {
								height: 38px;

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

								li {
									height: 36px;
									width: 36px;

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

									img {
										margin: 0;
									}
								}
							}
						}
					}
				}
			}

			.container-input {
				display: flex;
				flex-direction: column;
				justify-content: stretch;
				min-height: 1.5em;

				width: 100%;
				background-color: #464646;
				border: 2px none #353535; /* background color (like no border) */

				padding: 0 5px;

				overflow: hidden;
				border-radius: 5px;

				.textarea {
					@include user-select(text);

					width: 100%;
					resize: none;

					min-height: 1.5em;
					max-height: 6em;
					height: 1.5em;

					overflow: auto;

					background-color: transparent;
					padding: 0;
					margin: 0;
					border: none;
					outline: none;

					color: #a9a9a9;

					@include chat-scrollbar-vertical();

				}

				@include placeholder(textarea) {
					color: #363535;
					font-style: oblique;
				}

				&:hover {
					margin: -2px;
					border: 2px solid #474747;
				}

				&:focus-within {
					margin: -2px;
					border: 2px solid #585858;
				}

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

		.container-channel-chat {
			width: 100%;

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

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

			/* 1.5em + 10px := chatbox; 2em chat */
			min-height: calc(1.5em + 10px + 2em);

			> .spacer {
				min-height: 0;
				flex-grow: 1;
				flex-shrink: 1;
			}

			> .container-chat {
				@include user-select(none);

				padding: 5px;

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

				position: relative;
				overflow: hidden;

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

				width: 100%;
				min-height: 2em;

				.container-channel-chat-messages {
					flex-grow: 1;
					flex-shrink: 1;

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

					min-height: 2em;
				}

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

					display: block;
					&[data-simplebar] {
						display: flex;
					}

					position: relative;

					overflow-y: auto;
					overflow-x: hidden;
					@include chat-scrollbar();

					min-height: 2em;

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

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

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

							position: relative;

							display: inline-block;
							margin: 1em 1em .5em .5em;

							.avatar {
								overflow: hidden;

								width: 2.5em;
								height: 2.5em;

								border-radius: 50%;
							}
						}

						.container-message {
							flex-grow: 0;
							flex-shrink: 1;

							min-width: 2em;

							position: relative;

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

							@include user-select(text);

							background: #303030;
							border-radius: 6px 6px 6px 6px;

							margin-top: .5em;
							padding: .5em;

							.info {
								display: block;

								white-space : nowrap;
								overflow : hidden;
								text-overflow: ellipsis;

								.client-name, .client-name .htmltag-client {
									display: inline;

									font-weight: bold;
									color: $color_client_normal;
								}

								.timestamp {
									display: inline;

									font-size: 0.66em;
									color: #5d5b5b;
								}

								.button-delete {
									width: 1.1em;
									cursor: pointer;

									display: inline-block;
									align-self: auto;

									opacity: .25;

									> img {
										vertical-align: text-top;
									}

									&:hover {
										opacity: 1;
									}

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

							.message {
								color: #b5b5b5;
								line-height: 1.1em;

								word-wrap: break-word;

								.htmltag-client, .htmltag-channel {
									display: inline;

									font-weight: bold;
									color: $color_client_normal;
								}
							}

							&:before {
								position: absolute;

								content: ' ';

								width: 1em;
								height: 1em;

								margin-left: calc(-.5em - 1em);
								border-top: .5em solid transparent;
								border-right: .75em solid #303030;
								border-bottom: .5em solid transparent;

								top: 1.25em;
							}
						}
					}

					.spacer-entry {
						text-align: center;
						//padding: .5em 1em;
						color: #565353;

						&.type-new {
							color: darkred; /* TODO: Evaluate color */
						}

						&.type-old {
							opacity: 0;
							cursor: pointer;
							pointer-events: none;

							height: 0;
							@include transition(opacity .25s ease-in-out);
							&.shown {
								height: unset;

								cursor: pointer;
								pointer-events: all;

								opacity: 1;
								@include transition(opacity .25s ease-in-out);
							}
						}
					}

				}

				.new-message {
					flex-grow: 0;
					flex-shrink: 0;

					position: absolute;
					bottom: 0;
					right: 0;
					left: 0;

					display: block;
					text-align: center;

					width: 100%;
					color: #8b8b8b;

					background: #353535; /* if we dont support gradients */
					background: linear-gradient(rgba(53, 53, 53, 0) 10%, #353535 70%);
					pointer-events: none;

					opacity: 0;
					@include transition(opacity .25s ease-in-out);
					&.shown {
						cursor: pointer;
						pointer-events: all;

						opacity: 1;
						@include transition(opacity .25s ease-in-out);
					}
				}

				.no-permissions, .private-conversation, .not-supported {
					flex-grow: 0;
					flex-shrink: 0;

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

					text-align: center;

					width: 100%;
					color: #5a5a5a;
					background: #353535;


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

					> div {
						display: inline-block;
					}
				}
			}

			> .container-chatbox {
				flex-grow: 0;
				flex-shrink: 0;

				min-height: 2em;
			}
		}

		.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-private-conversations, .container-channel-chat {
			.container-message .emoji {
				height: 1.1em;
				width: 1.1em;

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

				vertical-align: text-bottom;
			}
		}

		.container-format-helper {
			flex-shrink: 0;
			flex-grow: 0;

			min-height: unset;
			height: initial;

			color: #555555;
			font-size: .8em;
			text-align: right;
			margin: -3px 2px 2px 2.5em;

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

			max-height: 2em; /* for a smooth transition */
			&.hidden {
				max-height: 0;
			}
		}

		/* special xbbcode formats */
		.container-message .message {
			hr {
				border: none;
				border-top: .125em solid #555;

				margin-top: .1em;
				margin-bottom: .1em;
			}

			table {
				th, td {
					border-color: #1e2025;
				}

				tr {
					background-color: #303036;
				}

				tr:nth-child(2n) {
					background-color: #25252a;
				}
			}

			.xbbcode-tag-img {
				padding: .25em;
				border-radius: .25em;

				overflow: hidden;
				max-width: 20em;
				max-height: 20em;

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

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