.ef-map {
	--ef-map-control-size: 40px;
	background: var(--ef-color-gray_light);
}

.ef-map .maplibregl-canvas {
	outline: none;
}

.ef-map .maplibregl-canvas:focus-visible {
	outline: var(--ef-border-default) solid var(--ef-color-primary);
	outline-offset: calc(-1 * var(--ef-border-default));
}

.ef-map .maplibregl-ctrl-top-right,
.ef-map .maplibregl-ctrl-top-left {
	margin: 0;
}

.ef-map .maplibregl-ctrl-top-right {
	top: var(--ef-space-s);
	right: var(--ef-space-s);
}

.ef-map .maplibregl-ctrl-top-left {
	top: var(--ef-space-s);
	left: var(--ef-space-s);
}

.ef-map .maplibregl-ctrl-group {
	overflow: hidden;
	border: var(--ef-border-default) solid color-mix(in srgb, var(--ef-color-text_muted) 24%, transparent);
	border-radius: var(--ef-radius-m);
	background: var(--ef-color-white);
	box-shadow: var(--ef-shadow-panel);
}

.ef-map .maplibregl-ctrl-group button {
	width: var(--ef-map-control-size);
	height: var(--ef-map-control-size);
	background-color: var(--ef-color-white);
	transition: var(--ef-motion-hover);
}

.ef-map .maplibregl-ctrl-group button:hover {
	background-color: var(--ef-color-primary_light);
}

.ef-map .maplibregl-ctrl-group button:focus-visible {
	position: relative;
	z-index: 1;
	outline: var(--ef-border-default) solid var(--ef-color-primary);
	outline-offset: calc(-1 * var(--ef-border-default));
}

.ef-map .maplibregl-ctrl-group button + button {
	border-top-color: color-mix(in srgb, var(--ef-color-text_muted) 18%, transparent);
}

.ef-map .maplibregl-ctrl-icon {
	opacity: 0.82;
}

.ef-map .maplibregl-ctrl-attrib {
	right: var(--ef-space-2xs);
	bottom: var(--ef-space-2xs);
	margin: 0;
	border-radius: var(--ef-radius-s);
	background: color-mix(in srgb, var(--ef-color-white) 92%, transparent);
	color: var(--ef-color-text_muted);
	font: inherit;
	font-size: var(--ef-font-micro);
	font-weight: var(--ef-font-weight-medium);
	line-height: 1.35;
	box-shadow: none;
	backdrop-filter: none;
}

.ef-map .maplibregl-ctrl-attrib.maplibregl-compact-show {
	max-width: none;
	padding: var(--ef-space-2xs) var(--ef-space-xs);
	border: var(--ef-border-default) solid color-mix(in srgb, var(--ef-color-text_muted) 18%, transparent);
	border-radius: var(--ef-radius-m);
	box-shadow: var(--ef-shadow-panel);
}

.ef-map .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
	display: none;
}

.ef-map .maplibregl-ctrl-attrib-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 var(--ef-space-2xs);
}

.ef-map .maplibregl-ctrl-attrib a {
	color: var(--ef-color-text);
	text-underline-offset: 2px;
}

.ef-map .maplibregl-ctrl-attrib-button {
	background-color: color-mix(in srgb, var(--ef-color-white) 92%, transparent);
}

.ef-map .maplibregl-ctrl-attrib-button:focus-visible {
	outline: var(--ef-border-default) solid var(--ef-color-primary);
	outline-offset: 1px;
}

.ef-map-pin-card {
	position: fixed;
	z-index: var(--ef-z-sticky);
	inline-size: min(24rem, calc(100vw - (var(--ef-space-m) * 2)));
	max-block-size: min(36rem, calc(100vh - (var(--ef-space-m) * 2)));
	overflow: auto;
	overscroll-behavior: contain;
	border: var(--ef-border-default) solid color-mix(in srgb, var(--ef-color-text_muted) 18%, transparent);
	border-radius: var(--ef-radius-l);
	background: var(--ef-color-white);
	color: var(--ef-color-text);
	box-shadow: var(--ef-shadow-panel);
}

.ef-map-pin-card-flyout {
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(calc(var(--ef-space-2xs) * -1));
	transition:
		opacity var(--ef-motion-default) var(--ef-ease-out),
		transform var(--ef-motion-default) var(--ef-ease-out),
		visibility var(--ef-motion-default) var(--ef-ease-out);
}

.ef-map-pin-card-flyout.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.ef-map-pin-card-close {
	position: sticky;
	top: var(--ef-space-xs);
	z-index: 1;
	display: grid;
	place-items: center;
	float: inline-end;
	inline-size: var(--ef-size-touch-target);
	block-size: var(--ef-size-touch-target);
	margin: var(--ef-space-xs);
	border: 0;
	border-radius: var(--ef-radius-m);
	background: color-mix(in srgb, var(--ef-color-white) 92%, var(--ef-color-gray_light));
	color: var(--ef-color-text);
	font: inherit;
	cursor: pointer;
}

.ef-map-pin-card-close:hover {
	background: var(--ef-color-primary_light);
}

.ef-map-pin-card-close:focus-visible {
	outline: var(--ef-border-default) solid var(--ef-color-primary);
	outline-offset: 2px;
}

.ef-map-pin-card-content {
	min-block-size: var(--ef-space-xl);
}

.ef-map-pin-card-sheet {
	inset: auto 0 0;
	inline-size: 100%;
	max-inline-size: none;
	max-block-size: min(78vh, 42rem);
	margin: 0;
	padding-block-end: max(var(--ef-space-m), env(safe-area-inset-bottom));
	border-inline: 0;
	border-block-end: 0;
	border-radius: var(--ef-radius-l) var(--ef-radius-l) 0 0;
}

.ef-map-pin-card-sheet::backdrop {
	background: color-mix(in srgb, var(--ef-color-text) 34%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.ef-map-pin-card-flyout {
		transform: none;
		transition: opacity var(--ef-motion-default), visibility var(--ef-motion-default);
	}
}

@media (max-width: 767px) {
	.ef-map.ef-map {
		--ef-map-control-size: var(--ef-size-touch-target);
	}

	.ef-map.ef-map .maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in,
	.ef-map.ef-map .maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out {
		width: var(--ef-map-control-size);
		height: var(--ef-map-control-size);
	}
}