/***********************************************
Intranet Filter
***********************************************/

.intranet-filter {
	width: 100%;
	background-color: $color-background;
	margin-bottom: 10px;
	flex-basis: 0;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	opacity: 0;
	z-index: 4;
	position: relative;
	transition: opacity .3s 0s, visibiliy 0s .3s;
	margin-top: 75px;
	height: 0;

	@media screen and (min-width: $bp-laptop) {
		flex-basis: 20%;
		flex-direction: row;
		opacity: 1;
		visibility: visible;
		margin-top: 0;
		margin-bottom: 10px;
		height: auto;
	}

	.select2 {
		font-size: 13px;
		width: 100% !important;
	}
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: $dark-grey;
	}
	.select2-container--default .select2-selection--single {
		border-radius: 0px;
	}
}
.intranet-filter-no-flex {
	width: 100%;
	background-color: $color-background;
	margin-bottom: 10px;
	visibility: hidden;
	opacity: 0;
	z-index: 4;
	position: relative;
	transition: opacity .3s 0s, visibiliy 0s .3s;
	margin-top: 45px;
	height: 0;

	@media screen and (min-width: $bp-laptop) {
		opacity: 1;
		visibility: visible;
		margin-top: 0;
		margin-bottom: 10px;
		height: auto;
	}
}
/***********************************************
Intranet Filter Icon
***********************************************/

.intranet-filter__icon {
	position: absolute;
	width: 55px;
	height: 55px;
	left: 20px;
	display: block;
	transition: background .3s;

	svg {
		max-width: 40%;
		max-height: 40%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;

		path {
			transition: fill .3s;
			fill: $color-accent;
		}
	}

	&:after {
		@extend %pseudos;
		bottom: -5px;
		height: 5px;
		width: 100%;
		background-color: $color-background;
		opacity: 0;
		transition: opacity .3s;
	}

	.no-touch &:hover {
		svg path {
			fill: $color-primary;
		}
	}

	@media screen and (min-width: $bp-mobile) {
		left: 30px;
	}

	@media screen and (min-width: $bp-tablet) {
		left: 45px;
	}
	
	@media screen and (min-width: $bp-laptop) {
		display: none;
	}
}
.js-filter-open .intranet-filter__icon {
	background-color: $color-background;

	svg {
		transform: rotate(180deg);
		path {
			fill: $color-primary;
		}
	}
	&:after {
		opacity: 1;
	}
	.no-touch &:hover {
		svg path {
			fill: white;
		}
	}
}

.js-filter-open .intranet-filter {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s 0s, visibiliy 0s 0s;
	height: auto;
}

/***********************************************
Intranet Filter Columns
***********************************************/

.intranet-filter-columns-container {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.intranet-filter-columns {
	flex-grow: 1;
	display: flex;
	flex-direction: column;

	@media screen and (min-width: $bp-tablet) {
		flex-direction: row;
	}
}
.intranet-filter-column {
	flex-grow: 0.5;
	padding: em(20);
	align-items: center;
    display: flex;
    flex-direction: column;
    border-bottom: solid 1px $grey;
    &:first-of-type {
    	flex-grow: 1.5;
    }
    &:last-of-type {
    	flex-grow: 2;
    }

    @media screen and (min-width: $bp-tablet) {
		padding: em(30);
		&:first-of-type {
	    	padding-right: em(60);
	    }
	}
}

/***********************************************
Intranet Filter Form Elements
***********************************************/

.filter-row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	justify-content: center;
	width: 100%;
	&:last-of-type {
		margin-bottom: 0;
	}
}
// .filter-row-label {
// 	color: $color-primary;
// 	font-size: $font-micro;
// 	float: right;
// 	margin-right: 15px;
// 	text-align: right;
// 	width: 50px;

// 	@media screen and (min-width: $bp-laptop) {
// 		width: 20%;
// 	}

