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

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

.speed-area {
	$sizeSide: 3rem;
	$heightSide: 5rem;
	margin-top: .5rem;
	
	@import "common/bars";
	
	.speed-wrapper .left, .speed-wrapper .right, .bottom {
		@include prefixer( display, flex, ("webkit", "moz", "o") );
		padding: .15rem;
	}
	
	.speed-wrapper {
		@include prefixer( display, flex, ("webkit", "moz", "o") );
		@include prefixer( justify-content, center, ("webkit", "moz", "o") );
		@include prefixer( align-items, stretch, ("webkit", "moz", "o") );
		//transform: translateZ(-100px);
		
		.middle{
			width: 100%;
			margin: 0.5rem 0;
			@include prefixer( perspective, 100px, ("webkit", "moz", "o") );
			
			.speed{
				> * {
					display: block;
				}
				
				.value {
					font-family: suprrpg !important;
					font-size: 4.8rem;
					line-height: 5rem;
					@include prefixer( transform, skew(19deg, 0deg), ("webkit", "moz", "o") );
					margin: 0.7rem 0 0;
				}
				
				> .unit {
					font-size: 1rem;
				}
			}
		}
	}
	
	.fuel-level{
		@include prefixer( display, flex, ("webkit", "moz", "o") );
		@include prefixer( flex-direction, column, ("webkit", "moz", "o") );
		@include prefixer( justify-content, center, ("webkit", "moz", "o") );
		@include prefixer( align-items, center, ("webkit", "moz", "o") );
		@include prefixer( transform, rotateX(65deg), ("webkit", "moz", "o") );
		
		.fuel-icon-wrapper{
			@include prefixer( display, flex, ("webkit", "moz") );
			@include prefixer( justify-content, center, ("webkit", "moz") );
			@include prefixer( align-items, center, ("webkit", "moz") );
			
			> i {
				color: $cWhiteGray;
				line-height: 0;
				padding: .5rem;
				
				&.warning {
					background: $cRed;
				}
			}
		}
		
		.bars .bar:first-child{
			background: transparentize( $cRed, .8 );
			
			&.active {
				background: $cRed;
			}
		}
	}
}