/*
http://red-team-design.developpez.com/tutoriels/css/donner-style-listes-deroulantes/fichiers/
B.E.M Naming convention:
(Block) .custom-dropdown			= The main component
(Element) .custom-dropdown__select	= Descendant of .custom-dropdown
(Modifier) .custom-dropdown--*		= Different state of .custom-dropdown
*/

.custom-dropdown--large {font-size: 1.5em;}
.custom-dropdown--small {font-size: .7em;}
.custom-dropdown--border-bottom {border-bottom:1px solid #008000;}

.custom-dropdown__select {
	padding: 6px 8px;
	margin: 0;
	width: 100%;
	height: 34px;
}

.custom-dropdown__select optgroup option{
	padding: 6px 15px;
}

.custom-dropdown__select--white {background-color: #fff; color: #444;}

@supports (pointer-events: none) and ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
	.custom-dropdown {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: 100%;
	}
	.custom-dropdown__select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	.custom-dropdown::before, .custom-dropdown::after {
		content: "";
		position: absolute;
		pointer-events: none;
	}
	.custom-dropdown::after {
		content: "\25BC";
		height: 1em;
		font-size: 12px;
		line-height: 1;
		right: 0.8em;
		top: 50%;
		margin-top: -.5em;
	}
	.custom-dropdown::before {
		width: 2em;
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	/* Disabled style */
	.custom-dropdown__select[disabled] {color: rgba(0,0,0,.3);}
	.custom-dropdown.custom-dropdown--disabled::after {color: rgba(0,0,0,.1);}
	
	/* White dropdown style */
	.custom-dropdown--white::before {top: .5em;bottom: .5em;background-color: #fff;border-left: 1px solid rgba(0,0,0,.1);}
	.custom-dropdown--white::after {color: rgba(0,0,0,.9);}
	
}