@import url("/assets/maplibre-gl/6.13.0/maplibre-gl.css") layer(components);

@layer custom {
	.shop-map {
		--map-land: light-dark(var(--bs-gray-050), var(--bs-gray-950));
		--map-building: light-dark(var(--bs-gray-100), var(--bs-gray-900));
		--map-road: light-dark(var(--bs-white), var(--bs-gray-800));
		--map-rail: light-dark(var(--bs-gray-300), var(--bs-gray-700));
		--map-water: light-dark(#c9d7e1, #0d1519);
		--map-green: light-dark(#dbe7da, #18221b);
		--map-green-text: light-dark(#436544, #7fa382);
		--map-text: var(--bs-fg-2);
		--map-text-muted: light-dark(var(--bs-gray-600), var(--bs-gray-400));
		--map-water-text: light-dark(#3f5b70, #6f8c9f);

		position: relative;
		height: 100%;
		min-height: 22rem;
		max-height: calc(100dvh - var(--bs-spacer-12));
		background-color: var(--map-land);
		border-radius: var(--bs-radius-7);
		overflow: hidden;
	}

	@media (width >= 1024px) {
		.shop-map {
			position: sticky;
			inset-block-start: var(--bs-spacer-7);
		}
	}

	.shop-map__canvas {
		position: absolute;
		inset: 0;
		font: inherit;
	}

	.shop-map__zoom {
		position: absolute;
		inset-block-start: var(--bs-spacer-4);
		inset-inline-end: var(--bs-spacer-4);
		z-index: 3;
		display: grid;
		gap: var(--bs-spacer-1);
		--bs-theme-bg: var(--bs-bg-body);
		--bs-theme-contrast: var(--bs-fg-body);
	}

	.shop-map__marker {
		padding-block-end: .47rem;
	}

	.shop-map__pin {
		display: grid;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		color: var(--bs-primary-contrast);
		font-size: 1.125rem;
		background-color: var(--bs-primary-bg);
		border-radius: 50% 50% 50% 0;
		outline: 3px solid var(--map-land);
		rotate: -45deg;
	}

	.shop-map__pin span {
		display: grid;
		rotate: 45deg;
	}

	.shop-map__credit {
		position: absolute;
		inset-block-end: 0;
		inset-inline-end: 0;
		z-index: 3;
		margin: 0;
		padding: 0 var(--bs-spacer-3);
		color: var(--bs-fg-2);
		font-size: .6875rem;
		line-height: 1.6;
		white-space: nowrap;
		background-color: color-mix(in oklch, var(--map-land) 80%, transparent);
		border-start-start-radius: var(--bs-radius-3);
	}

	.shop-map__credit a {
		color: inherit;
	}

	@media (width < 400px) {
		.shop-map__credit a:first-child {
			display: none;
		}
	}

	.shop-map .maplibregl-cooperative-gesture-screen {
		padding-block-end: 9rem;
		background-color: color-mix(in oklch, var(--bs-black) 65%, transparent);
		font-size: var(--bs-font-size-md);
		font-weight: var(--bs-font-weight-medium);
		text-align: center;
	}
}