// Shake animation for wrong key input
.shake {
	animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	backface-visibility: hidden;
	perspective: 1000px;
	transform: translate3d(0, 0, 0);
}

@keyframes shake {
	10%,
	90% {
		transform: translate3d(-1px, 0, 0);
	}
	20%,
	80% {
		transform: translate3d(2px, 0, 0);
	}
	30%,
	50%,
	70% {
		transform: translate3d(-4px, 0, 0);
	}
	40%,
	60% {
		transform: translate3d(4px, 0, 0);
	}
}

// Key label fade in
.fade-in {
	animation: fade-in 10s linear both;
}

@keyframes fade-in {
	0% {
		color: rgba(255, 255, 255, 0);
	}
	15% {
		color: rgba(255, 255, 255, 0);
	}
	100% {
		color: rgba(255, 255, 255, 1);
	}
}

// Building icon transition

.slide {
	&-enter {
		opacity: 0;
		transform: translateX(0%) !important;
	}

	&-enter-active {
		opacity: 1;
		transform: translateX(-50%) !important;
	}
	&-exit {
		opacity: 1;
		transform: translateX(-50%) !important;
	}
	&-exit-active {
		opacity: 0;
		transform: translateX(-150%) !important;
	}
	&-enter-active,
	&-exit-active {
		transition: opacity 0.3s, transform 0.3s;
	}
}

.fade {
	&-enter {
		opacity: 0;
	}

	&-enter-active {
		opacity: 1;
	}
	&-exit {
		opacity: 1;
	}
	&-exit-active {
		opacity: 0;
	}
	&-enter-active,
	&-exit-active {
		transition: opacity 0.3s;
	}
}
