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

@import "mixins/mixins-rpm";
@import "../../../../../assets/scss/common/variables";
@import "common/bars";

$sizeSide: 3rem;
$heightSide: 5rem;

.speed-wrapper {
	.left, .right {
		@include prefixer( display, flex, ("webkit", "moz", "o") );
		@include prefixer( justify-content, space-between, ("webkit", "moz", "o") );
		@include prefixer( align-items, center, ("webkit", "moz", "o") );
		
		& > span {
			font-size: 1rem;
		}
		
		.bars {
			//@include prefixer( flex-direction, column, ("webkit", "moz", "o") );
			display: block;
			width: 100%;
			@include prefixer( perspective, 100px, ("webkit", "moz", "o") );
			
			.bar {
				height: .2rem;
				width: 1rem;
				margin: 2px 0 0;
				@include prefixer( transform-style, preserve-3d, ("webkit", "moz", "o") );
				
				@include rpmBar('red', $cRed);
				@include rpmBar('blue', $cBlue);
				@include rpmBar('green', $cGreen);
			}
		}
	}
	
	.left {
		width: 100%;
		max-width: $sizeSide;
		min-width: $sizeSide;
		@include prefixer( flex-direction, row-reverse, ("webkit", "moz", "o") );
		
		& > span {
			writing-mode: vertical-rl;
			text-orientation: upright;
			@include prefixer( transform, translateX(-.3rem), ("webkit", "moz", "o") );
		}
		
		.bars {
			//align-items: flex-start;
			
			.bar {
				@include prefixer( transform, rotateY(45deg), ("webkit", "moz", "o") );
				
				@for $i from 1 through $iiNbBarSkew {
					&:nth-child(0n+#{$i}) {
						$j: ( $iiNbBarSkew + 1 ) - $i;
						
						$spaceZ:  ( 0.3rem * ( $j - 1 ) );
						$spaceY:  -( 0.15rem * ( $j - 1 ) );
						@include prefixer( transform, rotateY(45deg) rotateX(-60deg) translateZ($spaceZ) translateY($spaceY) translateX( .1rem ), ("webkit", "moz", "o") );
					}
				}
				
				// .3 .2
				@for $i from 1 through $iiNbBarSkew {
					$k: ( $iiNbBarSkew - $i ) + 1;
					&:nth-last-child(-n+#{$k}) {
						$j: ( $iiNbBarSkew + 1 ) - $k;
						$spaceZ:  ( 0.3rem * ( $j - 1 ) );
						$spaceY:  ( 0.2rem * ( $j - 1 ) );
						@include prefixer( transform, rotateY(45deg) rotateX(60deg) translateZ($spaceZ) translateY($spaceY) translateX( .1rem ), ("webkit", "moz", "o") );
					}
				}
			}
		}
	}
	
	.right {
		width: 100%;
		max-width: $sizeSide;
		min-width: $sizeSide;
		
		& > span {
			writing-mode: vertical-rl;
			text-orientation: upright;
			@include prefixer( transform, translateX(.3rem), ("webkit", "moz", "o") );
		}
		
		.bars {
			//align-items: flex-end;
			
			.bar {
				@include prefixer( transform, rotateY(-45deg), ("webkit", "moz", "o") );
				
				//margin-left: 0.3rem;
				
				@for $i from 1 through $iiNbBarSkew {
					&:nth-child(0n+#{$i}) {
						$j: ( $iiNbBarSkew + 1 ) - $i;
						
						$spaceZ:  ( 0.3rem * ( $j - 1 ) );
						$spaceY:  -( 0.15rem * ( $j - 1 ) );
						@include prefixer( transform, rotateY(-45deg) rotateX(-60deg) translateZ($spaceZ) translateY($spaceY) translateX( -.1rem ), ("webkit", "moz", "o") );
					}
				}
				
				// .3 .2
				@for $i from 1 through $iiNbBarSkew {
					$k: ( $iiNbBarSkew - $i ) + 1;
					&:nth-last-child(-n+#{$k}) {
						$j: ( $iiNbBarSkew + 1 ) - $k;
						$spaceZ:  ( 0.3rem * ( $j - 1 ) );
						$spaceY:  ( 0.2rem * ( $j - 1 ) );
						@include prefixer( transform, rotateY(-45deg) rotateX(60deg) translateZ($spaceZ) translateY($spaceY) translateX( -.1rem ), ("webkit", "moz", "o") );
					}
				}
			}
		}
	}
}