//
// Voyager destination maps
// --------------------------------------------------


// Variables
// --------------------------------------------------

@blue : #0000cc;

@mapContainerHeight : 582px;
@mapContainerWidth  : 980px;

@mapBgColor : mix(lighten(@brandColor, 40), @gray-light, 50);
@mapGray    : #697374;

@markerColor         : @brandColor;
@markerAllianceColor : darken(@blue, 20);

@zindexMapMkrs : 50;
@zindexMapMkr  : auto;


// Scaffolding
// --------------------------------------------------

.mapContainer {
	position         : relative;
	width            : 980px;
	height           : 580px;
	top              : -2px;
	margin           : 0 auto;
	background-color : mix(@blue, @gray-lighter, 10);
	z-index          : 1;
}
.map {
	width               : 980px;
	height              : 580px;
	background-repeat   : no-repeat;
	background-position : top left;
}

// Marker editor
// --------------------------------
.markerEditor {
	position : relative;
	width    : 940px;
	height   : 30px;
	margin   : 0 auto;
	padding  : 15px 20px;
	z-index  : 2;
	#gradient > .vertical(darken(@gray-lighter, 2), darken(@gray-lighter, 6));

	// Delete Btn
	.btn.delete {
		padding-left  : 7px;
		padding-right : 7px;
	}
}
.markerEditor .form-inline {
	margin-bottom : 0;
}
.markerEditor .btn.pull-right {
	margin-top : -29px;
}
.markerEditor .form-inline .control-label,
.markerEditor .form-inline .btn-toolbar {
	display : inline-block;
	margin  : 0;
}
.markerEditor .form-inline .control-label {
	position      : relative;
	top           : 4px;
	padding-right : 6px;
	font-weight   : bold;
	text-shadow   : 0 1px 0 #fff;
}
.mapEditor .mkrForm .btn.close {
	position      : relative;
	float         : none;
	display       : inline-block;
	padding-right : 3px;
	padding-left  : 3px;
	font-size     : 16px;
	text-shadow   : 0 1px 0 #fff;
	.opacity(60);
	.transition(opacity .2s linear);

	&:hover { .opacity(100) }
}

// Show hide correct form based on 'editing' state
.mapEditor .mkrForm {
	display : none;
}
.mapEditor .destForm {
	display : block;
}
.mapEditor.editing .mkrForm {
	display : block;
}
.mapEditor.editing .destForm {
	display : none;
}

.mapSelectForm {
	position : relative;
	width    : 640px;
	margin   : 0 auto;
}

// Map markers
// --------------------------------------------------

// Mixins
// --------------------------------
// Marker base mixin
.marker ( 
	@color       : @markerColor,
	@altColor    : #fff,
	@radius      : 6px,
	@radiusInner : 4px
) {

	display : block;
	.square(0);
	.border(@radius, solid, @color, @radius);
	.box-shadow(2px 2px 4px fade(#000, 20));

	&:after {
		.square(0);
		content      : "";
		display      : block;
		position     : absolute;
		margin       : 0 0 0 @radiusInner * -1;
		top          : @radius - 2px;
		left         : 50%;
		border-width : @radiusInner;
	}
	.markerInner {
		.square(@radiusInner);
		position : relative;
		display  : block;
		top      : -(@radiusInner / 2);
		left     : -(@radiusInner / 2);
		background-color : @altColor;
		.border-radius((@radiusInner / 2));
	}

	// Hover
	&:hover {
		border-color : lighten(@color, 5);
		z-index      : 100;
	}
}
// Marker color (change the color)
.markerColor (
	@color    : @gray,
	@altColor : #fff
) {

	border-color : @color;

	&:after {
		border-color : @color transparent transparent;
	}
	.markerInner {
		background-color : @altColor;
	}

	// Hover
	&:hover {
		border-color : lighten(@color, 10);
	}
}
// Marker size (change the size)
.markerSize (
	@radius      : 8px,
	@radiusInner : 6px
) {

	border-width : @radius;
	.border-radius(@radius);

	&:after {
		margin       : 0 0 0 @radiusInner * -1;
		top          : @radius - 2px;
		border-width : @radiusInner;
	}

	.markerInner {
		.square(@radiusInner);
		top  : -(@radiusInner / 2);
		left : -(@radiusInner / 2);
		.border-radius((@radiusInner / 2));
	}
}

// Base styles
// --------------------------------
// Markers container
.mkrs {
	position : absolute;
	margin   : 0;
	padding  : 0;
	top      : 0;
	right    : 0;
	bottom   : 0;
	left     : 0;
	z-index  : @zindexMapMkrs;
}
.mkr {
	display  : block;
	position : absolute;
	cursor   : pointer;
	.marker();
	.transition(all .2s linear);
	// Popover goes here if added back
}
.mkr:focus { outline : none }
// Marker colors
.mkr.eef1 {} // Default handles this
.mkr.eef1.thc {
	.markerColor(@markerColor, @markerAllianceColor)
}
.mkr.thc {
	.markerColor(@markerAllianceColor, #fff)
}

@media screen and (min-width: 1024px) {
	.mkr {
		.markerSize(8px, 6px);
	}
}
// Markers container
.marker .markerContent { display : none }

.mapEditor.editing .mkr {
	 cursor : default;
	.opacity(25);
}
.mapEditor.editing .mkr.editing {
	cursor : pointer;
	.opacity(100);
	.transition(none);
}