@import "../../../assets/scss/variables";

#guide-helper {
	z-index: 50;
	cursor: pointer;
	position: fixed;
	bottom: 0;
	right: 0;

	& .instructions {
		display: flex;
		flex-direction: column;
		align-items: start;
		width: 400px;
		position: absolute;
		opacity: 0;
		bottom: -325px;
		right: -375px;
		transition: all 0.5s;
		padding: 85px 14px;
		& .helperImg {
			width: 300px;
			height: 200px;
		}
		& .helperbutton {
			width: 186px;
			height: 37px;

			border: none;
			border-radius: 3px;
			background-color: white;
			a {
				color: $main-color;
				background-color: white;
				font-size: 14px;
				&:hover {
					text-decoration: underline;
					text-underline-offset: 6px;
				}
			}
		}
		& .helperTip {
			font-size: $subtext-size;
			letter-spacing: 0.32px;
			color: white;
			font-weight: $extra-light;
			margin-bottom: 13px;
		}
	}

	&.open .instructions {
		& {
			opacity: 1;

			top: 150px;
			right: 40px;
		}
	}

	& .quote {
		pointer-events: none;
		position: absolute;
		bottom: 90px;
		right: 68px;
		width: 151px;
		height: 84px;
		padding: 9px 0 0 19px;
		opacity: 1;
		transition: all 0.8s 0.3s;

		& p {
			font-size: $info-size;
			line-height: 1.5;
			color: white;
		}
	}

	&.open .quote {
		transition: all 0.5s;
		opacity: 0;
	}

	& .icon {
		position: absolute;
		bottom: 25px;
		right: 30px;
		pointer-events: none;
		transition: all 0.5s;
		width: 43px;
		height: 42px;
		transform-origin: center 80%;
		animation-delay: 2s;
		animation-duration: 0.5s;
		animation-name: pop;
		animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);

	}

	&.open .icon {
		bottom: 330px;
		right: 430px;
		width: 66px;
		height: 65px;
	}

	&.closed .icon {
	}

	svg {
		transition: all 0.5s;

		& g {
			transition: all 0.5s;
		}

		& circle {
			transition: all 0.5s;
		}
	}
}

@keyframes pop {
	50% {
		transform: scale(1.2);
	}
}

@keyframes pop-in {
	0% {
		opacity: 0.8;
		transform: scale(0.5, 0.5);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

@keyframes hello {
	0% {
		transform: rotate(0deg);
	}
	10% {
		transform: rotate(-10deg);
	}
	20% {
		transform: rotate(10deg);
	}
	30% {
		transform: rotate(0);
	}
}