/** @format */

.acf_module--maps {
}

.maps_container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	gap: 1px;
	background-color: var(--color-neutral-grey);
}

.maps_container :is(.menu, .map) {
	background-color: var(--color-white);
}

.maps_container :is(ul, li) {
	display: block;
	padding: 0px;
}

.maps_container .map {
	overflow: hidden;
	position: relative;
	z-index: 1;
	width: max(calc(100% / 1.5), 600px);
	flex-grow: 1;
}

/* Structure menu */
.maps_container .menu {
	display: grid;
	grid: 1fr / 1fr;
	overflow: hidden;
	width: max(calc(100% / 3 - 1px), 300px);
	flex-grow: 1;
}

.maps_container .menu :is(.continent, .countries) {
	grid-area: 1 / 1 / 2 / 2;
	background-color: var(--color-white);
	padding: calc(var(--universal-gap) - 0.48rem) var(--universal-gap);
}

/* Structure menu Kontinente & Länder/Städte */
.maps_container :is(.name, .country) {
	cursor: pointer;
	padding: 0.48rem 0px;
}

.maps_container .country a {
	display: block;
	text-decoration: none;
}

/* Continents menu items */
.maps_container .name_group[data-continent] {
	display: grid;
	grid: 1fr / 1fr auto;
}

.maps_container .name_group[data-continent]::after {
	content: '\e5cc';
	font-family: 'Icons';
	font-size: 1.4em;
	display: inline-block;
	transition: transform 200ms ease;
}

.maps_container .name_group[data-continent]:hover::after {
	transform: translateX(25%);
}

.maps_container .countries {
	display: none;
}
.maps_container .countries.submenu__open {
	display: block;
}

/* Back to RÖDL Weltweit */
.maps_container .countries .separator {
	display: grid;
	grid: 1fr / auto 1fr;
	grid-column: 1 / -1;
	cursor: pointer;
}

.maps_container .countries .separator::before {
	content: '\e5cb';
	font-family: 'Icons';
	font-size: 1.4em;
	display: inline-block;
	transition: transform 200ms ease;
}

.maps_container .countries .separator:hover::before {
	transform: translateX(-25%);
}

/* Seperator */
.maps_container .separator {
	padding: 1.5rem 0px;
	font-weight: bold;
}

/* Menu Open Overflow */
.maps_container .countries {
	transform: translateX(100%);
	transition: transform 200ms ease;
}

.maps_container .countries .country_item_container {
	width: 100%;
	column-width: 150px;
}

.maps_container .countries .name {
	grid-column: 1 / -1;
}

.maps_container .countries.submenu__open {
	transform: translateX(0%);
}

/* Hover bold */
.maps_container .name[data-continent]:hover {
	color: var(--color-roedl-green);
}

/* Hover color */
.maps_container .countryhover {
	color: var(--color-roedl-green);
	fill: var(--color-roedl-green);
	cursor: pointer;
}

/* SVG transition */
.maps_container .map_scale {
	transform: scale(clamp(1, var(--path-scale, 1), 40));
	transform-origin: top left;
	transition: transform 1000ms ease;
}

.maps_container .svg_translate {
	transform: translate(calc(0px - var(--path-left, 0px)), calc(0px - var(--path-top, 0px)));
	transform-origin: top left;
	transition: transform 1000ms ease;
}

/* Special for Germany: only show the locations of Germany when the submenu menu is open */
.maps_container .map [id='Deutschland'] [data-map-country] {
	opacity: 0;
}

.maps_container[style*='--path-scale']:has(.submenu__open[data-continent='Deutschland']) .map [id='Deutschland'] [data-map-country] {
	opacity: 1;
}

/* Special for Duplicates: Countries that have --2 */
.maps_container .map [id$='--2'] {
	pointer-events: none;
}

/* Special for Continent Hover */
.maps_container .continent .name.continenthover {
	color: var(--color-roedl-green);
}

/* Special for Pointer */
.maps_container:not(:has(.submenu__open)) [data-map-country] {
	cursor: pointer;
}