@import "config.less";

@bar-height: 18 * @unit_base;
@bar-margin: 21 * @unit_base;

@-webkit-keyframes ui-scale-animation {
	from {
		-webkit-transform: scaleX(0);
	} to {
		-webkit-transform: scaleX(1);
	}
}

.ui-progressbar-value {
	height: 100%;

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, @color_progress_value0),
		color-stop(1, @color_progress_value1)
	);
	.LESSborder-radius-all( 10 * @unit_base );
	.LESSbox-shadow(-1px, -1px, 1px, rgb(179, 200, 226));
}

.ui-progressbar-bg {
	position: relative;
	overflow: hidden;

	top: 5 * @unit_base;
	height: 7 * @unit_base;
	margin-left: 5 * @unit_base;
	margin-right: 5 * @unit_base;

	.LESSborder-radius-all( 10 * @unit_base );
	border: 1px;
	border-style: solid;
	border-color: @color_progress_boarder;
	.LESSbox-shadow(1px, -1px, 1px, @color_progress_boarder);
	background-color: @color_progress_bar0;
}

.ui-progressbar {
	position: relative;
	margin-left: @bar-margin;
	margin-right: @bar-margin;
	height: @bar-height;

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, @color_progress_bar1),
		color-stop(1, @color_progress_bar0)
	);
	.LESSbox-shadow(1px, 1px, 0px, white);
	.LESSborder-radius-all( 10 * @unit_base );
}