/* ProgressBar.css */
.moon-progress-bar {
	position: relative;
	background-color: @moon-progress-bg-color;
	direction: ltr;

	.moon-progress-bg-bar,
	.moon-progress-bar-bar {
		position: absolute;
	}

	.moon-progress-bg-bar {
		background-color: @moon-progress-bar-bg-color;
	}

	.moon-progress-bar-bar {
		background-color: @moon-progress-bar-bar-bg-color;
	}

	.moon-progress-bar-popup {
		white-space: nowrap;
		z-index: 20;

		// move the common properties of popup-left, popup-center, popup-right to the following > * block
		> * {
			position: relative;
			display: inline-block;
			vertical-align: top;
		}

		.moon-progress-bar-popup-left {
			margin: 0 -2apx 0 0;
		}

		.moon-progress-bar-popup-center {
			z-index: 21;
		}

		.moon-progress-bar-popup-right {
			margin: 0 0 0 -2apx;
		}

		.moon-progress-bar-popup-label {
			color: @moon-progress-bar-popup-text-color;
			text-align: center;

			.enyo-locale-non-latin & {
				font-size: 30px;
			}
		}

		&.moon-progress-bar-popup-flip-h {
			left: auto;
			right: 50%;
		}
	}

	&.moon-progress-bar-horizontal {
		height: 12px;
		min-width: 120px;
		margin: 48px 18px;

		.moon-progress-bg-bar,
		.moon-progress-bar-bar {
			height: 100%;
			top: 0;
		}

		.moon-progress-bar-popup {
			left: 50%;
		}
	}

	&.moon-progress-bar-vertical {
		width: 12px;
		min-height: 120px;
		margin: 48px;
		display: inline-block;

		.moon-progress-bg-bar,
		.moon-progress-bar-bar {
			width: 100%;
			bottom: 0;
		}

		.moon-progress-bar-popup {
			left: 50%;
		}
	}
}

/* Popup */
.moon-progress-bar-popup-flip-h {
	-webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	transform: scaleX(-1);
}