
//
// Cards
// --------------------------------------------------

.ia-card {
	background: @card-bg;
	position: relative;
	.transition(all .15s ease-in-out);

	.label-status {
		position: absolute;
		right: 5px;
		top: 5px;
		z-index: 40;
		font-size: 14px;
	}

	&__image {
		position: relative;
		display: block;

		img {
			.img-responsive();
			width: 300px;
		}

		&__more {
			display: none;
		}
	}

	&__support-info {
		color: #fff;
		font-size: 12px;
		line-height: 12px;
		padding: @card-padding/2;
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		.clearfix();

		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.85)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
		display: none;
	}

	&__content {
		padding: @card-padding*2 @card-padding 0;

		> *:last-child {
			margin-bottom: 0;
		}
	}

	&__actions {
		text-decoration: none;
		float: right;

		> a {
			color: @card-actions-toggle-color;
			display: inline-block;
			font-size: 16px;
			line-height: 16px;
			padding: 0 10px;
			position: relative;
			z-index: 1001;
			
			&:hover {
				text-decoration: none;
				color: @card-actions-toggle-active-color;
			}
		}

		.dropdown-menu {
			margin-top: -31px;
			min-width: 210px;

			a {
				padding-right: 20px;

				> .fa {
					padding: 3px 0;
					float: left;
					width: 16px;
					margin-right: 6px;
				}
			}
		}
	}

	&__badge {
		position: absolute;
		left: 15px;
		top: 15px;
		color: @text-color;
		padding: 2px 6px;
		font-size: 12px;
		z-index: 150;
		border-radius: @border-radius-base;
		background: fade(#fff, 83%);

		&--featured {
			background: @brand-info;
			color: #fff;
		}

		&--sponsored {
			background: @brand-warning;
			color: #fff;
		}
	}

	&__title {
		font-weight: bold;
		display: block;
		font-size: 16px;
		line-height: 16px;
		height: 32px;
		overflow: hidden;
		color: @card-title-color;
		text-transform: uppercase;
		text-decoration: none;
	}

	&__sub-title {
		font-weight: bold;
		font-size: 16px;
		line-height: 16px;
		color: @card-subtitle-color;
		text-transform: uppercase;
		text-decoration: none;
	}

	&__text {
		color: @card-text-color;
	}

	// &.-featured {
	// 	border-color: @brand-info;
	// 	background: fade(@brand-info, 10%);
	// }

	// &.-sponsored {
	// 	border-color: @brand-warning;
	// 	background: fade(@brand-warning, 10%);
	// }

	&__additional {
		color: fade(@text-color, 70%);
		display: none;
	}

	.-additional {
		display: none;
	}
}

.ia-car-info {
	// .clearfix();
	display: none;

	&__icon {
		text-decoration: none;
		display: inline-block;
		padding-left: 32px;
		margin-right: 15px;
		position: relative;
		line-height: 20px;
		color: @text-color;

		&::before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 50%;
			width: 27px;
			height: 20px;
			margin-top: -10px;
			background-repeat: no-repeat;
			background-position: 0 0;
		}

		&--engine::before {
			background-image: url('../img/icon-engine.png');
		}

		&--transmission::before {
			background-image: url('../img/icon-transmission.png');
		}

		&--mileage::before {
			background-image: url('../img/icon-speed.png');
		}

		&--body::before {
			background-image: url('../img/icon-body.png');
		}
	}

	&--block {
		margin-top: 20px;

		.ia-car-info__icon {
			display: block;
			margin-top: 15px;
		}
	}
}

.ia-car-summary {
	display: none;
	margin-top: 15px;
	color: fade(@text-color, 70%);
}

.ia-card__info-table {
	width: 100%;
	font-size: 12px;
	margin-bottom: 0;

	td {
		width: 50%;
		padding: 5px 0;
		border-bottom: 1px solid fade(@card-border-color, 20%);
	}

	tr:last-child td {
		border-bottom: none;
		padding-bottom: 0;
	}

	&.-more {
		display: none;
	}

	&__color {
		display: inline-block;
		margin-right: 10px;
		width: 20px;
		height: 20px;
		border: 1px solid #f0f0f0;
	}
}

