.supt-map-infos {
	pointer-events: none;
	will-change: transform;

	&__wrapper {
		@media (min-width: $breakpoint-md) {
			padding-bottom: 35px;
		}
	}

	&__inner {
		position: relative;
		padding: 10px $spacing-8 8px 10px;
		display: flex;
		gap: $spacing-4;
		border-radius: 9999px;
		background: $color-grey-background;
		filter: drop-shadow(8px 8px 16px rgba(38, 38, 38, 0.16))
			drop-shadow(-8px -8px 16px rgba(38, 38, 38, 0.16));
		/* pointer-events: auto; */

		&:hover,
		&:focus-visible {
			.supt-map-infos__icon {
				box-shadow: none;
				&::after {
					opacity: 1;
				}
			}
			.supt-map-infos__link {
				color: $color-main;
			}
		}

		&::after {
			content: '';
			position: absolute;
			top: calc(100% - 3px);
			left: calc(50% - 8px);
			width: 16px;
			height: 12px;
			background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 4.00521e-07L8 12L-4.00521e-07 4.00521e-07H16Z' fill='%23F5F5F5'/%3E%3C/svg%3E%0A");
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center;

			display: none;

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

	&__icon {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 9999px;
		background: $color-grey-background;
		box-shadow:
			inset -1px -1px 0px 0px $color-white,
			inset -2px -2px 2px 0px $color-grey-2,
			-1px -1px 0px 0px $color-white,
			-2px -2px 2px 0px $color-grey-2;
		border: 1px solid transparent;
		transition: box-shadow $transition-fast;

		@media (min-width: $breakpoint-md) {
			width: 42px;
			height: 42px;
		}
		@media (min-width: $breakpoint-lg) {
			width: 44px;
			height: 44px;
		}

		&::after {
			content: '';
			position: absolute;
			inset: -3px 0 0 -3px;
			border-radius: 9999px;
			border: 1.5px solid $color-main;
			opacity: 0;
			transition: opacity $transition-fast;
		}

		svg {
			width: 10px !important;
			height: 10px !important;
			color: $color-main;
			margin: 0 2px 2px 0;
		}
	}

	&__content {
		display: flex;
		flex-direction: column;
	}

	&__title {
		@extend %t-body-s;
		font-weight: 500;
	}
	&__link {
		@extend %t-body-s;
		color: $color-grey-5;
		display: block;
		transition: color $transition-fast;
	}

	&.-no-icon {
		.supt-map-infos__icon {
			display: none;
		}
		.supt-map-infos__inner {
			@mixin clamp min-height, 44px, 62px, $breakpoint-xs, $breakpoint-xl;
			padding: $spacing-3 $spacing-5;

			@media (min-width: $breakpoint-md) {
				padding: 10px $spacing-8 8px;
			}

			&::after {
				display: block !important;
			}
		}
		.supt-map-infos__content {
			flex-direction: row;
			align-items: center;
		}
	}
}