@keyframes load {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(91%);
	}
}

.lb-progress-bar {
	width: 100%;
	padding: 1rem 0;
	color: inherit;

	.lb-check & {
		color: $color-snow;
	}

	&__inner {
		position: relative;
		width: calc(var(--progress, 0) * 1%);
		min-width: calc(1em);
		display: block;
		border-radius: 4px;
		transition: all 500ms ease-in-out;
		color: currentcolor;
		padding: 5px;
		text-align: right;
		white-space: nowrap;

		.lb-check & {
			min-width: 4rem;
		}

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

		.lb-block-page:not(.animation-level--off) .lb-collecting & {
			text-align: center;
			width: 50%;
			animation: load 1200ms ease-in-out infinite alternate;
		}
	}

	&__label {
		display: inline-block;
		line-height: 1em;
		font-weight: bold;
		font-size: 1rem;
		transition: all 500ms ease-in-out;
		transform: translateX(140%);

		.lb-progress-bar__inner--large & {
			transform: translateX(0);
			color: $color-snow;
		}
		
		.lb-block-page & {
			opacity: 0;
			visibility: hidden;
		}

		.lb-check & {
			transform: translateX(-2rem);
		}
	}
}
