// ============================================================================
// :: MAP
// ============================================================================
.o-map {
	position: relative;

	height: 100vh;

	@include respond-at($screen-small-base) {
		height: 80rem;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.o-map__results {
	z-index: $z-index-base;

	display: flex;
	flex-direction: column;

	height: 50vh;
	overflow-x: visible;
	overflow-y: hidden;
	margin-top: -2rem;
	padding-top: 4rem;

	background-color: $background-color-white;
	box-shadow: $box-shadow-overlay;

	@include respond-at($screen-small-base) {
		height: 100%;
		margin-top: 0;
	}

	@include respond-at($screen-1x-large) {
		height: 100%;
		padding-top: 4rem;
	}
}

.o-map__filter {
	position: absolute;
	top: -2rem;

	z-index: $z-index-base + 1;

	min-width: 20rem;

	border: none;

	@include respond-at($screen-small-base) {
		left: auto;
		right: 2rem;
	}

	@include respond-at($screen-1x-large) {
		right: calc((160rem - 144rem) / 2);
	}
}

.o-map__results-container {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.o-map__results-info {

	width: 100%;
	padding-left: 2rem;

	color: $text-color-grey;

	@include respond-at($screen-1x-large) {
		margin-left: calc((160rem - 144rem) / 2);
		padding-left: 0;
	}
}

.o-map__loader {
	padding-top: 4rem;
}

.o-map__results__list {
	position: relative;

	width: 100%;

	height: 100%;
	overflow-x: visible;
	overflow-y: scroll;
	padding-bottom: 4rem;
	padding-left: 0;

	@include respond-at($screen-1x-large) {
		padding-left: calc((160rem - 144rem) / 2);
	}

	.m-map-result {
		position: relative;

		padding-right: 2rem;
		padding-left: 2rem;

		@include respond-at($screen-1x-large) {
			padding-left: 0;
		}

		&::before {
			content: "";

			position: absolute;
			top: 0;
			left: 0;

			display: block;
			width: calc((160rem - 144rem) / 2);
			height: 100%;

			transform: translateX(-100%);

			transition: background-color 0.2s ease-in-out;
		}

		&:hover::before {
			background-color: $background-color-grey-extra-light;
		}
	}
}

.o-map__results__header {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	padding-left: 2rem;

	border-bottom: $border-light;

	@include respond-at($screen-1x-large) {
		margin-left: calc((160rem - 144rem) / 2);
		padding-left: 0;
	}
}

.o-map__map {
	position: relative;

	order: -1;
	height: 50vh;
	overflow: hidden;

	@include respond-at($screen-small-base) {
		order: 2;
		height: 100%;
	}

	img {
		height: 100%;
	}
}

.o-map__actions {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	z-index: $z-index-base + 1;

	display: flex;
	flex-direction: column;

	.a-button {
		margin-bottom: 1rem;

		background-color: $background-color-white;
		box-shadow: $box-shadow;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

.o-map__scan {
	position: absolute;
	left: 2rem;

	bottom: 2rem;
	z-index: $z-index-base + 1;
}