$gm-loader-delay-animation: .2s;
$color: #4be061;

.gm-loader-init {
  color: var(--logo-color);
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10000;
	width: 112px;
	height: 64px;
	opacity: 1;
	transition: visibility $gm-loader-delay-animation, opacity $gm-loader-delay-animation;

	&--hide {
		visibility: hidden;
		opacity: 0;
		transition: visibility $gm-loader-delay-animation, opacity $gm-loader-delay-animation;
		animation: none;
	}

	&__pretzel {
		stroke-dasharray: 340% 340%;
		stroke-dashoffset: -340%;
		animation: gm-animation 8s infinite ease;
	}
}

@keyframes gm-animation {
	0% {
		stroke-dashoffset: -340%;
	}
	50% {
		stroke-dashoffset: 680%;
	}
	100% {
		stroke-dashoffset: -340%;
	}
}