// 	@media screen and (min-width: $bp-tablet) {
// 		flex-direction: row;
// 	}
// }
.filter-row-input,
.filter-row-select {
	float: left;
	flex-grow: 1;
}
.filter-row-select {
	// -webkit-appearance: none;
 	// -moz-appearance: none;
 	// appearance: none;
    height: 30px;
    border: solid 1px $color-primary;
    border-radius: 0 !important;
    padding: 0 15px;
    background: linear-gradient(to bottom, #eeeeee 0%,#d3d3d3 100%); 
    position: relative;

    &:after {
    	@extend %pseudos;

    }
}
.filter-row-input {
	background-color: white;
	color: $color-primary;
	font-size: $font-small;
	height: 35px;
	outline: 0;
	border: 0;
	padding: 0 12px;
}

/***********************************************
Intranet Checkbox row Form Elements
***********************************************/

.checkbox-columns {
	display: flex;
	flex-direction: row;
	margin-top: 15px;
	width: 100%;
}
.checkbox-columns-label {
	width: 100%;
}
.checkbox-column {
	padding-right: 40px;

	@media screen and (min-width: $bp-tablet) {
		flex-grow: 1;
		padding-right: 15px;
		width: 100%;
	}
}
.checkbox-row {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}
.checkbox-row-label {
	color: $color-primary;
	font-size: $font-micro;
	float: left;
	margin-left: 5px;
	text-align: left;
}
.checkbox-row-input {
	float: left;
	border-radius: 0;
	height: 15px;
	width: 15px;
}

/***********************************************
Intranet Filter Buttons
***********************************************/

.intranet-filter-buttons {
	background-color: darken($color-background, 5%);
	padding: em(20);
	width: 100%;
	font-size: 80%;
	&>a:last-of-type {
		margin-bottom: 25px;
	}
	@media screen and (min-width: $bp-laptop) {
		width: 20%;
		font-size: 75%;
	}
	@media screen and (min-width: $bp-large) {
		font-size: 100%;
	}
	.button--large {
		padding-right: 35px;
	}
}
.intranet-filter--form-buttons {
	> a {
		margin-bottom: 3px;
	}
}

/***********************************************
Intranet Filter Columns
***********************************************/

.intranet-alphabet {
	width: 100%;
	li a {
		color: $color-primary;
		border-right: $border-default;
		&:hover {
			background-color: transparent !important;
		}
	}
}

/***********************************************
Intranet Filter Pagination
***********************************************/

.intranet-pagination {
	margin-bottom: 10px;
	background-color: $color-background;
	text-align: left;
	padding: 10px 15px;
	width: 100%;
	font-size: $font-small;
	color: $color-primary;

	a {
		color: $color-primary;
		text-decoration: none;
		transition: color .3s;
		&:hover {
			color: $color-accent;
		}
	}
	
}
.intranet-pagination span.current,
.intranet-music-pagination span.current {
	font-weight: bold;
	text-decoration: underline;
	color: $color-accent;
}

/***********************************************
Title Filter
***********************************************/

.filter-dropdown {
	padding: 10px 40px 10px 15px;
	border-right: solid 1px white;
	background-color: lighten($color-background, 5%);
	text-align: left;
	// height: 100%; Removed by gavin 2017-09-09 casues dropdowns on opportunities pages to be too tall.
	min-width: 1%;
	transition: background .3s;
	cursor: pointer;
	position: relative;
	margin: 0 2px;
	&:first-of-type {
		margin-left: 15px;
	}
	&:after {
		@extend %pseudos;
		top: 0;
		bottom: 0;
		right: 15px;
		width: 10px;
		height: 10px;
		margin: auto;
		background-image: url(/img/icon-arrow-grey.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	&:hover {
		background: lighten($dark-grey, 20%);
		&:after {
			background-image: url(/img/icon-arrow-white.png);
			transform: rotate(180deg);
		}
		.filter-block { 
			visibility: visible;
			transform: scaleY(1);
			transition: visibility 0ms 0ms, transform 300ms 0s;
			.filter-block-item { 
				opacity: 1;
				transition-delay: 300ms;
			}
		}
		.filter-heading {
			color: white;
			span {
				color: white;
			}
		}
	}
}

.filter-heading {
	color: $dark-grey;
	font-size: 10px;
	display: block;
	font-weight: $font-regular;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .3s;
}
.filter-block {
	visibility: hidden;
	list-style: none;
	display: block;
	position: absolute;
	background-color: lighten($dark-grey, 10%);
	top: 35px;
	left: 0;
	z-index: 900;
	transform: scaleY(0);
	transform-origin: top;
	transition: visibility 0ms 600ms, transform 300ms 0s;
	min-width: 100%;
	will-change: transform;
	padding: 0;
	min-width: 100%;
}
.filter-block-item {
	text-align: left;
	border-bottom: solid 1px lighten($dark-grey, 15%);
	opacity: 0;
	transition: opacity 150ms 0ms;
	line-height: 1.2;
	padding: 25px;
	width: 100%;
	display: block;
	max-height: 300px;
	overflow-y: auto;
	&:last-of-type {
		border-bottom: none;
	}
}
.filter-block-inner {
	width: 100%;
	min-height: 200px;
	width: 350px;
	background-color: $color-background;
}
.filter-input-block {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	&:last-of-type {
		margin-bottom: 0;
	}
}
.filter-input-block label {
	color: white !important;
	font-size: $font-xs;
	white-space: nowrap;
}
.filter-input-block input[type=checkbox],
.filter-input-block input[type=radio] {
	margin-right: 8px;
}
.filter-input-block input[type=text] {
	margin-left: 12px;
	width: 175px;
	height: 30px;
	border: 0;
	outline: none;
}
.filter-input-block--flex {
	display: flex;
	align-items: center;
}
.title-filter-search {
	outline: none;
	background: white;
	margin: 0 2px;
	flex-grow: 1;
	border: 0;
	border-left: solid 1px $grey;
	border-bottom: solid 1px $grey;
	height: 35px;
	padding: 0 10px;
}
.page-title-button {
	height: 35px;
	margin: 0 0 0 5px;
	display: flex;
	align-items: center;
}