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

.modal .modal-bookmark-create {
	.property {
		margin-top: 5px;

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

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

			width: 150px;
		}

		select, input {
			flex-grow: 1;
			flex-shrink: 1;
		}
	}

	.buttons {
		text-align: right;

		button {
			min-width: 200px;
		}

		margin-bottom: 5px;
	}
}

.modal-body.modal-bookmarks {
	padding: 0!important;

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

	min-width: 30em!important;
	height: 45em;
	width: 80em;

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

		position: relative;
		width: 1.6em;
		margin-left: .5em;
		font-size: .9em;

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

		img {
			height: 1em;
			width: 1em;

			align-self: center;
			font-size: 1.2em;
		}

		.tooltip {
			display: none;
		}
	}

	.input-boxed {
		height: 2em;
	}

	.left {
		min-width: 12em;
		width: 30%;

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

		padding: .5em;
		background-color: #212125;

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

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

			text-align: center;

			font-size: 1.5em;
			color: #557edc;
			text-transform: uppercase;
		}

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

			min-height: 6em;

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

			overflow: auto;
			@include chat-scrollbar-vertical();
			@include chat-scrollbar-horizontal();

			.bookmark, .directory {
				flex-grow: 0;
				flex-shrink: 0;

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

				border-radius: $border_radius_middle;
				padding: .25em .5em;

				cursor: pointer;

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

					align-self: center;
					margin-right: .5em;
				}

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

					min-width: 5em;
					align-self: center;
				}

				&:hover {
					background-color: #2c2d2f;
				}

				&.selected {
					background-color: #1a1a1b;
				}

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

					position: relative;
					width: 1.5em;

					$line_width: 2px;
					$color: hsla(0, 0%, 35%, 1);
					&:not(.hidden) {
						&:before {
							content: "";
							position: absolute;

							height: 2.25em; /* connect with the previous one */
							width: .75em;

							left: .5em; /* icons have a width of 1em */
							bottom: calc(.75em - #{$line_width / 2});

							border-left: $line_width solid $color;
						}

						&.connected {
							&:before {
								border-bottom: $line_width solid $color;

								border-bottom-left-radius: .3em;
							}
						}
					}
				}
			}

			.link-start {
				.link.connected {
					&:before {
						height: 1.25em;
					}
				}
			}

			.directory {
				.name {
					//color: #557edc;
				}
			}
		}

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

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

			padding-top: .5em;

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

				&:not(:first-of-type) {
					margin-left: .5em;
				}
			}
		}
	}

	.right {
		min-width: 25em;
		width: 30%;

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

		background-color: #2f2f35;

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

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

			height: 10em;

			background: url('../../../img/bookmark_background.png'), url('../../img/bookmark_background.png') no-repeat;

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

			padding: .5em;

			.container-name {
				font-size: 2em;
				color: #fcfcfc;
			}

			.container-address {
				font-size: 1.5em;
				color: #fcfcfc;
			}
		}

		.container-settings {
			flex-grow: 1;
			flex-shrink: 1;
			min-height: 10em;

			padding: .5em;

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

			.group {
				padding: .5em;

				border-radius: .2em;
				border: 1px solid #1f2122;

				background-color: #28292b;

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

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

					.key {
						flex-grow: 0;
						flex-shrink: 1;

						width: 15em;
						min-width: 2em;

						align-self: center;

						color: #557edc;

						text-transform: uppercase;

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

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

						min-width: 2em;

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

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

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

				&.info {
					flex-direction: row;
				}

				.container-image {
					flex-grow: 0;
					flex-shrink: 100;

					max-width: 15em;
					max-height: 9em; /* minus one padding */
					width: 15em;

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

					img {
						object-fit: contain;
						max-height: 100%;
						max-width: 100%;
					}

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

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

					min-width: 23em;

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

					height: inherit;

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

						height: 1.8em;

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

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

							color: #557edc;
							text-transform: uppercase;
							align-self: center;

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

							width: 15em;
						}

						.value {
							color: #d6d6d7;
							align-self: center;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

							.server-region {
								> div {
									display: inline-block;
								}

								.country {
									margin-right: .25em;
								}
							}

							.connect-count, .connect-never {
								display: inline-block;

								color: #7a3131;
							}
						}
					}

					.container-network {
						display: flex;
						flex-direction: row;
						justify-content: center;

						.container-button {
							margin-right: 1em;

							flex-shrink: 1;
							min-width: 5em;

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

							button {
								height: 2.5em;
								width: 12em;

								max-width: 100%;

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

						.right {
							flex-grow: 1;
						}
					}
				}
			}
		}

		.buttons {
			padding: .5em;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;

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

				&:not(:first-of-type) {
					margin-left: .5em;
				}
			}
		}
	}
}