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


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


.c-select {
	@include font-size(base);
	@include border-radius(s);
	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: 576px;
	box-sizing: border-box;
	margin: 0;
	border: $c-select-border-size solid palette(neutral, 900);
	appearance: none;
	color: palette(neutral, 900);
	background-color: palette(neutral, 0);
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5LjQxIiBoZWlnaHQ9IjYuMTIiIHZpZXdCb3g9IjAgMCA5LjQxIDYuMTIiPjx0aXRsZT5BcnJvdzwvdGl0bGU+PHBvbHlnb24gcG9pbnRzPSIxLjQxIDAgMCAxLjQxIDQuNzEgNi4xMiA5LjQxIDEuNDEgOCAwIDQuNzEgMy4yOSAxLjQxIDAiLz48L3N2Zz4='),
	linear-gradient(to bottom, palette(neutral, 0) 0%,palette(neutral, 0) 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
	transition: border 150ms linear;
}

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

.c-select:hover {
	border-color: rgba(palette(neutral, 900), 0.5);
}

.c-select:focus {
	border-color: palette(action, 500);
	box-shadow: 0 0 7px -3px rgba(palette(neutral, 0), 0.7);
	box-shadow: 0 0 0 1px -moz-mac-focusring;
	outline: none;
}

.c-select option {
	font-weight: normal;
}