/* wc.ui.progressBar.ie9.scss */
// Description: Show the fake progress bar spans
@import 'progress_vars';

progress {
	display: inline-block;
	min-width: 10em;

	&.small {
		min-width: 6.7em;
	}
}

[role='progressbar'] {
	@include border;
	background-color: $wc-ui-color-progress-bg;
	display: block;
	height: 1em;
	position: relative;
	width: 100%;

	> [role='presentation'] { // we build the faux progress indicator using two spans
		display: block;
		height: 100%;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 100%;

		+ [role='presentation'] { // faux progress bar text label
			text-align: center;
		}
	}
	> :first-child { // faux progress indicator span
		background-color: $wc-ui-color-progress-fg;
	}
}
