// *** Event compact ***
//======================

// ** Wrap
//========================================================================================
.event-compact-wrap {
	@include td-make-xs-column(12);
	padding: ($grid-gutter-width / 4) ($grid-gutter-width / 2);
}

.frame-events-fluid .event-compact-wrap {
	@media (min-width: $screen-xxs) and (max-width: $screen-xsm) {
		@include td-make-xs-column(6);
		padding: ($grid-gutter-width / 4) ($grid-gutter-width / 8);
	}

	@media (min-width: $screen-xsm) {
		@include td-make-xs-column(4);
		@include td-make-sm-column(3);
		@include td-make-lg-column(2);
		padding: ($grid-gutter-width / 4) ($grid-gutter-width / 8);
	}
}

.container .event-compact-wrap {
	@media (min-width: $screen-xs) and (max-width: $screen-sm) {
		@include td-make-xs-column(6);
		padding: ($grid-gutter-width / 4) ($grid-gutter-width / 8);
	}

	@media (min-width: $screen-sm) {
		@include td-make-xs-column(4);
		@include td-make-md-column(3);
		padding: ($grid-gutter-width / 4) ($grid-gutter-width / 8);
	}
}

.container-sm .event-compact-wrap {
	@media (min-width: $screen-xs) and (max-width: $screen-sm) {
		@include td-make-xs-column(6);
		padding: ($grid-gutter-width / 4) ($grid-gutter-width / 8);
	}

	@media (min-width: $screen-sm) {
		@include td-make-xs-column(4);
		padding: ($grid-gutter-width / 4) ($grid-gutter-width / 8);
	}
}

// ** Compact
//========================================================================================
.event-compact {
	background: $event-body-bg;
	height: $event-compact-height;
	position: relative;
	transition: box-shadow .15s;

	&:hover {
		box-shadow: $shadow-lg-offset-x $shadow-lg-offset-y $shadow-lg-blur $default-shadow;
	}
}

.event-compact.has-date {
	height: $event-compact-with-date-height;
}

// ** Body
//========================================================================================
.event-compact-body {
	padding: 5px;
}

// ** Header
//========================================================================================
.event-compact-header {
	@include ellipsis;
	background: $event-header-bg;
	border-bottom: $event-compact-seperator-height solid $body-bg;
	color: $gray-dark;
	padding: 5px;
}

.event-compact-header .fa-clock-o,
.event-compact-header .event-compact-time {
	margin-bottom: 5px;
}

// ** Past event
//========================================================================================
.event-compact.is-past {
	background-color: desaturate(lighten($event-body-bg, 5%), 20%);
}

.event-compact.is-past > .event-compact-header {
	background-color: desaturate(lighten($event-header-bg, 5%), 50%);
}

// ** Title
//========================================================================================
.event-compact-title {
	color: $gray-dark;
	margin: 0 0 5px;
}

// ** Description
//========================================================================================
.event-compact-description {
	color: $blue;
	margin: 0;
}
