/* ProgressButton.css */
.moon-progress-button {
	position: relative;
	overflow: hidden;
	border: @moon-progress-button-border-width solid transparent;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);

	// Override the moon-button mouse-click state to suppress the border
	&.in-progress:active:hover:not([disabled]),
	&.in-progress {
		color: @moon-white;
		padding: @moon-progress-button-border-width (@moon-button-h-padding + @moon-progress-button-border-width);
		border-width: 0;
	}
	&.completed .moon-progress-button-bar {
		transform: translateX(103%);
		-webkit-transform: translateX(103%);
	}
	&.animated {
		.moon-progress-button-bar {
			transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}
		&.completed {
			transition: transform 0.2s ease-in;
			-webkit-transition: -webkit-transform 0.2s ease-in;
		}
	}
}
.moon-progress-button-bar {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: @moon-progress-button-bar-border-radius;
	background-color: @moon-progress-button-bar-color;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}
.moon-progress-button-progresspercent {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}