.tm-google-map {
	position: relative;

	.map {
		height: 100px;
	}

	.style-signal {
		.animated-dot {
			position: relative;
			width: 20px;
			height: 20px;
			color: $heading-color;
		}

		.middle-dot {
			width: 14px;
			height: 14px;
			border-radius: 50%;
			position: absolute;
			top: 3px;
			left: 3px;
			background: currentColor;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;

			&:after {
				width: 100%;
				height: 100%;
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				content: ' ';
				background: currentColor;
				border-radius: 50%;
				z-index: 100;
				opacity: 0;
				transform-origin: 50% 50%;
			}
		}

		.signal {
			position: absolute;
			left: -40px;
			top: -40px;
			opacity: 0;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			pointer-events: none;
			background: currentColor;
			animation: animationSignal cubic-bezier(0, .55, .55, 1) 2s;
			transform-origin: 50% 50%;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
		}

		.signal-1 {
			animation-delay: .78s;
		}

		.signal-2 {
			animation-delay: 1.1s;
		}
	}
}

.minimog-map-overlay-template {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.minimog-map-overlay-always {
	.minimog-map-overlay-content {
		display: block !important;
	}
}

.minimog-map-overlay-content {
	display: none;
	position: absolute;
	bottom: 100%;
	right: 50%;
	width: 360px;
	transform: translate(150px, 15px);
	padding-bottom: 40px;
	max-width: 90vw;
}

.minimog-map-overlay-info {
	display: flex;
	align-items: center;
	background: #fff;
	padding: 20px;
	box-shadow: 0 30px 50px rgba(0, 0, 0, .21);

	&:before {
		content: '';
		position: absolute;
		bottom: 27px;
		right: 141px;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 13px solid #fff;
	}

	a:hover {
		color: $primary-color;
	}
}

.gmap-marker-wrap {
	padding: 20px;
	font-family: $body-font-family;
	font-weight: $body-font-weight;
	font-size: $body-font-size;
	line-height: $body-line-height;
	color: $text-color;
}

.map-marker-title {
	font-size: 20px;
	margin-bottom: 10px;
}

.map-marker-image {
	flex-shrink: 0;
	margin-right: 20px;
}

.map-marker-content {
	flex-grow: 1;
}

.map-marker-description {
	font-size: 15px;
	font-weight: $body-font-weight;
	line-height: 1.79;
	color: $text-color;

	a {
		color: $heading-color;
	}
}

@keyframes animationSignal {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	1% {
		opacity: .14;
	}

	20% {
		opacity: .14;
	}

	60% {
		transform: scale(1);
		opacity: 0;
	}
}

@include elementor-breakpoint-down(mobile-extra) {
	.minimog-map-overlay-content {
		width: 370px !important;
		transform: translate(50%, 15px);
	}

	.minimog-map-overlay-info {
		&:before {
			right: 50%;
			transform: translate(50%, 0);
		}
	}

	.map-marker-image {
		display: none;
	}
}
