/* Default custom select styles */
div.js-custom-select {
	@extend .u-inline-block-middle;
	position: relative;
	z-index: 1;
	border: 1px solid darken($lightgray,3%);
  	background: $lightgray;
  	font-size: 2.2rem;
  	@include border-radius(5px);
}

div.js-custom-select:focus {outline: none;}

.js-custom-select select {display: none;}

.js-custom-select span {
	display: block;
	position: relative;
	cursor: pointer;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Placeholder and selected option */
.js-custom-select > span::after {
	speak: none;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.js-custom-select > span::after {
	font-family: "SSStandard";
	right: 7%;
	font-size: 40%;
	content: '';
	color:darken($lightgray,20%);
	@include animate;
}

.js-custom-select.cs-active > span::after {
	top:40%;
	-webkit-transform: translateY(-50%) rotate(180deg);
	transform: translateY(-50%) rotate(180deg);
}

div.cs-active {z-index: 200;}

/* Options */

.js-custom-select .cs-placeholder {
	color: $blue;
	padding: $base-space * 0.25 $base-space * 2 $base-space * 0.25 $base-space * 1.25;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;

	&:hover {color: darken($blue,5%)}
}

.js-custom-select .cs-options {
	position: absolute;
	overflow: hidden;
	background: $white;
	left: 0;
	opacity:0;
	visibility: hidden;
	@include animate;
	@include shadow($lightgray);
	width: 100%;

}

.js-custom-select.cs-active .cs-options {
	visibility: visible;
	opacity:1;
}

.js-custom-select ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.js-custom-select ul span {
	border-bottom: 1px solid $lightgray;
	display: block;
	padding: $base-space * 0.5 $base-space * 1.25;
	font-size: 2.0rem;
	&:hover {background:lighten($lightgray,4%)}
}

.js-custom-select ul li.cs-focus span {
	background-color: $gray;
}

/* Optgroup and optgroup label */
.js-custom-select li.cs-optgroup ul {
	padding-left: 1rem;
}

.js-custom-select li.cs-optgroup > span {
	cursor: default;
}