/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/

// Styles for all Location maps
@mixin pp_map_basic($height: 300px) {
	z-index: 0;
	background: #eaeaea;
	background: linear-gradient(to top right, #ece9e6, #fafafa);
	height: $height;
	width: 100%;
	min-height: 200px;
	max-height: 50vh;
	border-radius: 5px;
	.leaflet-bar a,
	.leaflet-bar a:hover {
		color: #000;
		text-decoration: none;
	}
	.leaflet-marker-icon{
		pointer-events: auto !important;
	}
}

// Styles for all Tour maps
@mixin pp_map_floating {
	background: #eaeaea;
	background: linear-gradient(to top right, #ece9e6, #fafafa);
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	z-index: 999;
	position: fixed;
	right: 20px;
	bottom: 20px;
	cursor: pointer;
	transition: all 0.25s ease-in-out;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	outline: none;
	border: 1px solid #fff;
}

// Styles and elements for Location maps with multiple markers
@mixin pp_global_map_content {
	z-index: 0;
	a {
		text-decoration: none;
		border: 0px none transparent !important;
		color: inherit;
	}
	figure {
		margin: 0 0;
		padding: 0 0;
		border-radius: 5px;
	}
	a.map-thumb {
		display: block;
		min-height: 120px;
		width: 100%;
		min-width: 240px;
		background-size: cover;
		background-position: center center;
		border-radius: 11px 11px;
		border: 2px solid #fff;
		background-color: #000;
	}
	.map-title {
		padding: 4px 8px 8px;
		display: inline-block;
		border-radius: 3px;
		font-size: 18px;
		margin: 80px 5px 5px;
		text-shadow: 0 0 2px #000;
		box-shadow: none;
		line-height: 1.2em;
		color: #fff;
	}
	a.map-thumb:hover .map-title,
	a.map-thumb:active .map-title {
		text-decoration: underline;
	}
	.map-caption-pp {
		margin-top: 0.5em;
		font-size: 0.75em;
		color: #777;
	}
	div.map-pp a {
		text-decoration: none;
	}
	.leaflet-popup-content {
		margin: 0 0 0 0;
		font-weight: bold;
		text-align: left;
	}
}

// Plugin option: Archive maps
div#placepress-map_archive_0 {
	@include pp_map_basic(0);
	padding-top: 50%;
	@include pp_global_map_content;
}

// Styled elements for ALL maps
.wp-block-placepress-block-tour-stop,
.wp-block-placepress-block-map-location,
.wp-block-placepress-block-map-global,
.wp-block-placepress-block-map-global-type,
div#floating-tour-map-pp,
div#placepress-map_archive_0 {
	section.leaflet-control-layers-list {
		padding: 0;
		width: auto;
		span {
			font-size: 16px;
			font-weight: normal;
		}
	}
	.leaflet-control-layers-base label {
		text-align: left;
	}
	.leaflet-top {
		max-width: calc(100% - 50px);
	}
	svg#geolocation,
	svg#bounds {
		background: #fff;
		border-radius: 4px;
		padding: 5px;
		box-shadow: 0 0 0px 2px rgba(0, 0, 0, 0.25);
		cursor: pointer;
	}
	svg#geolocation path#outer {
		fill: #777;
	}
	svg#geolocation path#inner,
	svg#bounds path {
		fill: #555;
	}
	svg#geolocation:hover path#inner {
		fill: #4a87ee;
	}
	svg#bounds path {
		transform: scale(2);
	}
	.leaflet-left {
		padding: 2px 2px 0 0;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	.leaflet-control-container .leaflet-top,
	.leaflet-control-container .leaflet-bottom {
		will-change: transform;
	}
}