@keyframes fall {
	20% {
		opacity: 1;
		visibility: visible;
	}

	100% {
		top: calc(100% - var(--avatar-width));
		opacity: 1;
		visibility: visible;
	}
}

@keyframes drive {
	to {
		left: 100%;
	}
}

@keyframes enter {
	from {
		transform: translateX(-120%);
	}

	to {
		transform: translateX(0);
	}
}

.lb-truck-animation {
	--avatar-width: 18px;
	
	color: var(--color);
	position: absolute;
	top: 8px;
	left: var(--lb-popup-padding);
	transform: translateY(-100%);
	display: none;

	.animation-level--frisky & {
		display: block;
	}

	.lb-confirmed & {
		animation: drive 3s ease-in 0s forwards;
	}

	&__hider {
		position: absolute;
		width: calc(var(--avatar-width) + 4px);
		height: 27px;
		top: 0;
		left: -2px;
		border-radius: 4px;
		background-color: var(--highlight-color);
		z-index: 1;
	}
	
	&__avatars {
		position: absolute;
		top: 0;
		left: 4px;
		width: 100%;
		height: 80px;
		transform: translateY(-68%);
	}

	&__avatar {
		display: block;
		top: 0;
		left: 2px;
		position: absolute;
		width: var(--avatar-width);
		height: var(--avatar-width);
		opacity: 0;
		visibility: hidden;
		transition: all 700ms ease-in;
		transform: rotate(calc(50deg * var(--index)));
		animation: fall 700ms ease-in calc(var(--index) * 150ms) forwards;

		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	&__truck {
		position: relative;
		width: 3rem;
		animation: enter 2s ease-in-out forwards;
	}

	&__avatars,
	&__hider {
		transition: all 500ms ease;

		.lb-check & {
			visibility: hidden;
			opacity: 0;
		}
	}

	.lb-block-page & {
		display: none;
	}
}
