/**
 * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
 * project:	ets2-dashboard-skin
 * file: 	_dash-element.scss
 * Date: 	06/04/2020
 * Time: 	19:49
 */

.dash-element {
	margin: 0;
	@include prefixer( display, flex, ("webkit", "moz", "o") );
	@include prefixer( flex-direction, column, ("webkit", "moz", "o") );
	
	li {
		list-style: none;
		@include prefixer( display, flex, ("webkit", "moz", "o") );
		@include prefixer( align-items, center, ("webkit", "moz", "o") );
		margin: $deMargin 0;
		position: relative;
		height: $deHeight;
		border: 0 solid;
		
		span {
			font-size: 1.5rem;
		}
		
		.round {
			width: $deHeight;
			height: $deHeight;
			overflow: hidden;
			background: $cBlackTransparentHigh;
			@include prefixer( transform-origin, bottom left, ("webkit", "moz", "o") );
			@include prefixer( transform-origin, bottom left, ("webkit", "moz", "o") );
			padding: 0 .5rem;
			vertical-align: center;
			@include prefixer( display, flex, ("webkit", "moz", "o") );
			@include prefixer( justify-content, center, ("webkit", "moz", "o") );
			@include prefixer( align-items, center, ("webkit", "moz", "o") );
			font-size: 1.5rem;
		}
		
		&.multiline {
			height: $deMultilineHeight;
			text-align: left;
			
			/*&:after, &:before{
				height: $deMultilineHeight;
			}*/
			
			.round {
				height: $deMultilineHeight;
			}
			
			> span {
				span {
					line-height: 1.5rem;
				}
				
				& > * {
					display: block;
				}
			}
		}
		
		
		&.blue {
			color: $cBlue;
			border-color: $cBlue;
		}
		
		&.orange {
			color: $cOrange;
			border-color: $cOrange;
		}
		
		&.red {
			color: $cRed;
			border-color: $cRed;
		}
		
		
		&.green {
			color: $cGreen;
			border-color: $cGreen;
		}
		
		&.default, &.white {
			color: $cWhiteGray;
			border-color: $cRed;
		}
		
		&.disabled {
			color: $cGray;
			border-color: $cGray;
		}
		
	}
	
	&.right {
		padding-right: .5rem;
		
		li {
			background: linear-gradient(to left, $cBlackTransparentHigh, transparent);
			@include prefixer( justify-content, flex-end, ("webkit", "moz", "o") );
			text-align: right;
			border-right-width: 2px;
			
			@for $i from 1 through 8 {
				&:nth-child(#{$i}) {
					
					@if ($i <= 3) {
						margin: $deMargin 0.5rem $deMargin 1.5rem;
					} @else {
						$marginElm: ( $i - 3 ) * 1rem;
						margin: $deMargin $marginElm $deMargin 2rem;
						@include prefixer( transform, skew($deSkewRight, 0deg), ("webkit", "moz", "o") );
						
						&:not(.multiline) {
							/*&:after {
								transform: skew($deSkewRight, 0deg);
							}*/
							
							.round > *, span {
								@include prefixer( transform, skew($deSkewLeft, 0deg), ("webkit", "moz", "o") );
							}
						}
					}
					
					
					&.multiline {
						margin-right: 1rem;
					}
				}
			}
			
			.round {
				margin-left: 1rem;
			}
			
		}
		
	}
	
	&.left {
		padding-left: .5rem;
		
		li {
			background: linear-gradient(to left, transparent, $cBlackTransparentHigh);
			@include prefixer( justify-content, flex-start, ("webkit", "moz", "o") );
			text-align: left;
			border-left-width: 2px;
			
			
			/*&:before {
				content: none;
			}
			
			&:after {
				content: none;
			}*/
			
			@for $i from 1 through 8 {
				&:nth-child(#{$i}) {
					$marginElm: ( $i - 2 ) * 1rem;
					margin: $deMargin 1.5rem $deMargin $marginElm;
					
					&:not(.multiline) {
						@include prefixer( transform, skew($deSkewLeft, 0deg), ("webkit", "moz", "o") );
					}
					
					&.multiline {
						margin: $deMargin 0 $deMargin 0.5rem;
					}
					
					/*.round {
						> * {
						}
					}*/
				}
			}
			
			.round {
				margin-right: 1rem;
			}
			
			&:not(.multiline) {
				/*&:before{
					transform: skew($deSkewLeft, 0deg);
				}*/
				
				.round > *, span {
					@include prefixer( transform, skew($deSkewRight, 0deg), ("webkit", "moz") );
				}
			}
		}
		
	}
}