/**
 * Inhaltsverzeichnis
 * 	1. Wrapper
 *		1.1 Container
 * 		1.2 Figure
 * 	2. Pane
 * 	3. Legend
 * 		3.1 Wrapper
 * 		3.2 Entry Group
 * 		3.3 Entries
 * 	4. Toolbar
 * 		4.1 Container
 * 		4.2 Groups
 * 		4.3 Items
 * 	5. Description
 * 	6. Popups
 * 	7. Leaflet Restyle
 * 		7.1 Container
 * 		7.2 Popups
 * 
 */


/* ================================================== */
/* 1. Wrapper */
/* -------------------------------------------------- */
/* #=#=#=#=#=# 1.1 Container #=#=#=#=#=# */
.cvh--map-ctn {
	--bg-overlay-light: rgba(255, 255, 255, 0.2);
	--bg-overlay-dark: rgba(0, 0, 0, 0.2);
	--legend-width: 350px;
	--_legend-width-max: min(var(--legend-width), calc(100vw / 3 * 2));
	--_legend-width-animate: 0px;
	aspect-ratio: var(--desktop-ratio, 16/9);
	width: 100%;
	height: auto;
	max-height: calc(var(--cvh-screen-view-y-init) - (var(--cvh-space-l) * 2));
	position: relative;
	z-index: 20;
	isolation: isolate;
}

@media screen and (orientation: portrait) {
	.cvh--map-ctn {
		aspect-ratio: var(--mobile-ratio, 4/6);
	}
}


/* #=#=#=#=#=# 1.2 Figure #=#=#=#=#=# */
:where(.cvh--map-ctn) figure {
	display: grid;
	grid-template-columns: var(--_legend-width-animate) 1fr;
	grid-template-rows: 1fr auto auto;
	grid-template-areas:	'legend			view'
							'toolbar		toolbar'
							'description	description';
	height: 100%;
	width: 100%;
	transition: var(--cvh-transition-normal);
	transition-property: grid-template-columns, grid-template-areas;
}


/* ================================================== */
/* 2. Pane */
/* -------------------------------------------------- */
:where(.cvh--map-ctn) .cvh--map-pane {
	position: relative;
	z-index: 0;
}

:where(.cvh--map-ctn) .cvh--map-pane-inner {
	height: 100%;
	width: 100%;
}


	/* #==== Layouts ====# */
	/* ~~~ FULL ~~~ */
:where(.cvh--map-ctn[data-layout="full"]) .cvh--map-pane {
	grid-area: view;
}

	/* ~~~ COMPACT ~~~ */
:where(.cvh--map-ctn[data-layout="compact"]) .cvh--map-pane {
	grid-row-start: view;
    grid-row-end: toolbar;
    grid-column-start: legend;
	grid-column-end: view;
}


/* ================================================== */
/* 3. Legend */
/* -------------------------------------------------- */
/* #=#=#=#=#=# 3.1 Wrapper #=#=#=#=#=# */
:where(.cvh--map-ctn) .cvh--map-legend {
	--entry-padding: var(--cvh-space-xs) var(--cvh-space-s);
	grid-area: legend;
	position: relative;
	z-index: 20;
	width: 100%;
	overflow: clip;
	height: 100%;
	min-height: 100%;
	min-width: 0px;
}

:where(.cvh--map-legend) .cvh--map-legend-inner {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: var(--_legend-width-max);
	height: 100%;
	overflow-x: clip;
	overflow-y: auto;
	transition-property: transform;
}

:where(:root[dom_loaded]) :where(.cvh--map-legend) .cvh--map-legend-inner {
	transition: var(--cvh-transition-normal);
}


	/* ~~~ Visiblity ~~~ */
.cvh--map-ctn[data-legend-visibility="visible"] {
	--_legend-width-animate: var(--_legend-width-max);
}

:where(.cvh--map-ctn:not([data-legend-visibility="visible"])) .cvh--map-legend-inner {
	transform: translateX(-100%);
}


/* #=#=#=#=#=# 3.2 Header #=#=#=#=#=# */
.cvh--map-legend-head {
	padding: var(--entry-padding);
	background-color: var(--base-ultra-dark);
	border-bottom: var(--cvh-border-normal) var(--shade-white);
}


/* #=#=#=#=#=# 3.3 Lists #=#=#=#=#=# */
	/* #==== Element ====# */
.cvh--map-legend-list {
	overflow-x: clip;
	overflow-y: auto;
	overscroll-behavior: contain;
}


	/* #==== Scrollbar ====# */
.cvh--map-legend-list::-webkit-scrollbar {
	background-color: var(--bg-overlay-dark);
	width: var(--cvh-space-xs);
}

.cvh--map-legend-list::-webkit-scrollbar-thumb {
	background-color: var(--base);
}

.cvh--map-legend-list::-webkit-scrollbar-thumb:hover {
	background-color: var(--base-light);
}

/* #=#=#=#=#=# 3.2 Entry Group #=#=#=#=#=# */
	/* #==== Container ====# */
.cvh--map-legend-group:where(:not(:last-child)) {
	margin-bottom: var(--cvh-space-xs);
}


	/* #==== Head ====# */
.cvh--map-legend-group-head {
	padding: var(--entry-padding);
	background-color: var(--bg-overlay-dark);
}

