@keyframes run {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes open {
	0% {
		transform: rotate(0deg)
	}

	60% {
		transform: rotate(100deg)
	}
}

@keyframes shake {
	from {
		transform: translate(45%) rotate(-3deg);
	}
	
	to {
		transform: translate(55%) rotate(3deg);
	}
}

.machine {
	--length: 100px;
	--thickness: 18px;
	--band-thickness: 2px;
	--run-duration: 1000ms;
	--band-rotate: -20deg;
	--stand-height: 24px;

  position: absolute;
  width: var(--length);
	height: var(--thickness);
  left: 50%;
	bottom: 0;
	opacity: .3;
	transition: all 500ms ease;
	color: var(--graphics-color);
	display: none;

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

	.block-speed-fast & {
		--run-duration: 500ms;
	}
	
	.has-queue & {
		opacity: 1;
	}

	&__inner {
		position: relative;
		width: 100%;
		height: 100%;
		display: block;
	}	

	&__band {
		border: var(--band-thickness) solid currentcolor;
		width: var(--length);
		height: var(--thickness);
		border-radius: calc(var(--thickness) / 2);
		display: flex;
		justify-content: space-between;
		background-color: var(--background-color);
		transform-origin: calc(var(--thickness) / 2);
		transition: all 500ms ease;
		position: absolute;
		bottom: calc(var(--thickness) * -0.5);

		&--right {
			transform: translateX(calc(var(--length) * -1));
		}

		&--up {
			transform: rotate(var(--band-rotate));
		}

		.gear-icon {
			width: calc(var(--thickness) - (var(--band-thickness) * 2));
			height: calc(var(--thickness) - (var(--band-thickness) * 2));

			.block--success & {
				animation: run var(--run-duration) linear;
			}
		}
	}

	&__stand {
		position: absolute;
		left: 67%;
		bottom: 0;
		width: 7px;
		height: var(--stand-height);
		background-color: currentcolor;
		border-radius: 2px;
	}

	&__floor {
		width: 246%;
		height: var(--thickness);
		background-color: var(--background-color);
		position: absolute;
		transform: translateX(calc(var(--length) * -1));
		left: -25px;
		bottom: calc(var(--thickness) * -1);
	}
	
	&__floor-border {
		border-radius: var(--band-thickness);
		width: 100%;
		height: var(--band-thickness);
		background-color: currentcolor;
	}

	&__trash {
		position: absolute;
		right: 0;
		bottom: -4px;
		transition: all calc(var(--run-duration) / 3) ease var(--run-duration);
		transform: translateX(50%);

		.block--fail & {
			color: var(--color--error);
			animation: shake calc(var(--run-duration) / 10) linear 10 var(--run-duration) alternate;
		}

		.block--success & {
			color: var(--color--success);
		}
	}

	.trash-icon {
		width: 1.4rem;
		height: 1.4rem;
		background-color: var(--background-color);
	}

	.icon.trash-lid {
		position: absolute;
    top: -4px;
		right: 0;
		width: 1.4rem;
		height: auto;
		transform-origin: 100% 100%;

		.block--success & {
			animation: open calc(var(--run-duration) * 2) ease alternate;
		}
	}

	&__avatar {
		position: absolute;
		border-radius: 50%;
		width: 14px;
		height: 14px;
		border: 1px solid var(--border-color);
		bottom: 36px;
		right: 10px;
		transition: transform linear var(--run-duration), bottom linear var(--run-duration) var(--run-duration);
		background-size: 100%;
		
		&--blocking {
			transform-origin: 100% 100%;
			transform: translate(15%, 21%) rotate(120deg);
			bottom: 13px;
		}

		&--up {
			transform: translate(calc(var(--index) * -16px), calc(var(--index) * 6px));
		}

		&--right {
			transform: translate(calc(var(--index) * -16px), 28px);
		}

		&--upcoming {
			transform: translate(calc(-189px), 36px);
		}

		&--hidden {
			transform: translate(-189px, 51px);
		}
	}
}
