$theme : "spot-theme";
$base-color : #CCC;
$highlight-color : #FFF;
$background : rgba($base-color, 0.2);
$drag-color : rgba($highlight-color, 0.2);
$axis-color : darken($base-color,20%);
$stroke-color : darken($base-color,40%);
$stroke-width-mouse-focus : 1;
$stroke-width-height-focus: 2;
$stroke-width-axis : 2;

.#{$theme}.leaflet-control.elevation {

	.background {
		//background-color: $background;
		//@include rounded(3px);
		margin: 6px 0 -12px;
	}

	.axis path,
	.axis line {
		fill: none;
		stroke: $axis-color;
		stroke-width: $stroke-width-axis;
	}

	//.mouse-focus-label-y,
	.mouse-focus-label-x {
		text-anchor: middle;
	}
	.mouse-drag{
		fill: $drag-color;
	}

	.elevation-toggle {
		cursor: pointer;
		width: 44px;
		height: 44px;
		color: #CCC;
		text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
	}

	.area {
		fill: $base-color;
		@include drop-shadow(0.6);
	}

	.mouse-focus-line {
		pointer-events: none;
		stroke-width: $stroke-width-mouse-focus;
		stroke: $stroke-color;
	}
}

.#{$theme}.leaflet-control.elevation-collapsed {
	.background {
		display: none;
	}

	.elevation-toggle {
		@extend .control-icon;
		@extend .fa-elevation;
	}
}

.#{$theme}.height-focus{
	stroke: $base-color;
	fill: $base-color;
	@include drop-shadow(0.6);
}

.#{$theme}.height-focus.line{
	pointer-events: none;
	stroke-width: $stroke-width-height-focus;
	@include drop-shadow(0.6);
}

.#{$theme}.height-focus-label{
	text-anchor: middle;
	fill: $base-color;
	@include drop-shadow(0.6);
}

.#{$theme}.height-focus.circle-lower {

}