/**
 * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
 * project:	ets2-dashboard-skin
 * file: 	test.scss
 * Date: 	01/05/2020
 * Time: 	17:40
 */

@import "~bourbon/core/bourbon";
@import "../../../../assets/scss/common/variables";

.maps {
	background: #303030;
	
	&.wrapper {
		display:         flex;
		justify-content: center;
		align-items:     center;
		text-align:      center;
		position:        relative;
		
		.loader {
			position:   absolute;
			background: $cBlackTransparentMid;
		}
		
		.controls-wrapper, .ol-zoom, .eta-wrapper, #speed-area {
			display:         flex;
			justify-content: center;
			align-items:     flex-end;
			text-align:      center;
			height:          2rem;
			
			button, .button {
				display:         flex;
				justify-content: center;
				align-items:     center;
				text-align:      center;
				color:           $cWhite;
				border:          0;
				background:      $cBlackTransparentMid;
				font-size:       1.8rem;
				margin:          0;
				outline:         0;
				width:           $deHeight;
				height:          2rem;
				overflow:        hidden;
				
				> span { padding: .2rem; }
				
				i { padding: .2rem 0 0 0; }
				
				&:last-child { margin-right: 0; }
				
				&.disabled {
					background:   transparentize($cBlackTransparentHigh, .3);
					border-color: $cGray;
					color:        $cGray;
				}
			}
			
			&.left {
				button, .button { border-left: 2px solid $cRed; }
			}
			
			&.bottom {
				button, .button { border-bottom: 2px solid $cRed; }
			}
			
			&.top {
				button, .button { border-top: 2px solid $cRed; }
			}
		}
		
		.controls-wrapper {
			
			position: absolute;
			right:    0;
			bottom:   0;
			height:   auto;
			width:    auto;
			z-index:  2;
			
			button, .button {
				font-size: 1.4rem;
			}
			
			.ol-zoom {
				flex-direction: column;
				height:         100%;
				
				.ol-zoom-in { content: "fas fa-search-plus" }
			}
			
			&:before {
				content:     " ";
				width:       $deHeight;
				height:      $deHeight;
				left:        -0.1rem;
				background:  transparentize($cBlackTransparentMid, .3);
				border-left: 2px solid $cRed;
				border-top:  1px solid $cRed;
				
				@include prefixer(transform-origin, bottom left, ("webkit", "moz", "o"));
				@include prefixer(transform, skew(-45deg, 0deg), ("webkit", "moz", "o"));
			}
		}
		
		.eta-wrapper {
			height:   inherit;
			position: absolute;
			left:     0;
			width:    auto;
			bottom:   0;
			
			.button {
				width: auto;
				
				.round {
					min-width:      $deHeight;
					max-width:      $deHeight;
					height:         $deHeight;
					border-right:   2px solid $cRed;
					overflow:       hidden;
					background:     $cBlackTransparentHigh;
					padding:        0 .5rem;
					vertical-align: center;
					font-size:      1.5rem;
					
					@include prefixer(transform-origin, bottom left, ("webkit", "moz", "o"));
					@include prefixer(transform-origin, bottom left, ("webkit", "moz", "o"));
					@include prefixer(display, flex, ("webkit", "moz", "o"));
					@include prefixer(justify-content, center, ("webkit", "moz", "o"));
					@include prefixer(align-items, center, ("webkit", "moz", "o"));
				}
			}
			
			&:before {
				content:      " ";
				width:        $deHeight;
				height:       $deHeight;
				left:         -0.1rem;
				background:   $cBlackTransparentHigh;
				border-right: 2px solid $cRed;
				border-top:   1px solid $cRed;
				
				@include prefixer(transform-origin, bottom left, ("webkit", "moz", "o"));
				@include prefixer(transform, skew(45deg, 0deg), ("webkit", "moz", "o"));
			}
		}
		
		#speed-limit {
			position: absolute;
			width:    auto;
			left:     .3rem;
			top:      .3rem;
			
			span {
				display:         flex;
				justify-content: center;
				align-items:     center;
				text-align:      center;
				background:      $cWhite;
				border:          .3rem solid $cRed;
				border-radius:   100%;
				width:           3.2rem;
				height:          3.2rem;
				color:           $cBlack;
				font-weight:     bold;
				font-size:       1.5rem;
			}
		}
		
		#speed-area {
			position: absolute;
			bottom:   0;
			height:   auto;
			
			.button {
				height:  auto;
				width:   auto;
				padding: .3rem;
				z-index: 1;
			}
			
			.speed {
				.value {
					font-family: suprrpg !important;
					@include prefixer(transform, skew(19deg, 0deg), ("webkit", "moz", "o"));
					font-size:   2.5rem;
					line-height: 2.3rem;
				}
				
				.unit { font-size: .7rem; }
			}
			
			.truck-gear {
				line-height: 1.4rem;
				background:  $cWhiteGray;
				color:       $cBlack;
				padding:     .3rem;
				height:      inherit;
				font-weight: bold;
				font-size:   1.5rem;
			}
			
			&:before {
				content:     " ";
				position:    relative;
				bottom:      -1px;
				width:       2rem;
				height:      3rem;
				padding:     .3rem;
				left:        -0.1rem;
				background:  $cBlackTransparentMid;
				border-left: 1px solid $cRed;
				border-top:  2px solid $cRed;
				@include prefixer(transform-origin, bottom left, ("webkit", "moz", "o"));
				@include prefixer(transform, skew(-30deg, 0deg), ("webkit", "moz", "o"));
			}
			
			&:after {
				content:      " ";
				position:     relative;
				bottom:       -1px;
				width:        2rem;
				height:       3rem;
				padding:      .3rem;
				right:        -0.1rem;
				background:   $cBlackTransparentMid;
				border-right: 1px solid $cRed;
				border-top:   2px solid $cRed;
				@include prefixer(transform-origin, bottom left, ("webkit", "moz", "o"));
				@include prefixer(transform, skew(30deg, 0deg), ("webkit", "moz", "o"));
			}
		}
		
		.ol-mouse-position {
			position:   absolute;
			width:      5rem;
			height:     5rem;
			left:       5rem;
			top:        5rem;
			background: transparentize($cBlackTransparentMid, .3);;
		}
	}
}