$cell-map-height: calc(100vh - 265px) !default;
$cell-map-mobile-height: calc(100vh - 108px) !default;
$roadwork-width: 400px !default;

.page-template-roadworks-map {
	#main-content {
		min-height: auto;
	}
	#main-content, #columns-wrapper {
		padding: 0;
		overflow: hidden;
		position: relative;
	}
	div.combo-cell-map.leaflet-container {
		height: $cell-map-height;
	}
	@media ($max-mobile-viewport) {
		footer {
			display: none;
		}
		div.combo-cell-map.leaflet-container {
			height: $cell-map-mobile-height;
		}
		&.has-pwa-navigation div.combo-cell-map.leaflet-container {
			height: calc(#{$cell-map-mobile-height} - 64px);
		}
	}
	div.cell {
		margin-bottom: 0;
	}
	div.config-json-cell {
		border: none;
	}
}

.chantier {
	position: absolute;
	border: $cell-border;
	background: $cell-background;
	right: 0;
	top: 0;
	z-index: 100000;
	height: calc(#{$cell-map-height} + 2px);
	overflow-x: hidden;
	overflow-y: scroll;
	width: $roadwork-width;
	transform: translateX($roadwork-width);
	transition: transform linear 250ms;
	padding: 1em;
	h3 {
		@extend %title;
		padding: 0;
		margin-bottom: 0.5em;
	}
	p {
		margin: 0.5em 0;
		&.chantier--localisations {
			font-size: 105%;
			@media ($max-mobile-viewport) {
				font-size: 100%;
			}
		}
	}
	.chantier--dates {
		font-size: 80%;
	}
	.chantier--libelle {
		display: block;
		color: #333;
	}
	&.shown {
		transform: translateX(0vw);
	}
	@media ($max-mobile-viewport) {
		top: unset;
		right: unset;
		bottom: 0;
		width: 100vw;
		height: 250px;
		max-height: calc(100vh - 180px);
		transform: translateY(250px);
		&.shown {
			transform: translateY(0px);
		}
	}
}
