.filter {
	margin-top: 20px;

	@media (min-width: $screen-sm-min) {
		&:not(.open) {
			margin-top: 0;
		}
	}
}

.filter-heading {
	color: $brand-primary;
	display: none;
	margin: 0 0 15px;
}

.filter.open .filter-heading {
	border-bottom: 1px solid $blue-lighter;
	display: block;
	padding-bottom: 10px;
}

.filter-active-tag {
	display: none;
}

.filter.active .filter-active-tag {
	@include td-margin(left, 5px);
	background-color: darken($green, 35%);
	color: $white;
	display: inline;
	font-size: smaller;
	padding: 3px 5px;
}

.filter-captions-header-buttons {
	@include td-float(right);
	display: block;
}

.filter-remove-btn-text {
	display: none;

	@media (min-width: $screen-xxs) {
		display: inline;
	}
}

.filter-components {
	@include make-row;
}

.filter-component ~ .filter-component {
	@media (max-width: $screen-sm-max) {
		margin-top: 15px;
	}
}

.filter-component-header {
	color: $brand-primary;
	display: none;
	margin: 0 0 10px;
}

.filter.open .filter-component-header {
	display: block;
}

.filter-component .fa-check {
	display: none;
}

.filter-component .active .fa-check {
	color: darken($brand-success, 20%);
	display: inline;
}

.filter-course-states {
	@include make-xs-column(12);
}

$filter-course-states-sm-column: 6;

.filter-expanded .filter-course-states {
	@include td-make-md-column($filter-course-states-sm-column);
}

$filter-course-state-captions-gutter: 10px;

.filter-course-state-captions {
	@include make-row($filter-course-state-captions-gutter);
}

.filter-captions-column {
	@include td-make-xs-column(4, $filter-course-state-captions-gutter);

	@media (max-width: $screen-xxs) {
		@include make-xs-column(12, $filter-course-state-captions-gutter);
	}
}

.filter-captions-column + .filter-captions-column {
	@media (max-width: $screen-xxs) {
		margin-top: 10px;
	}
}

.filter-caption-wrap {
	height: 50px;
}

.filter-caption {
	display: table;
	font-size: medium;
	height: 100%;
	opacity: .75;
	text-align: center;
	transition-duration: .15s;
	transition-property: #{'box-shadow opacity'};
	width: 100%;

	&.is-proposal,
	&.has-past-events {
		border-color: $blue-lighter;
		border-width: 5px;
	}

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

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

	&.has-upcoming-events {
		background-color: $blue-lighter;
	}

	&:hover {
		cursor: pointer;
	}

	&.active,
	&:hover {
		box-shadow: 0 0 4px rgba(67, 223, 37, 1);
		opacity: 1;
		transition-duration: .15s;
		transition-property: #{'box-shadow opacity'};
	}

	@media (min-width: $screen-xs-min) {
		font-size: large;
	}
}

.filter-caption-text {
	display: table-cell;
	vertical-align: middle;
}

.filter-course-roles {
	@include td-make-sm-column(6);
	@include td-make-md-column((12 - $filter-course-states-sm-column) / 2);
}

.filter-course-role {
	@include td-text-align(left);
	background-color: transparent;
	border: 0;
	display: block;
	margin: 0;
	padding: 0;

	&:hover {
		color: $brand-primary;
	}

	&:focus {
		outline: none;
	}

	&.active {
		color: darken($green, 50%);
	}
}

.filter-course-role + .filter-course-role {
	margin-top: 5px;
}

.filter-course-role-icon {
	@include td-margin(right, 5px);
	background-color: $role-needed-bg;
	color: $role-needed-color;
	display: inline-block;
	padding: 3px 5px;
}

.filter-course-role .checkmark {
	display: none;
}

.filter-course-role.active .checkmark {
	display: inline;
}

.filter-course-categories {
	@include td-make-sm-column(6);
	@include td-make-md-column((12 - $filter-course-states-sm-column) / 2);
}

.filter-categories-select {
	margin-bottom: 10px;
	padding: 0;
}

.filter-categories-select > .dropdown-toggle {
	@include td-pos(right, 3px);
	background: transparent;
	border: 0;
	display: block;
	line-height: $line-height-base;
	padding: $padding-base-vertical $padding-base-horizontal;
	position: absolute;
	top: 0;
}

.js-search-categories {
	border: 1px dashed $category-bg;
	box-shadow: none;

	&:hover {
		cursor: pointer;
	}

	&:focus {
		border-style: solid;
	}
}

.filter-no-categories-found {
	padding: 5px 10px;

	&:hover {
		cursor: default;
	}
}

.filter-categories-dropdown {
	max-height: 300px;
	min-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

.filter-categories-dropdown .js-category-label {
	background-color: $dropdown-bg;
	box-shadow: none;
	position: relative;
}

.js-toggle-subcategories {
	padding: 0 5px;

	&:hover {
		cursor: pointer;
	}
}

.dropdown-menu > .js-sub-category {
	@include td-margin(left, 20px);
	border-left: 1px solid $blue-light;
	display: none;
}

.js-sub-category > a {
	@include td-padding(left, 15px);
}

.filter-selected-categories {
	list-style: none;
	margin: 0;
	padding: 0;

	@media (max-width: $screen-xs) {
		border: 1px solid $green;
		border-radius: 4px;
		margin-bottom: 10px;
		padding: 5px;
	}
}

.filter-selected-categories > li {
	@include td-padding-all(0, 3px, 3px, 0);
	margin-bottom: 3px;

	@media (max-width: $screen-xs) {
		display: inline-block;
		margin: 5px 0;
		padding-bottom: 0;
	}
}

.category-label + .remove-btn {
	@include td-margin(left, 5px);
}

.filter-actions {
	@include td-text-align(right);
	margin-top: 5px;
}
