/**
 * Custom selects
 * all credit goes to https://github.com/filamentgroup/select-css
 *
 * Styling selects crossbrowser is not easy, hence this file.
 * to use, wrap any select in a .CustomSelect wrapper and include this CSS
 */

.CustomSelect {
	border: 1px solid #bbb;
	border-radius: 0.3em;
	box-shadow: 0 1px 0 1px rgba(0,0,0,0.04);
	background: #f3f3f3; // Old browsers
	background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100%); // W3C

	&:hover {
		border: 1px solid #888;
	}

	select {
		// Font size must the 16px or larger to prevent iOS page zoom on focus
		font-size: 1em;
		font-family: sans-serif;
		color: #444;
		padding: 0.4em 1.9em 0.3em 0.5em;
		line-height: 1.3;

		&:focus {
			outline: none;
			box-shadow: 0 0 1px 3px rgba(180, 222, 250, 1);
			background-color: transparent;
			color: #222;
			border: 1px solid #aaa;
		}
	}
}


/**
 * YOU SHOULD BE ABLE TO IGNORE EVERYTHING BELOW THIS
 */


// Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc.
.CustomSelect {
	position: relative;
	display: block;
	padding: 0;
}

// This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper
.CustomSelect select {
	width: 100%;
	margin: 0;
	background: none;
	border: 1px solid transparent;
	outline: none;
	box-sizing: border-box;
	/* Remove select styling */
	appearance: none;
	-webkit-appearance: none;
}

// Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select.
.CustomSelect::after {
	content: '\25BC';
	position: absolute;
	top: 50%;
	font-size: 0.7em;
	right: 1em;
	margin-top: -0.5em;
	z-index: 2;
	// This hack make the select behind the arrow clickable in some browsers
	pointer-events: none;
	background: url('#');
}

// Make sure options have normal weight
.CustomSelect option {
	font-weight: normal;
}




/* ------------------------------------  */
/* START OF UGLY BROWSER-SPECIFIC HACKS */
/* ----------------------------------  */

/* OPERA - Pre-Blink nix the custom arrow, go with a native select button to keep it simple. Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7 */
x:-o-prefocus,
.CustomSelect::after {
	display: none;
}

/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.CustomSelect select::-ms-expand {
		display: none;
	}
	.CustomSelect select:focus::-ms-value {
		background: transparent;
		color: #222;
	}
}


/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
/* Show only the native arrow */
@-moz-document url-prefix() {
	.CustomSelect {
		overflow: hidden;
	}
	.CustomSelect select {
		width: 120%;
		width: -moz-calc(100% + 3em);
		width: calc(100% + 3em);
	}
}

/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
.CustomSelect select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}


/* ------------------------------------  */
/*  END OF UGLY BROWSER-SPECIFIC HACKS  */
/* ------------------------------------  */