.select-select {

	display: none;
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.select-element {
	box-sizing: border-box;
	display: none;
	position: absolute;
	
	&:after,
	&:before {
		box-sizing: border-box;
	}

	* {
		box-sizing: border-box;
		
		&:after,
		&:before {
			box-sizing: border-box;
		}
	}

	&.select-open {
		display: block;
	}
}

.select-theme-default {
	box-sizing: border-box;
	z-index: 20;
	
	* {
		box-sizing: border-box;
		
		&:after,
		&:before {
			box-sizing: border-box;
		}
	}
}

.select.select-theme-default {
	user-select: none;
	
	.select-content {
		-webkit-overflow-scrolling: touch;
		background: rgba($dark-blue, 0.9);
		border: 3px solid $off-white;
		border-radius: 3px;
		color: inherit;
		font-family: inherit;
		max-height: 18rem;
		max-width: 18rem;
		overflow: auto;
	}
	
	.select-options {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-touch-callout: none;
		margin: 0;
		padding: 0;
		
		.select-option {
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			-webkit-touch-callout: none;
			cursor: pointer;
			display: block;
			line-height: 1.25rem;
			list-style: none;
			margin: 0;
			overflow: hidden;
			padding: 0.5rem 1rem 0.5rem 2.5rem;
			position: relative;
			text-overflow: ellipsis;
			white-space: nowrap;
			
			&.select-option-selected:before {
				bottom: 0.2em;
				content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='#ddd' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='#ddd' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
				height: 1em;
				left: 1em;
				margin: auto;
				position: absolute;
				top: 0;
				width: 1em;
			}

			&:hover,
			&.select-option-highlight {
				background: $blue;
				color: #fff;
			}

			&:hover.select-option-selected:before,
			&.select-option-highlight.select-option-selected:before {
				content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='white' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='white' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
			}
		}
	}
}

@media (max-width: 27rem), (max-height: 27rem) {
	.select.select-theme-default .select-content {
		max-height: 11.25rem;
		max-width: 11/25rem;
	}
}

.select-target.select-theme-default {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	display: block;
	height: 46px;
	margin-bottom: 20px;
	margin-top: 5px;
	max-width: 100%;
	overflow: hidden;
	padding: 0.85rem 1.5rem 0.5rem 1rem;
	position: relative;
	text-decoration: none;
	text-overflow: ellipsis;
	user-select: none;
	vertical-align: middle;
	white-space: nowrap;
	zoom: 1;

	@media #{$small-only} { 
		text-align: left; 
	} 
	 
	&:hover, 
	&:active, 
	&:focus { 
		transition: all 0.4s; 
		background: $green; 
	} 

	&.select-target-focused {
		border-color: #63a2f1;
		outline: none;
		transition: all 0.4s;
		
		&:focus {
			border-color: #63a2f1;
			outline: none;
		}
	}

	b {
		bottom: 0;
		height: 1.25rem;
		margin: auto;
		position: absolute;
		right: 0.6rem;
		top: 0;
		width: 2em;
		
		&:before,
		&:after {
			border: 0.263em solid transparent;
			content: '';
			display: block;
			height: 0;
			margin: auto;
			position: absolute;
			right: 0;
			width: 0;
		}

		&:before {
			border-bottom-color: inherit;
			top: 0;
		}

		&:after {
			border-top-color: inherit;
			bottom: 0;
		}
	}
}

// Here's the old shit

// .select-select {
// 	display: none;
// 	opacity: 0;
// 	pointer-events: none;
// 	position: absolute;
// }

// .select-element {
// 	position: absolute;
// 	display: none;

// 	box-sizing: border-box;
	
// 	&:after,
// 	&:before {
// 		box-sizing: border-box;
// 	}
	
// 	* {
// 		box-sizing: border-box;
		
// 		&:after,
// 		&:before {
// 			box-sizing: border-box;
// 		}
// 	}

// 	&.select-open {
// 		display: block;
// 	}
// }

// .select-theme-default {
// 	box-sizing: border-box;
	
// 	* {
// 		box-sizing: border-box;
		
// 		&:after,
// 		&:before {
// 			box-sizing: border-box;
// 		}
// 	}
// }

// .select.select-theme-default {
// 	user-select: none;
	
// 	.select-content {
// 		-webkit-overflow-scrolling: touch;
// 		background: rgba($dark-blue, 0.9);
// 		border: 3px solid $off-white;
// 		border-radius: 3px;
// 		color: inherit;
// 		font-family: inherit;
// 		max-height: 18rem;
// 		max-width: 18rem;
// 		overflow: auto;
// 	}

// 	.select-options {
// 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
// 		-webkit-touch-callout: none;
// 		margin: 0;
// 		padding: 0;

// 		.select-option {
// 			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
// 			-webkit-touch-callout: none;
// 			cursor: pointer;
// 			display: block;
// 			line-height: 1.25rem;
// 			list-style: none;
// 			margin: 0;
// 			overflow: hidden;
// 			padding: 0.5rem 1rem 0.5rem 2.5rem;
// 			position: relative;
// 			text-overflow: ellipsis;
// 			white-space: nowrap;

// 			&.select-option-selected:before {
// 				bottom: 0.2em;
// 				content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='#ddd' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='#ddd' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
// 				height: 1em;
// 				left: 1em;
// 				margin: auto;
// 				position: absolute;
// 				top: 0;
// 				width: 1em;
// 			}

// 			&:hover,
// 			&.select-option-highlight {
// 				background: $blue;
// 				color: #fff;
// 			}

// 			&:hover.select-option-selected:before,
// 			&.select-option-highlight.select-option-selected:before {
// 				content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='white' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='white' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
// 			}
// 		}
// 	}
// }

// @media (max-width: 27rem), (max-height: 27rem) {
// 	.select.select-theme-default .select-content {
// 		max-height: 11.25rem;
// 		max-width: 11.25rem;
// 	}
// }

// .select-target.select-theme-default {
// 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
// 	-webkit-touch-callout: none;
// 	user-select: none;
// 	background: transparent;
// 	color: inherit;
// 	cursor: pointer;
// 	display: block;
// 	height: 46px;
// 	max-width: 100%;
// 	overflow: hidden;
// 	padding: 0.85rem 1.5rem 0.5rem 1rem;
// 	position: relative;
// 	text-decoration: none;
// 	text-overflow: ellipsis;
// 	vertical-align: middle;
// 	white-space: nowrap;
// 	zoom: 1;

// 	// @media #{$small-only} {
// 	// 	text-align: left;
// 	// }
	
// 	&:hover,
// 	&:active,
// 	&:focus {
// 		@include transition(all 0.4s);
// 		background: $green;
// 	}

// 	&.select-target-focused {
// 		@include transition(all 0.4s);
// 		border-color: #63a2f1;
// 		outline: none;
		
// 		&:focus {
// 			border-color: #63a2f1;
// 			outline: none;
// 		}
// 	}

// 	b {
// 		bottom: 0;
// 		height: 1.25rem;
// 		margin: auto;
// 		position: absolute;
// 		right: 0.6rem;
// 		top: 0;
// 		width: 2em;

// 		&:before,
// 		&:after {
// 			border: 0.263em solid transparent;
// 			content: '';
// 			display: block;
// 			height: 0;
// 			margin: auto;
// 			position: absolute;
// 			right: 0;
// 			width: 0;
// 		}

// 		&:before {
// 			border-bottom-color: inherit;
// 			top: 0;
// 		}

// 		&:after {
// 			border-top-color: inherit;
// 			bottom: 0;
// 		}
// 	}
// }