// *** Course compact ***
//=================

// ** Wrap
//========================================================================================
.course-compact-wrap {
	@include td-make-xs-column(12, 15px);
	padding-bottom: 7.5px;

	@media (min-width: $screen-xsm) {
		@include td-make-xs-column(6, 7.5px);
		@include td-make-md-column(4, 7.5px);
		@include td-make-lg-column(3, 7.5px);
	}
}

// ** Compact
//========================================================================================
.course-compact {
	height: 150px;
	position: relative;
	transition-duration: .1s;
	transition-property: #{'box-shadow opacity'};

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

	&.is-proposal,
	&.has-past-events {
		border-color: $course-border-color;
		border-width: $course-border-width;
	}

	&.is-proposal {
		border-style: $proposal-border-style;
	}

	&.has-past-events {
		border-style: $has-past-events-border-style;
	}

	&.has-upcoming-events {
		background: $has-upcoming-events-bg;
	}

	&.filter-no-match,
	&.filter-no-match-delayed {
		transition-duration: .25s;
		transition-property: opacity;
	}

	&.filter-no-match-delayed {
		transition-delay: .3s;
	}
}

// ** Content
//========================================================================================
.course-compact-content {
	@include td-make-xs-column(9);
	@include td-padding-all(0, 0, 0, 15px);
	background: $body-bg;

}

.has-upcoming-events > .course-compact-content {
	@include td-make-xs-column(7.5);
	@include td-padding-all(0, 5px, 0, 15px);
	background: $has-upcoming-events-bg;
}

// ** Title
//========================================================================================
.course-compact-title {
	color: $gray-dark;
	font-size: 20px;
	line-height: 24px;
	margin: 9.5px 0;
	max-height: 60px;
}

// ** Categories
//========================================================================================
.course-compact-content > .course-categories {
	height: 50px;
	margin-bottom: 0;
	overflow: hidden;
}

// ** Event
//========================================================================================
.course-compact-next-event {
	@include td-make-xs-column(4.5);
	background: $course-compact-next-event-bg;
	color: $course-compact-next-event-color;
	max-height: 150px;
	padding: 5px;
	position: relative;
	text-align: center;
}

.course-compact-next-event-component {
	@include ellipsis;
}

// ** Roles
//========================================================================================
.course-compact-roles {
	@include td-make-xs-column(3);
	@include td-pos(right, -7px);
	padding: 0;
	position: relative;
	top: -7px;
}

.course-compact-role {
	text-align: center;
}

.course-compact-role + .course-compact-role {
	margin-top: 3px;
}

.course-compact-role-needed {
	background-color: $role-needed-bg;
	color: $role-needed-color;
}

.course-compact-role-occupied {
	$background-color: $green;

	background-color: $background-color;
	color: desaturate(darken($background-color, 40%), 50%);
}

.course-compact-role-occupied-by-user {
	background-color: $user-bg;
	color: desaturate(darken($user-bg, 40%), 60%);
}

// ** Grouplist
//========================================================================================
.course-groups {
	position: absolute;
}

.course-compact.is-proposal > .course-groups,
.course-compact.has-past-events > .course-groups {
	@include td-pos(right, $course-border-width);
	bottom: $course-border-width;
}

.course-compact.has-upcoming-events > .course-groups {
	@include td-pos(right, $course-border-width * 2);
	bottom: $course-border-width * 2;
}
