/**
 * Select styled without extra containing elements
 * ------------------------------------
 * Based on this article:
 * https://www.filamentgroup.com/lab/select-css.html
 */


$c-select-border-size: 1px;


.c-select {
	@include font-size(s);
	@include border-radius(xs);
	display: block;
	padding-top: #{space(1) - $c-select-border-size};
	padding-bottom: #{space(1) - $c-select-border-size};
	padding-left: space(2);
	padding-right: space(4);
	height: space(5);
	width: 100%;
	//max-width: 100%;
	//max-width: 500px;
	box-sizing: border-box;
	margin: 0;
	appearance: none;
	color: palette(neutral, 700);
	background-color: palette(neutral, 0);
	background-image: url('/img/select-arrow.svg'), linear-gradient(to bottom, palette(neutral, 0) 0%,palette(neutral, 0) 100%);
	background-repeat: no-repeat, repeat;
	background-position: right space(1) top 50%, 0 0;
	background-size: 12px auto, 100%;
	border: $c-select-border-size solid palette(neutral, 300);
	transition: border 150ms linear;

	&:hover {
		border-color: palette(primary, 200);
		background-color: rgba(palette(primary, 100), 0.5);
	}

	&:focus {
		border-color: palette(primary, 400);
		box-shadow: 0 0 7px -3px rgba(palette(secondary, 700), 0.7);
		box-shadow: 0 0 0 1px -moz-mac-focusring;
		color: palette(primary, 500);
		outline: none;
	}

	& option {
		font-weight: normal;
	}
}


.c-select::-ms-expand {
	display: none;
}