@import "../sass-commons/variables";
@import "../sass-commons/font";
@import "../sass-commons/base";
@import "../sass-commons/button";
@import "../sass-commons/icon";
@import "../sass-commons/links";
@import "../sass-commons/label";
@import "../sass-commons/value";
@import "../sass-commons/truck";
@import "../sass-commons/stats";
@import "../sass-commons/user-info";
@import "../sass-commons/instructions";
@import "../sass-commons/debug";
@import "./like";
@import "./donation";
@import "./machine";
@import "./error-sign";
@import "./block-speedometer";
@import "./block-counter";
@import "./blocker-running-status";

@keyframes drive {
	0% {
		transform: translateX(calc(var(--drive-way) * -1)) rotateY(0deg);
	}

	40% {
		transform: translateX(var(--drive-way)) rotateY(0deg);
	}

	41% {
		transform: translateX(var(--drive-way)) rotateY(180deg);
	}

	42% {
		transform: translateX(var(--drive-way)) rotateY(180deg);
	}

	44% {
		transform: translateX(var(--drive-way)) rotateY(180deg) rotateZ(-25deg);
	}

	48% {
		transform: translateX(var(--drive-way)) rotateY(180deg) rotateZ(-25deg);
	}

	50% {
		transform: translateX(var(--drive-way)) rotateY(180deg);
	}

	90% {
		transform: translateX(calc(var(--drive-way) * -1)) rotateY(180deg);
	}

	91% {
		transform: translateX(calc(var(--drive-way) * -1)) rotateY(0deg);
	}

	100% {
		transform: translateX(calc(var(--drive-way) * -1)) rotateY(0deg);
	}
}

.popup-heading {
	&__version {
		opacity: 0.6;
		font-size: .6em;
		font-weight: normal;
	}
}

.main__inactive-content {
	display: flex;
	align-items: center;
}

main {
	.main__inactive-content {
		display: flex;
	}

	.main__active-content {
		display: none;
	}

	&.logged-in {
		.main__inactive-content {
			display: none;
		}
	
		.main__active-content {
			display: block;
		}
	}
}

.space {
	flex-grow: 1;
}

summary {
	display: flex;
	justify-content: flex-start;
	align-items: center;

	&:hover {
		cursor: pointer;
	}

	.label {
		.icon {
			margin-right: 0.5em;
		}
	}
}
