@import "../../../../_common/scss/main";

@import "compass/css3/transition";
@import "compass/css3/images";
@import "compass/css3/transform";

dcom-odometer {

	$outer-spacing: 0.08em;
	$line-height: 1.7em;

	position: relative;
	line-height: $line-height+$outer-spacing;


	.odometer-inside {
		margin-top:-$outer-spacing;
	}


	.odometer-value {
		text-align: center;
	}


	.odometer-formatting-mark {
		display:none;
	}


	&,
	.odometer-digit,
	.odometer-digit .odometer-digit-spacer {
		display: inline-block;
		vertical-align: middle;
		*vertical-align: auto;
		*zoom: 1;
		*display: inline;
		height: $line-height;
	}

	.odometer-digit {
		position: relative;
		background: $primary-color;
		margin: 0 $outer-spacing;
		color:#fff;
		border-radius:2px;
		&:after {
			content:" ";
			position:absolute;
			left:0;
			top:0;
			bottom:50%;
			right:0;
			@include background-image(linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.2)))
		}
	}
	.odometer-digit .odometer-digit-spacer {
		visibility: hidden;
		width:1em;
	}
	.odometer-digit .odometer-digit-inner {
		text-align: left;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}
	.odometer-digit .odometer-ribbon {
		display: block;
	}
	.odometer-digit .odometer-ribbon-inner {
		display: block;
		-webkit-backface-visibility: hidden;
	}
	.odometer-digit .odometer-value {
		display: block;
		-webkit-transform: translateZ(0);
		width:1em;
	}
	.odometer-digit .odometer-value.odometer-last-value {
		position: absolute;
	}





	&.odometer-animating-up .odometer-ribbon-inner {
		@include transition(transform 2s);
	}
	&.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
		@include transform(translateY(-100%));
	}
	&.odometer-animating-down .odometer-ribbon-inner {
		@include transform(translateY(-100%));
	}
	&.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
		@include transition(transform 2s);
		@include transform(translateY(0));
	}

}