/**
 * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
 * project:	ets2-dashboard-skin
 * file: 	_odometer.scss
 * Date: 	06/04/2020
 * Time: 	20:15
 */

@import "../../../../../assets/scss/common/variables";

.odometer {
	position: relative;
	background: linear-gradient(to right, transparent, $cBlackTransparentHigh, transparent);
	border-bottom: 2px solid;
	/*border-top: 2px solid;*/
	border-image: linear-gradient(to right, transparent, $cRed, transparent) 1;
	//margin-bottom: 1.5rem;
	margin: 0 3rem 1.5rem;
	
	.value {
		//font-family: suprrpg !important;
		letter-spacing: 0.2rem;
		font-size: .9rem;
		/*font-size: 5.5rem;
		line-height: 5rem;*/
	}
	
	> .unit {
		position: absolute;
		letter-spacing: 0.4rem;
		font-size: .6rem;
		bottom: -16px;
		left: 50%;
		right: 50%;
		width: 4rem;
		@include prefixer( transform, translateX(-50%), ("webkit", "moz", "o") );
		background: $cBlack;
		line-height: 0.8rem;
		height: 1rem;
		color: $cWhite;
		text-transform: uppercase;
		border: 2px solid $cRed;
		border-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		
		&:before {
			content: ' ';
			position: absolute;
			width: 1rem;
			height: 1rem;
			left: -0.1rem;
			background: #252729;
			border-left: 1px solid $cRed;
			border-bottom: 2px solid $cRed;
			@include prefixer( transform-origin, bottom left, ("webkit", "moz", "o") );
			@include prefixer( transform, skew(30deg, 0deg), ("webkit", "moz", "o") );
		}
		
		&:after {
			content: ' ';
			position: absolute;
			width: 1rem;
			height: 1rem;
			right: -0.1rem;
			background: #252729;
			border-right: 1px solid $cRed;
			border-bottom: 2px solid $cRed;
			@include prefixer( transform-origin, bottom left, ("webkit", "moz", "o") );
			@include prefixer( transform, skew(-30deg, 0deg), ("webkit", "moz", "o") );
		}
	}
}