.cvh--map-legend-group:where(:not(:first-child)) .cvh--map-legend-group-head {
	border-top: var(--cvh-border-normal) var(--shade-white);
}


	/* #==== Title ====# */
.cvh--map-legend-group-title {
	font-size: var(--h4);
	color: var(--cvh-color-heading-dynamic);
}


/* #=#=#=#=#=# 3.3 Entries #=#=#=#=#=# */
	/* #==== Item ====# */
.cvh--map-legend-entry::before {
	content: unset !important;
}

.cvh--map-legend-entry {
	margin-bottom: 0 !important;
}

.cvh--map-legend-entry-ctn {
	padding: var(--entry-padding);
}


	/* #==== Head ====# */
.cvh--map-legend-entry-head {
	margin-bottom: var(--cvh-space-xs);
}


	/* #==== Controls ====# */
.cvh--map-legend-entry-controls {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--cvh-space-xs);
	font-size: var(--text-s);
}

:where(.cvh--map-legend-entry-controls) .cvh--entry-control {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: auto;
	padding: 5px;
	color: var(--cvh-color-text-light);
	background-color: var(--bg-overlay-dark);
	cursor: pointer;
}

:where(.cvh--map-legend-entry-controls) .cvh--googlemaps-link.cvh--entry-control {
	flex-shrink: 0;
	flex-basis: 100%;
}


/* ================================================== */
/* 4. Toolbar */
/* -------------------------------------------------- */
/* #=#=#=#=#=# 4.1 Container #=#=#=#=#=# */
.cvh--map-toolbar {
	grid-area: toolbar;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--cvh-space-s);
	padding: 5px var(--cvh-space-xs);
}

	/* #==== Layouts ====# */
	/* ~~~ FULL ~~~ */
:where(.cvh--map-ctn[data-layout="full"]) .cvh--map-toolbar  {
	background-color: var(--shade-ultra-light);
}

	/* ~~~ COMPACT ~~~ */
:where(.cvh--map-ctn[data-layout="compact"]) .cvh--map-toolbar {
	font-size: var(--text-s);
}

:where(.cvh--map-ctn[data-layout="compact"] .cvh--map-toolbar) .cvh--toolbar-item-group[data-toolbar-group="copyright"] {
	position: relative;
	z-index: 10;
	font-size: 10px;
}

:where(.cvh--map-ctn[data-layout="compact"] .cvh--map-toolbar) .cvh--toolbar-item-group[data-toolbar-group="copyright"]::before {
	content: '\0A';
	position: absolute;
	inset: calc(5px * -1) calc(var(--cvh-space-xs) * -1);
	background-color: var(--shade-ultra-light);
	opacity: 0.9;
}


/* #=#=#=#=#=# 4.2 Groups #=#=#=#=#=# */
.cvh--toolbar-item-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cvh-space-xs);
}


	/* #==== Copyright ====# */
.cvh--toolbar-item-group:where([data-toolbar-group="copyright"]) {
	font-size: var(--text-xs);
}

.cvh--toolbar-item-group:where([data-toolbar-group="copyright"]) .cvh--toolbar-item:not(:last-child)::after {
	content: '\0A';
	position: absolute;
	top: 0;
	right: calc(var(--cvh-space-xs) / 2 * -1);
	z-index: -5;
	height: 100%;
	width: var(--cvh-border-width);
	background-color: var(--shade-light);
	transform: translateX(50%);
}
	
	
	/* #==== Controls ====# */
.cvh--toolbar-item-group:where([data-toolbar-group="controls"]) {
	flex-direction: row-reverse;
	gap: 5px;
}


/* #=#=#=#=#=# 4.3 Items #=#=#=#=#=# */
.cvh--toolbar-item {
	position: relative;
	z-index: 10;
}


	/* #==== Controls ====# */
.cvh--toolbar-item button {
	line-height: var(--cvh-line-height-m);
}

.cvh--toolbar-item button span[data-element="icon"] {
	min-width: 18px;
	min-height: calc(var(--text-m) + 10px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cvh--toolbar-item button[data-display-label="false"] span[data-element="text"] {
	display: none;
}


/* ================================================== */
/* 5. Description */
/* -------------------------------------------------- */
.cvh--map-description:where([data-visibility="hidden"]) {
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 0;
	z-index: -50;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	overflow: clip;
}

.cvh--map-description:where([data-visibility="visible"]) {
	grid-area: description;
	padding: var(--cvh-space-xs) var(--cvh-space-s);
}


/* ================================================== */
/* 6. Popups */
/* -------------------------------------------------- */
.leaflet-popup-content > div:where(:not(:last-child)) {
	margin-bottom: var(--cvh-space-xs);
}

.leaflet-popup-content .cvh--popup-footer {
	font-size: var(--text-s);
}


/* ================================================== */
/* 7. Leaflet Restyle */
/* -------------------------------------------------- */
/* #=#=#=#=#=# 7.1 Container #=#=#=#=#=# */
.leaflet-container {
	font-family: var(--cvh-font-text);
}


/* #=#=#=#=#=# 7.2 Popups #=#=#=#=#=# */
.leaflet-popup {
	font-size: var(--text-m);
}

.leaflet-popup-content {
	font-size: unset;
	line-height: unset;
}

.leaflet-popup-content p {
	margin: 0;
}