@import "variables";
.w-viewedCars-box {
	background: #fff;
	padding: 0 24px;
	@media (max-width: 991px){
		padding: 24px 24px 0;
	}
	@media (max-width: 767px){
		padding: 12px;
	}
	@media (max-width: 449px){
		padding-bottom: 0;
		&:not(.withoutBG){
			background: #dee2e5;
		}
	}
	.w-viewedCars {
		.w-viewedCars__list {
			.w-viewedCars-item {
				/*@media(max-width: 991px){
					&:nth-child(-n+2){
						display: block !important;
					}
				}*/
				.w-viewedCars-item__link {
					min-height: 100%;
				}
				.w-viewedCars-item__model {
					position: relative;
					overflow: hidden;
					max-height: 42px;
					padding-right: 20px;
					line-height: 21px;
				}
				.w-viewedCars-item__license-plate {
					text-transform: uppercase;
				}
				&.in {
					display: none;
					@media(min-width: 992px){
						display: block;
					}
				}
			}
		}
	}
}
.w-viewedCars {
	position: relative;
	//margin-bottom: 48px;
	.w-viewedCars__head {
		margin-bottom: 16px;
		font-size: 24px;
		line-height: 1.25rem;
		font-weight: bold;
		color: $blue;
	}
	.w-viewedCars__list {
		.w-viewedCars-item {
			position: relative;
			display: none;
			&:not(:first-child){
				margin-top: 1px; // ???
			}
			@media(max-width: 991px){
				//&:nth-child(-n+2){
				&:first-child {
					display: block !important;
				}
			}
			&.in {
				display: none;
				@media(min-width: 992px){
					display: block;
				}
			}
			.w-viewedCars-item__link {
				background: $blue;
				border: 0;
				position: relative;
				display: block;
				padding: 8px;
				color: $color_white;
				font-size: 14px;
				line-height: normal;
				text-decoration: none !important;
				@include border-radius(2px);
				&:hover {
					@include box-shadow(0 2px 8px rgba(13, 97, 171, 0.5));
				}
			}
			.w-viewedCars-item__closer {
				position: absolute; top: 0; right: 0;
				@media (min-width: 768px) {
					right: auto;
					left: 100%;
					padding-left: 1px;
					display: none;
				}
				a {
					border: 0;
					position: relative;
					display: block;
					width: 28px;
					height: 28px;
					z-index: 55;
					opacity: 0.5;
					@include border-radius(2px);
					@media (min-width: 768px) {
						background: $color_gray_50;
						width: 24px;
						height: 24px;
					}
					&:before, &:after {
						content: '';
						background: $white;
						position: absolute; top: 50%; left: 50%;
						display: block;
						width: 14px;
						height: 1px;
					}
					&:before {
						@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
					}
					&:after {
						@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
					}
					&:hover {
						@media (min-width: 768px) {
							background: $red;
						}
						opacity: 1;
					}
				}
			}
			.w-viewedCars-item__arrow {
				position: absolute; top: 50%; right: 8px;
				display: block;
				height: 28px;
				margin-top: -14px;
				font-size: 28px;
				line-height: 28px;
				/*@media(max-width: 1199px){
					top: auto;
					bottom: 4px;
				}*/
			}
			.media {
				margin: 0;
				min-height: 64px;
				.media-left {
					padding-right: 12px;
				}
				.media-body {}
			}
			.w-viewedCars-item__brand {
				background: $white;
				position: relative;
				display: block;
				width: 96px;
				height: 64px;
				.ico-auto-brands {
					position: absolute; top: 50%; left: 50%;
					@include transform(translateX(-50%) translateY(-50%));
					display: block;
					width: 60px;
					height: 60px;
					font-size: 60px;
					line-height: 1;
				}
			}
			.w-viewedCars-item__image {
				display: block;
				width: 96px;
				&.img-aligner {
					background: #e5e4e5;
					.img-aligner__img {
						max-width: 50%;
						max-height: 50%;
					}
				}
			}
			.w-viewedCars-item__model {
				margin-bottom: 2px;
				font-size: 16px;
				font-weight: bold;
			}
			.w-viewedCars-item__year {}
			.w-viewedCars-item__license-plate {}

			.remover {
				background: #dde4ec;
				position: absolute; top: 8px; left: 8px;
				z-index: 55;
				display: block;
				width: 16px;
				height: 16px;
				color: $white;
				/*@media(max-width: 1199px){
					display: block;
					width: 18px;
					height: 18px;
				}*/
				&:before, &:after {
					content: '';
					background: #7e93b2;
					position: absolute; top: 50%; left: 50%;
					display: block;
					width: 70%;
					height: 2px;
					@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
				}
				&:after {
					@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
				}
				&:hover {
					background: #d70a0a;
					cursor: pointer;
					&:before, &:after {
						background: #fff;
					}
				}
			}
			//
			&:hover {
				.w-viewedCars-item__closer {
					display: block;
				}
				/*.remover {
					opacity: 1;
					display: block;
				}*/
			}
		}
	}
	.w-viewedCars__more {
		padding-top: 12px;
		//padding-left: 116px;
		//padding-right: 12px;
		text-align: right;
		&.text-left {
			text-align: left !important;
		}
		&.text-center {
			text-align: center !important;
		}
		&.text-right {
			text-align: right !important;
		}
		a {
			border: 0;
			position: relative;
			display: inline-block;
			padding-left: 32px;
			font-size: 16px;
			line-height: 1.25;
			color: #7E93B2 !important;
			img, svg {
				position: absolute; top: 50%; left: 0;
				display: block;
				width: 24px;
				height: 24px;
				margin-top: -12px;
			}
			span {
				display: inline-block;
				white-space: nowrap;
			}
			.fa {
				padding-left: 8px;
			}
		}
	}

	//mods
	&.large {
		.w-viewedCars__list {
			display: flex;
			flex-wrap: wrap;
			margin-left: -4px;
			margin-right: -4px;
			@media(max-width: 767px){
				flex-direction: column;
			}
			.w-viewedCars-item {
				&:not(:first-child) {
					display: none;
				}
				@media(min-width: 768px){
					width: 50%;
					&:nth-child(-n+2){
						display: block;
					}
				}
				@media(min-width: 992px){
					width: 33.3333%;
					&:nth-child(-n+3){
						display: block;
					}
				}
				margin: 0 0 8px;
				padding: 0 4px;
				.remover {
					left: 12px;
				}
			}

			@media(max-width: 991px){
				margin-left: -2px;
				margin-right: -2px;
				.w-viewedCars-item {
					margin: 0 0 4px;
					padding: 0 2px;
				}
			}
		}
		.w-viewedCars__more {
			padding-top: 4px;
			text-align: center;
			a {
				color: $blue;
			}
		}
	}
	&.w-viewedCars__full {
		.w-viewedCars__list {
			.w-viewedCars-item {
				display: block !important;
			}
		}
		.w-viewedCars__more {
			display: none;
		}
	}
}