/**
 * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
 * project:	ets2-dashboard-skin
 * file: 	_tab-skins.scss
 * Date: 	28/04/2020
 * Time: 	13:44
 */

@import "../common/variables";

.card {
	background: lighten($cBlack, 4%);
	@include prefixer(display, flex, ("webkit", "moz", "o"));
	@include prefixer(justify-content, space-between, ("webkit", "moz", "o"));
	@include prefixer(align-items, stretch, ("webkit", "moz", "o"));
	@include prefixer(flex-direction, row, ("webkit", "moz", "o"));
	border-radius: .5rem;
	overflow: hidden;
	border: 1px solid darken($cBlack, 1%);
	
	&.active {
		background: transparentize($cRed, .5);
		display: flex;
		border-color: $cRed;
		
		small.text-muted {
			color: $cBlackTransparentHigh;
		}
	}
	
	&.disabled {
		background: transparentize($cGray, .5);
		border-color: $cGray;
		
		small.text-muted {
			color: $cBlackTransparentHigh;
		}
	}
	
	h5 > small {
		font-size: .7rem;
	}
	
	img {
		@include prefixer(object-fit, cover, ("webkit", "moz", "o"));
		max-width: 10rem;
		min-width: 10rem;
		width: 100%;
		height: 100%;
	}
	
	.card-title {
		font-weight: bold;
	}
	
	.card-text {
		text-align: justify;
	}
	
	.card-footer {
		border: none;
		border-left: 1px solid rgba(0, 0, 0, .125);
	}
}