.supt-section-map {
	background-color: $color-grey-background;

	&__row {
		position: relative;
	}

	&__content {
		@media (min-width: $breakpoint-md) {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 1;
		}
	}

	&__title {
		@extend %t-h3;
		color: $color-main;
		margin-bottom: $spacing-6;

		span {
			color: $color-black;
		}
	}

	&__filters {
		display: flex;
		gap: $spacing-2;

		@media (min-width: $breakpoint-md) {
			display: none;
		}
	}

	&__map {
		width: 100%;
		position: relative;
		overflow: hidden;

		@media (min-width: $breakpoint-md) {
			z-index: 1;
		}

		&__inner {
			transform: translate3d(-130%, 0, 0); /* Move to Europe area by default */
			will-change: transform;

			@media (min-width: $breakpoint-md) {
				transform: translate3d(0, 0, 0);
			}
		}

		svg {
			display: block;
			width: 280%;
			height: auto;

			@media (min-width: $breakpoint-md) {
				width: 125%;
				margin-left: -8%;
			}
			@media (min-width: $breakpoint-lg) {
				width: 120%;
				margin-left: -10%;
			}
			@media (min-width: $breakpoint-xl) {
				width: 100%;
				max-width: 1700px;
				margin-left: auto;
				margin-right: auto;
			}
		}

		&__pins {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
		}

		&__country {
			position: absolute;
			inset: 0;
			pointer-events: none;
			outline: none;

			path[data-country] {
				pointer-events: auto;
				cursor: pointer;
				transition: fill 0.3s ease-in-out;
			}

			[data-pin] {
				transition: transform 0.3s ease-in-out;
			}
			[data-pin-halo] {
				transform-box: content-box;
				transform-origin: center;
				transform: scale(0.5);
				transition: transform 0.3s ease-in;
			}

			.supt-map-infos {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 3;

				opacity: 0;
				visibility: hidden;

				display: none;

				@media (min-width: $breakpoint-md) {
					display: block;
					top: -13px;
				}

				&__wrapper {
					transform: translate3d(-50%, -100%, 0);
				}
			}

			&:not(.-hover) {
				path[data-country] {
					fill: $color-main;
				}
			}

			&:hover {
				[data-pin] {
					transform: translateY(-5px);
				}
				[data-pin-halo] {
					transform: translate(0px, 0px) scale(1);
					transition-timing-function: ease-out;
				}
			}

			&.-belgium,
			&.-ireland {
				z-index: 2;
			}
		}
	}

	&__infos-mobile {
		padding-top: 16px;

		opacity: 0;
		visibility: hidden;

		position: sticky;
		bottom: 32px;

		@media (min-width: $breakpoint-md) {
			display: none;
		}
	}
}