//Feed width
$elem-spacing: 0.5rem;
$block-spacing: 1rem;
$block-radius: 3px;
$block-shadow: 3px;
$panel-width: 30vw;
$panel-width-max: "400px + 3 * #{$block-spacing}";
$button-width: 44px;

//Feed colors
$post-input-bg: 		#ffffff;					//#d9deff;
$post-color: 			#333;						//#323268;
$post-color-hover: 		darken($post-color, 10%);
$post-bg: 				rgba(255,255,255,.8);		//#B4BDFF;
$message-color:			#326526;
$message-color-hover:	darken($message-color, 10%);
$message-bg: 			#6DFF58;
$media-color:			#333; 						//#635C28;
$media-bg:				rgba(255,255,255,.8);		//#F3EC9F;

//Settings colors
$title-color: $post-color;
$subtitle-color: #999;

//Legend colors
$track-main-color: #00ff78;
$track-off-track-color: #0000ff;
$track-hitchhiking-color: #FF7814;
$legend-color: $post-color;

#projects {

	/* Panels movements */
	&.with-feed {
		#submap {
			width: calc(100% - #{$panel-width});
			min-width: calc(100% - #{$panel-width-max});
		}

		#feed {
			right: 0;
		}

		.leaflet-right {
			right: min(#{$panel-width}, #{$panel-width-max});
		}

		#feed-button {
			.fa {
				@extend .fa-next;
			}
		}

		#title {
			max-width: calc(100vw - max(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
		}
	}

	&.with-settings {
		#submap {
			width: calc(100% - #{$panel-width});
			min-width: calc(100% - #{$panel-width-max});
		}

		#settings {
			left: 0;
		}

		.leaflet-left {
			left: min(#{$panel-width}, #{$panel-width-max});
		}

		#settings-button {
			.fa {
				@extend .fa-prev;
			}
		}

		#title {
			max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
		}
	}

	&.with-feed.with-settings {
		#submap {
			width: calc(100% - #{$panel-width} * 2);
			min-width: calc(100% - #{$panel-width-max} * 2);
		}

		#title {
			max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) * 2 - (#{$button-width} + #{$block-spacing} * 2) * 2);
		}
	}

	#background {
		background: #666;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}

	#submap {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;

		.loader {
			position: absolute;
			font-size: 3em;
			top: calc(50% - 0.5em);
			left: calc(50% - 0.66666em);
			color: #CCC;
		}
	}

	#map {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;

		/* Leaflet Popup */
		.leaflet-popup-content {

			h1 {
				font-size: 1.4em;
				margin: 0;
				font-weight: bold;
			}

			.separator {
				border-top: 1px solid #CCC;
				margin: $elem-spacing 0 $block-spacing 0;
			}

			/* Marker Popup */
			.info-window {
				h1 .message-type {
					color: #CCC;
					font-weight: normal;
					font-size: calc(1em / 1.4);
					margin-left: 0.5em;
					vertical-align: text-bottom;
				}

				p {
					font-size: 1.0em;
					margin: $elem-spacing 0 0 0;

					a {
						color: $post-color;
					}
				}

				.medias {
					line-height: 0;

					a {
						display: inline-block;

						margin: $block-spacing $block-spacing 0 0;
						&:last-child {
							margin-right: 0;
						}

						&.drill {
							font-size: 2em;

							.fa-drill-image {
								color: transparent;
							}
							.fa-drill-video {
								color: rgba(255, 255, 255, 0.5);
							}

							&:hover {
								.fa-drill-video, .fa-drill-image {
									color: rgba(255, 255, 255, 0.75);
								}
							}
						}

						img {
							max-width: 200px;
							max-height: 100px;
							border-radius: $block-radius;
							image-orientation: from-image;
							transition: All 0.2s;
						}
					}
				}
			}

			/* Track Popup */
			.track_tooltip {
				p {
					margin: 0;

					&.description {
						font-size: 1.15em;
					}
				}

				h1, .description {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				.body {
					padding-left: calc(1.25em*1.4 + #{$elem-spacing} );
					
					.details {
						margin-top: -$block-spacing;

						p.detail {
							margin-top: $block-spacing;
							width: 50%;
							display: inline-block;
						}
					}
				}
			}
		}
	}

	/* Leaflet patches */
	.leaflet-control {
		background-color: rgba(255, 255, 255, 0.6);
		font-family: Roboto, Arial, sans-serif;
		border-radius: $block-radius;
		border: none;
		margin: $block-spacing;
		box-shadow: 0 1px 7px rgba(0, 0, 0, .4);

		&+ .leaflet-control:not(.leaflet-control-inline) {
			margin-top: 0;
		}
		&+ .leaflet-control.leaflet-control-inline {
			margin-left: 0;
		}

		&.leaflet-control-scale {
			padding: 0.5em;

			.leaflet-control-scale-line {
				background: none;
			}
		}

		&.leaflet-control-inline {
			clear: none;
		}
	}

	/* Pull right/left controls by $panel-width */
	.leaflet-right, .leaflet-left {
		transition: left 0.5s, right 0.5s;
	}

	/* Hide default layer control */
	.leaflet-top.leaflet-left .leaflet-control-layers .leaflet-control-layers-toggle {
		display: none;
	}

	#legend {
		.track {
			white-space: nowrap;
			.line {
				width: 2em;
				height: 4px;
				display: inline-block;
				border-radius: 2px;
				vertical-align: middle;

				&.main {
					background-color: $track-main-color;
				}
				&.off-track {
					background-color: $track-off-track-color;
				}
				&.hitchhiking {
					background-color: $track-hitchhiking-color;
				}
			}

			.desc {
				font-size: 1em;
				margin-left: 0.5em;
				color: $legend-color;
			}
		}
	}

	#title {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		line-height: $button-width;
		height: $button-width;
		padding: 0 $block-spacing;
		margin-bottom: 0;

		span#project_name {
			font-size: 1.3em;
		}
	}

	#feed-button .fa {
		@extend .fa-post;
	}
	#settings-button .fa {
		@extend .fa-menu;
	}

	/* Drill & Map icons */

	a.drill {
		position: relative;
		overflow: hidden;
		text-decoration: none;
		display: inline-block;

		.drill-icon {
			position: absolute;
			display: inline-block;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);

			i {
				transition: color 0.3s;
				cursor: pointer;
			}
		}
	}

	.fa-stack {
		.fa-message {
			font-size: 32px;
			text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
			color: $message-bg;
		}
		.fa-message-in {
		    font-size: 13px;
		    color: $message-color;
		    top: 1px;
		}
		.fa-track-start, .fa-track-end {
			color: $message-color;
			font-size: 14px;
			top: 1px;
		}
		.fa-track-end {
			color: $track-hitchhiking-color;
		}
	}

	/* Feed/Settings Panel */

	#feed, #settings {
		position: absolute;
		top: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 999;

		input, textarea {
			background-color: $post-input-bg;
			color: $post-color;
		}

		button {
			background-color: $post-color;
			color: $post-bg;

			&:hover {
				background-color: $post-input-bg;
				color: $post-color;
			}
		}

		#feed-panel, #settings-panel {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
		}
	}
	#feed {
		right: calc(min(#{$panel-width}, #{$panel-width-max}) * -1);
		transition: right 0.5s;
		width: #{$panel-width};
		max-width: calc(#{$panel-width-max});

		#feed-panel {
			width: 100%;
			padding-top: $block-spacing;
			
			#posts_list {
				position: relative;
			}

			#poster {
				&.histo-mode .poster, &:not(.histo-mode) .archived {
					display: none;
				}

				.poster {
					textarea#post {
						margin-bottom: 1em;
						width: calc(100% - 2em);
					}

					input#name {
						width: calc(100% - 6em);
					}

					button#submit {
						margin-left: 1em;
						margin-bottom: 0.5em;
					}
				}

				.archived {
					background: #EEE;
				}
			}

			.body-box {
				position:relative;
				display: flex;
				flex-direction: column;
			}

			.post-item {
				margin-bottom: $block-spacing;
				background: $post-bg;
				color: $post-color;
				border-radius: $block-radius;
				width: calc(100% - #{$block-spacing});
				box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);

				a {
					color: $post-color;
					&:hover {
						color: $post-color-hover;
					}
				}

				.message {
					margin: 0;
				}
				.signature {
					margin: $elem-spacing 0 0 0;
					text-align: right;
					font-style: italic;

					img {
						vertical-align: baseline;
						margin: 0 0.2em calc((1em - 24px)/2) 0;
						position: relative;
					}
				}
				.header {
					padding: 0 $block-spacing;
					line-height: 1em;
					position: relative;

					span {
						display: inline-block;
						cursor: default;
						font-size: 0.8em;
						text-overflow: ellipsis;
						overflow: visible;
						white-space: nowrap;
						padding: $elem-spacing 0px;

						&.index {
							width: 25%;

							.link, .link:visited, .link_copied {
								margin-left: $elem-spacing;
								padding: 0;
								line-height: 1;
							}
						}

						&.time {
							width: 75%;
							text-align: right;
							font-style: italic;
						}
					}
				}
				.body {
					clear: both;
					padding: 0em $block-spacing $block-spacing;
				}

				&.headerless {
					.header {
						display: none;
					}
					.body {
						padding-top: $block-spacing;
						text-align: center;

						p {
							margin: 0;
							
							.fa {
								display: inline-block;
								font-size: 2em;
								margin: $elem-spacing 0;
							}
						}
					}
				}

				&.message {
					background: $message-bg;
					color: $message-color;

					p {
						font-size: 0.9em;
						margin: 0 0 $elem-spacing 0;
						display: inline-block;
						width: 100%;
					}

					a {
						color: $message-color;
						&:hover {
							color: $message-color-hover;
						}
					}

					a.drill {
						line-height: 0;

						.drill-icon {
							transform: translate(-16px, -32px);

							.fa-message-in {
								top: -1px;
								left: -1px;
							}
						}

						&:hover {
							.fa-message {
								@extend .#{$fa-css-prefix}-drill-message;
								top: 13px;
								left: 3px;
							}
							.fa-message-in {
								display: none;
							}
						}
					}

					.weather {
						position: absolute;
						top: $block-spacing;
						right: $block-spacing;
						cursor: pointer;
						
						.fa {
							font-size: 1.3em;
							vertical-align: middle;
							line-height: 1rem;
							background: $message-color;
							color: $message-bg;
							border-radius: $block-radius 0 0 $block-radius;
							padding: $elem-spacing;
						}

						span {
							vertical-align: middle;
							padding: $elem-spacing;
							background: $message-bg;
							color: $message-color;
							border-radius: 0 $block-radius $block-radius 0;
						}
					}

					.staticmap {
						width: 100%;
						border-radius: $block-radius;
						cursor: pointer;
					}
				}

				&.post {
					.body {
						padding: 0em 1em 0.5em;
					}
				}

				&.media {
					background: $media-bg;
					color: $media-color;

					.body {
						a {
							display: inline-block;
							width: 100%;
							margin: 0;
							color: $media-color;
							position: relative;
							line-height: 0;

							&.drill {
								&:hover {
									.drill-icon .fa-drill-image, .drill-icon .fa-drill-video {
										color: rgba($media-bg, 0.75);
									}
									.comment {
										opacity: 0;
									}
								}

								.drill-icon {
									font-size: 3em;

									.fa-drill-image {
										color: transparent;
									}
									.fa-drill-video {
										color: rgba(255, 255, 255, 0.5);
									}
								}
							}

							img {
								width: 100%;
								image-orientation: from-image;
								outline: none;
								border-radius: $block-radius;
							}

							.comment {
								position: absolute;
								left: 0;
								bottom: 0;
								width: 100%;
								line-height: normal;
								box-sizing: border-box;
								margin: 0;
								padding: 0.5em;
								text-align: justify;
								background: rgba(255, 255, 255, 0.6);
								border-radius: 0 0 $block-radius $block-radius;
								transition: opacity 0.3s;
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}
	#settings {
		left: calc(min(#{$panel-width} + #{$block-shadow}, #{$panel-width-max} + #{$block-shadow}) * -1);
		transition: left 0.5s;
		width: calc(#{$panel-width} + #{$block-shadow}); //Add box-shadow
		max-width: calc(#{$panel-width-max} + #{$block-shadow}); //Add box-shadow

		#settings-panel {
			width: calc(100% - #{$block-spacing} - #{$block-shadow}); //Remove box-shadow
			margin: $block-spacing;
			border-radius: $block-radius;
			box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
			color: $post-color;
			background: rgba(255, 255, 255, 0.8);
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;

			.settings-header {
				text-align: center;
				flex: 0 1 auto;

				.logo {
					background: rgba(255, 255, 255, .4);
					padding: 2rem 1rem;
					border-radius: $block-radius $block-radius 0 0;

					img {
						width: 100%;
						max-width: 180px;
						transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
					}
				}

				#last_update {
					position: absolute;
					margin-top: -2em;
					padding: 0 1rem;
					width: calc(100% - 2rem);

					p {
						text-align: center;
						font-size: 0.8em;
						margin: 0;
						color: $subtitle-color;
						cursor: pointer;
						transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right

						span {
							margin-right: 0.5em;
							img {
								width: 12px;
								vertical-align: middle;
								animation: spotlogo 20s infinite;
							}
						}

						abbr {
							text-decoration: none;
							vertical-align: middle;
						}
					}
				}
			}

			.settings-footer {
				flex: 0 1 auto;
				background: rgba(255, 255, 255, .4);
				border-radius: 0 0 3px 3px;
				font-size: 0.7em;
				padding: 0.3rem;
				text-align: center;
				color: #888;

				a {
					color: #777;
					text-decoration: none;
				}
			}

			.settings-sections {
				flex: 1 1 auto;
				overflow: auto;

				#settings-sections-scrollbox {
					height: 100%;
					width: 100%;
				}

				.settings-section {
					display: inline-block;
					margin: 1.5rem 1rem 0 1rem;
					width: calc(100% - 2 * #{$block-spacing});

					&:last-child {
						margin-bottom: 1.5rem;
					}

					h1 {
						margin: 0 0 $block-spacing;
						color: $title-color;
					}

					label {
						margin-bottom: .3em;
						display: block;
						cursor: pointer;
					}

					&.newsletter {
						input#email {
							width: calc(100% - 6em);

							&:disabled {
								color: #999;
								background: rgba(255,255,255,0.2);
							}
						}
						button#nl_btn {
							margin-left: 1em;
							margin-bottom: 1em;

							&.subscribe .fa {
								@extend .fa-send;
							}
							&.unsubscribe .fa {
								@extend .fa-unsubscribe;
							}
							&.loading {
								background-color: $message-color;
								color: white;
								span {
									@extend .flicker;
								}
							}
						}
					}

					#settings-projects {
						a.fa-download {
							color: $legend-color;

							&:hover {
								color: #0078A8;
							}
						}
					}
				}
			}
		}
	}
}

#elems {
	display: none;
}