//Feed width
$block-spacing: 1rem;
$panel-width: 30%;
$panel-width-max: "400px + 3 * #{$block-spacing}";

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

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

#projects {
	
	&.with-feed {
		#submap {
			width: calc(100% - #{$panel-width});
			min-width: calc(100% - #{$panel-width-max});
		}
	
		.leaflet-right {
			width: calc(#{$panel-width});
			max-width: calc(#{$panel-width-max});
		}
	
		#feed {
			z-index: 999;
			transition: none;
		}
	
		#post-button {
			.fa {
				@extend .fa-next;
			}
		}
	}
	&:not(.with-feed) {
		#feed #posts {
			right: -100%;
		}
	}
	&.with-settings {
		#submap {
			width: calc(100% - #{$panel-width});
			min-width: calc(100% - #{$panel-width-max});
		}
	
		.leaflet-left {
			width: calc(#{$panel-width});
			max-width: calc(#{$panel-width-max});
		}
	
		#settings {
			z-index: 999;
			transition: none;
		}
	
		#settings-button {
			.fa {
				@extend .fa-prev;
			}
		}
	}
	&:not(.with-settings) {
		#settings #settings-sections {
			left: -100%;
		}
	}
	&.with-feed.with-settings {
		#submap {
			width: calc(100% - #{$panel-width} * 2);
			min-width: calc(100% - #{$panel-width-max} * 2);
		}
	}

	#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%;
		
		.track_tooltip {
			p {
				margin: 0;
				
				&.name {
					font-weight: bold;
					font-size: 1.2em;
				}
				&.description {
					font-style: italic;
				}
				&.detail {
					margin-top: 1em;
					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: 3px;
		border: none;
		margin: $block-spacing;
		
		&+ .leaflet-control {
			margin-top: 0;
		}
	
		&.leaflet-control-scale {
			padding: 0.5em;
				
			.leaflet-control-scale-line {
				background: none;
			}
		}
	}

	/* Pull right/left controls by $panel-width */
	.leaflet-right, .leaflet-left {
		transition: all 0.5s;
		width: 0;
		max-width: 0;		
	}
	.leaflet-right .leaflet-control {
		left: -100%;
	}
	.leaflet-left .leaflet-control {
		right: -100%;
	}

	/* Hide default layer control */
	.leaflet-top.leaflet-left .leaflet-control-layers {
		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;
			}
		}
	}

	#post-button, #settings-button {
		cursor: pointer;
		text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
		width: 44px;
		text-align: center;
		
		&:hover .fa {
			color: white;			
		}
		
		.fa {
			color: #CCC;
			@extend .control-icon;
		}
	}
	#post-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: all 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;
		width: calc(#{$panel-width});
		max-width: calc(#{$panel-width-max});
		z-index: -1;
		transition-property: z-index;
		transition-duration: 0.1s;
		transition-delay: 0.5s;
		overflow: hidden;
		
		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 {
		right: 0;
	
		#posts {
			position: absolute;
			transition: all 0.5s;
			top: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			
			#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;
				}
			}
		
			.post {
				margin-bottom: $block-spacing;
				background: $post-bg;
				color: $post-color;
				border-radius: 3px;
				width: calc(100% - #{$block-spacing});
				box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
				
				&:first-child {
					margin-top: $block-spacing;
				}
				
				.message {
					margin: 0.3em 0 0 0;
				}
				.signature {
					margin: 0.5em 0 0 0;
					text-align: right;
					font-style: italic;
				}
				.header {
					font-style: italic;
					font-size: 0.8em;
					padding: 0.5em 1em;

					span {
						display: inline-block;
						width: 50%;
						cursor: default;
					
						&.index {
							font-style: normal;
						}
						
						&.time {
							text-align: right;
						}
					}
				}
				.body {
					clear: both;
					padding: 0em 1em 0.5em;
				}
				&.headerless {
					.header {
						display: none;
					}
					.body {
						padding-top: 0.5em;
					}
				}
				&.media {
					background: $media-bg;
					color: $media-color;
					
					a {
						display: inline-block;
						width: 100%;
						line-height: 0;
						margin: 0;
					
						&.drill {
							font-size: 3em;
							
							.fa-drill-picture {
								color: transparent;
							}
							.fa-drill-video {
								color: rgba(255, 255, 255, 0.5);
							}
						
							&:hover {
								.fa-drill-picture, .fa-drill-video {
									color: rgba($media-bg, 0.75);
								}
							}
						}
					
						img {
							width: 100%;
							image-orientation: from-image;
							outline: none;
							border-radius: 3px;
						}
					}
					p {
						margin: 0;
						text-align: justify;
					}
				}
				&.message {
					background: $message-bg;
					color: $message-color;
					
					p {
						font-size: 0.9em;
						margin: 0.5em 0;
					}
				
					a {
						color: $message-color;
					}
				
					a.drill {
						.drill-icon {
							transform: translate(-16px, -32px);
							
							.fa-message-in {
								top: 0;
								left: -1px;
							}
						}
					
						&:hover {
							.fa-message {
								@extend .#{$fa-css-prefix}-drill-message;
								top: 16px;
							}
							.fa-message-in {
								display: none;
							}
						}
					}
				
					.staticmap {
						width: 100%;
						border-radius: 3px;
						cursor: pointer;
					}
				}
				&.loading {
					.body {
						text-align: center;
						
						p {
							display: inline-block;
							font-size: 2em;
							color: $post-color;
						}
					}
				}
			}
		}
	}
	#settings {
		left: 0;
		
		#settings-sections {
			width: calc(100% - 3rem);
			margin: 1rem;
			padding: 1rem;
			background: white;
			border-radius: 3px;
			box-shadow: 2px 2px 3px 0px rgba(0,0,0,.5);
			position: absolute;
			transition: all 0.5s;
			top: 0;
			bottom: 0;
			left: 0;
			color: $post-color;
			background: rgba(255, 255, 255, 0.8);
				
			.settings-section {
				display: inline-block;
				width: 100%;
				margin-top: 1.5rem;
				
				h1 {
					margin: 0 0 1rem;
				}
			
				label {
					margin-bottom: .3em;
					display: block;
					cursor: pointer;
				}
				
				&.title {
					margin: -1rem -1rem 0 -1rem;
					width: calc(100% + 2rem);
					text-align: center;
					
					.logo {
						background: rgba(255, 255, 255, .4);
						padding: 1.5rem;
						border-radius: 3px 3px 0 0;
						
						img {
							width: calc(100% - 3rem);
							max-width: 180px;
							transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
						}
					}
				}
				
				&.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;
						}
					}
				}
			}
		}
	}

	/* Info Window */

	.leaflet-popup-content {
		.info-window {
			h1 {
				font-size: 1.2em;
				margin: 1em 0 1.2em;
				
				i {
					margin-right: 0.3125em;
				}
			}
			
			p {
				font-size: 1.0em;
				margin: 0.5em 0 0 0;
				
				i {
					padding-right: 0.5em;
				}
			
				a {
					color: $post-color;
				}
			}
	
			.medias {
				margin-top: -0.5rem;
				line-height: 0;
				
				a {
					display: inline-block;
					
					margin-right: 1rem;
					margin-top: 1rem;
					&:last-child {
						margin-right: 0;
					}
		
					&.drill {
						font-size: 2em;
	
						.fa-drill-picture {
							color: transparent;
						}
						.fa-drill-video {
							color: rgba(255, 255, 255, 0.5);
						}
	
						&:hover {
							.fa-drill-video, .fa-drill-picture {
								color: rgba(255, 255, 255, 0.75);
							}
						}
					}
					
					img {
						max-width: 200px;
						max-height: 100px;
						border-radius: 3px;
						image-orientation: from-image;
						transition: All 0.2s;
					}
				}
			}
		}
	}
}

#elems {
	display: none;
}