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

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

.bottomArea {
	/* display: grid;
	 grid-template-rows: auto 1fr;
	 grid-template-columns: 120px 120px;
	 grid-gap: var(--spacing);*/
	
	@include prefixer(display, flex, ("webkit", "moz", "o"));
	@include prefixer(justify-content, space-around, ("webkit", "moz", "o"));
	@include prefixer(align-items, center, ("webkit", "moz", "o"));
	padding-top: .5rem;
	
	> * {
		//margin: .5rem;
	}
	
	.blinkers {
		color: $cGray;
		font-size: 1.5rem;
		
		&.active {
			color: $cGreen;
		}
	}
	
	.speedLimitKPH,
	.speedLimitMPH {
		background-color: $cWhiteGray;
		color: black;
		width: 3rem;
		height: 3rem;
		font-size: 1.5rem;
		line-height: 1.2rem;
		font-weight: bold;
		@include prefixer(display, flex, ("webkit", "moz", "o"));
		@include prefixer(justify-content, center, ("webkit", "moz", "o"));
		@include prefixer(align-items, center, ("webkit", "moz", "o"));
	}
	
	.speedLimitKPH {
		border: .3rem solid $cRed;
		border-radius: 50%;
	}
	
	.speedLimitMPH {
		border: .3rem solid $cBlack;
		border-radius: 20px;
	}
}