/* Full-screen state for Mapbox maps. public/js/mapbox-fullscreen.js puts
   .map-fullscreen on the element that went full screen: the map's own
   container, or the wrapper an editor marked with data-map-fullscreen.

   The sizing below repeats what the browser already does for a real
   full-screen element, because it's also the whole layout for the browsers
   with no element fullscreen (iPhone). !important beats the inline height
   each map container carries. */

.map-fullscreen {
	position: fixed !important;
	inset: 0;
	z-index: 100000;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	background: #fff;
}

/* An editor: its form panel beside the map, each scrolling on its own. */
.row.map-fullscreen {
	display: flex;
	flex-wrap: nowrap;
}

.map-fullscreen > .map-fullscreen-panel {
	flex: 0 0 380px;
	max-width: 380px;
	height: 100%;
	padding: 20px;
	overflow-y: auto;
}

.map-fullscreen > .map-fullscreen-stage {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	max-width: none;
	height: 100%;
	padding: 0;
}

.map-fullscreen > .map-fullscreen-stage > :first-child {
	flex: 1 1 auto;
	min-height: 0;
}

.map-fullscreen > .map-fullscreen-stage .mapboxgl-map {
	height: 100% !important;
	border-radius: 0 !important;
}

/* The Features map's "show the layout plan" checkbox, under the map. */
.map-fullscreen > .map-fullscreen-stage > label {
	padding: 0 14px 10px;
}

/* The page's own status banner sits outside the wrapper, so an editor repeats
   it in the panel for full screen. Without it, Save looks like it did nothing. */
.map-fullscreen-status {
	display: none;
}

.map-fullscreen .map-fullscreen-status {
	display: block;
}

/* Too narrow for two columns: the map on top, the form under it. */
@media (max-width: 767px) {
	.row.map-fullscreen {
		flex-direction: column-reverse;
	}

	.map-fullscreen > .map-fullscreen-panel {
		flex: 0 0 45%;
		max-width: none;
		height: auto;
	}

	.map-fullscreen > .map-fullscreen-stage {
		height: auto;
		min-height: 0;
	}
}

/* The window-filling fallback only: stop the page behind it scrolling. */
body.map-fullscreen-window {
	overflow: hidden;
}