.ia-card--small {
	padding: @card-padding/2;

	.ia-card__content {
		padding-top: @card-padding/2;
	}

	.ia-card__title {
		font-size: 13px;
	}

	@media (max-width: @screen-sm) {
		.ia-card--h();
	}
}

.ia-card--h {
	.clearfix();
	border: 1px solid @lines-color;
	padding: 15px;
	
	&__image {
		float: left;
		width: 170px;
		margin-right: 10px;

		&__more {
			display: block;
			float: left;
			width: 50px;
			margin-right: 10px;

			img {
				.img-responsive();
			}

			a {
				display: block;

				+ a {
					margin-top: 10px;
				}
			}
		}

		@media (max-width: @screen-xs) {
			width: 70px;
			margin-right: 5px;
		}
	}

	&__badge {
		top: 30px;
		left: 30px;
	}

	.label-status {
		right: 40px;
		top: 8px;
	}

	&__content {
		margin-left: 180px;
		// overflow: hidden;
		padding-top: 0;
		padding-bottom: 0;

		@media (max-width: @screen-xs) {
			margin-left: 80px;
		}
	}

	&__title {
		height: auto;
	}

	&__additional {
		display: block;
	}

	.-additional {
		display: table-row;
	}

	.ia-card__info-table,
	.ia-card__text {
		display: none;
		// float: left;
		// width: 54%;
		// margin-right: 10px;
	}

	.ia-car-info,
	.ia-car-summary {
		display: block;
	}
}
.ia-cards__items.-list .ia-card.-sponsored .ia-card__content {
	margin-left: 240px;

	@media (max-width: @screen-xs) {
		margin-left: 80px;
	}
}

.ia-card--hsm {
	.clearfix();
	background: #f2f2f2;
	padding: 15px;

	.ia-card__image {
		float: left;
		width: 80px;
		margin-right: 10px;

		img {
			width: 80px;
		}
	}

	.ia-card__content {
		margin-left: 90px;
		// overflow: hidden;
		padding-top: 0;
		padding-bottom: 0;
	}

	& + & {
		margin-top: 10px;
	}
}



//
// List
// --------------------------------------------------

.ia-cards {

	.row {
		margin-left: -5px;
		margin-right: -5px;

		+ .row {
			margin-top: @vertical-rhythm;
		}
	}

	[class^="col-md"] {
		padding: 0 5px;
	}

	&__actions {
		.clearfix();
		margin-bottom: 15px;
		background: @sorting-bg;
		padding: 10px 15px;
	}

	&__sorting {
		float: left;

		@media (max-width: @screen-xs) {
			float: none;
		}

		& when (@dark = true) {
			.btn-default {
				.btn-dark();
			}
		}
	}

	&__filter {
		float: left;
		margin: 0;

		&__item {
			display: inline-block;

			select {
				.form-control();
				display: inline-block;
				width: 130px !important;
				margin-left: 5px;
				vertical-align: middle;
			}
		}

		button {
			margin-left: 5px;
		}

		@media (max-width: @screen-xs) {
			float: none;
		}
	}

	&__layout {
		float: right;

		a {
			display: inline-block;
			// margin-left: 15px;
		}

		@media (max-width: @screen-xs) {
			float: none;
			margin-top: 10px;
		}

		& when (@dark = true) {
			.btn-default {
				.btn-dark();
			}
		}
	}

	&__items {

		&.-list {

			.row {
				margin: 0;

				+ .row {
					margin-top: 10px;
				}
			}

			[class^="col-md"] {
				padding: 0;
				float: none;
				width: 100%;

				+ [class^="col-md"] {
					margin-top: 10px;
				}
			}

			.ia-card {
				.ia-card--h();
			}
		}
	}

	&__small {
		
	}
}
