// *** Course details ***
//=======================

// ** Column layout
//========================================================================================
.course-page-column-left {
	@include td-make-xs-column(12);
	@include td-make-md-column(8);
	padding: 0;

	@media (min-width: $screen-md) {
		@include td-padding-all(0, ($grid-gutter-width / 4), 0, 0);
	}
}

.course-page-column-right {
	@include td-make-xs-column(12);
	@include td-make-md-column(4);
	padding: 15px 0 0;

	@media (min-width: $screen-md) {
		@include td-padding-all(0, 0, 0, ($grid-gutter-width / 4));
	}
}

.course-page-column-left > div:first-child,
.course-page-column-right > div:first-child {
	padding-top: 0;
}

// ** Component header
//========================================================================================
.course-page-component-header {
	$background-color: $blue;

	background: $background-color;
	color: $white;
	padding: 15px;
}

.course-page-component-header > h4 {
	font-weight: bold;
	margin: 0;
}

// ** Course buttons
//========================================================================================
.course-delete-confirmation {
	$background-color: lighten($brand-danger, 20%);

	background-color: $background-color;
	border: 1px solid darken($background-color, 20%);
	padding: 15px 15px 0;
}

// ** Component buttons
//========================================================================================
.course-page-btn {
	@include btn-lg;
	@include td-text-align(left);
	margin-top: $course-details-seperator-height;
	width: 100%;
}

// ** Header
//========================================================================================
.is-proposal > .details-header,
.has-past-events > .details-header {
	border-color: $course-border-color;
	border-width: $course-border-width $course-border-width 0;
}

.is-proposal > .details-header {
	border-style: $proposal-border-style;
}

.has-past-events > .details-header {
	border-style: $has-past-events-border-style;
}

.has-upcoming-events > .details-header {
	background: $has-upcoming-events-bg;
}

// ** Tags
//========================================================================================
.details-header-tags {
	@include td-pos(right, 0);
	position: absolute;
	top: 0;
}

.is-proposal .details-header-tags,
.has-past-events .details-header-tags {
	@include td-pos(right, -$course-border-width);
	top: -$course-border-width;
}

.details-header-tags > div {
	display: block;
	position: relative;
}

.proposal-tag {
	$background-color: rgba($blue-lighter, .75);

	background-color: $background-color;
	color: darken($background-color, 65%);
	margin-bottom: 1px;
	padding: 8px;
}

// ** Title
//========================================================================================
.course-details-title {
	font-size: 30px;
	margin-bottom: 10px;
}

.course-details-title > .editable {
	font-size: 30px;
	padding: 0;
}

.course-details-title > .editable-controls {
	font-size: medium;
	z-index: 100;
}

.course-details-title > h2 {
	margin-top: 0;
}

// ** Categories
//========================================================================================
.course-details-categories > ul {
	margin-bottom: 0;
}

.course-details-categories > ul > li {
	margin-bottom: 10px;

	&:first-child {
		@include td-margin(left, 0);
	}
}

// ** Navigation
//========================================================================================
.course-details-nav {
	padding: 0 $details-header-padding-horizontal;
}

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

.is-proposal .course-details-nav {
	border-style: $proposal-border-style;
}

.has-past-events .course-details-nav {
	border-style: $has-past-events-border-style;
}

.has-upcoming-events .course-details-nav {
	background: $has-upcoming-events-bg;
}

// ** Content
//========================================================================================
.course-details-content {
	border-bottom-width: 0;
	border-color: darken($tab-content-bg, 5%);
	position: relative;

	&::before,
	&::after {
		border-top: $tab-content-border-width solid $blue;
		content: '';
		height: 100%;
		position: absolute;
		top: $tab-content-border-width * -1;
		z-index: 99;
	}

	&::before {
		left: $tab-content-border-width * -1;
	}

	&::after {
		right: $tab-content-border-width * -1;
	}
}

$course-details-content-padding-horizontal: ($details-header-padding-horizontal + $course-border-width);

.is-proposal .course-details-content {
	padding: 15px $course-details-content-padding-horizontal;
}

.has-past-events .course-details-content {
	padding: 15px $course-details-content-padding-horizontal;
}

.is-proposal .course-details-content::after,
.is-proposal .course-details-content::before,
.has-past-events .course-details-content::after,
.has-past-events .course-details-content::before {
	width: $course-details-content-padding-horizontal;
}

.has-upcoming-events .course-details-content {
	$padding-horizontal: $details-header-padding-horizontal;

	padding: 15px $padding-horizontal;

	&::after,
	&::before {
		width: $padding-horizontal;
	}
}

// ** Description
//========================================================================================
.course-details-description {
	font-size: medium;
	margin-bottom: 0;
}

.course-details-description .editable {
	max-height: 300px;
	overflow: auto;
}

// ** Price Policy
//========================================================================================
.course-details-price-policy {
	margin-top: 10px;
}

// ** Sharing
//========================================================================================
.course-page-column-left .shariff {
	background-color: $tab-content-bg;
	border-color: darken($tab-content-bg, 5%);
	border-style: solid;
	border-width: 0 1px 1px;
}
