@function str-replace($string, $search, $replace: '') {
	$index: str-index($string, $search);

	@return if(
		$index,
		str-slice($string, 1, $index - 1) + $replace +
			str-replace(str-slice($string, $index + str-length($search)), $search, $replace),
		$string
	);
}

@function svg-url($svg) {
	@if not str-index($svg, xmlns) {
		$svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
	}

	$encoded: '';
	$slice: 2000;
	$index: 0;
	$loops: ceil(str-length($svg) / $slice);

	@for $i from 1 through $loops {
		$chunk: str-slice($svg, $index, $index + $slice - 1);
		$chunk: str-replace($chunk, '"', "'");
		$chunk: str-replace($chunk, '%', '%25');
		$chunk: str-replace($chunk, '#', '%23');
		$chunk: str-replace($chunk, '{', '%7B');
		$chunk: str-replace($chunk, '}', '%7D');
		$chunk: str-replace($chunk, '<', '%3C');
		$chunk: str-replace($chunk, '>', '%3E');
		$encoded: #{$encoded}#{$chunk};
		$index: $index + $slice;
	}

	@return url('data:image/svg+xml,#{$encoded}');
}

/*
 * Cross browser mixin for native select field style.
 * @param: $text-color       - Color of the text
 * @param: $border-color     - Color of the border
 * @param: $background-color - Color of the background
 * @param: $shadow-color     - Color of the box-shadow
 * Live demo: https://codepen.io/scriptex/pen/jXjWbQ
 */

$triangle-before: '<svg width="19" height="11" viewBox="0 0 19 11"><path fill="';
$triangle-after: '" d="M18.6067065,0.422572289 C18.3723515,0.182891566 18.0945495,0.0631506024 17.7735597,0.0631506024 L1.18500341,0.0631506024 C0.863883959,0.0631506024 0.586276451,0.182891566 0.351726962,0.422572289 C0.117177474,0.662518072 0,0.946198795 0,1.27414458 C0,1.6020241 0.117177474,1.88570482 0.351726962,2.12545181 L8.64603754,10.6012169 C8.88084642,10.8408976 9.15845392,10.9609036 9.47931399,10.9609036 C9.80017406,10.9609036 10.078041,10.8408976 10.3123959,10.6012169 L18.6067065,2.12538554 C18.8409966,1.88570482 18.958628,1.6020241 18.958628,1.27407831 C18.958628,0.946198795 18.8409966,0.662518072 18.6067065,0.422572289 Z"/></svg>';

@mixin select($text-color: #444, $border-color: #444, $background-color: #fff, $shadow-color: #000) {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.3;
	color: $text-color;
	font-weight: 700;
	width: 100%;
	max-width: 100%;
	display: block;
	box-sizing: border-box;
	padding: 0.6em 1.4em 0.5em 0.8em;
	border: 1px solid $border-color;
	margin: 0;
	background-color: $background-color;
background-image: svg-url($triangle-before + $text-color + $triangle-after),
		linear-gradient(to bottom, $background-color 0%, darken($background-color, 30%) 100%);
	background-repeat: no-repeat, repeat;
	background-position: right 0.7em top 50%, 0 0;
	background-size: 0.65em auto, 100%;
	border-radius: 0.5em;
	box-shadow: 0 1px 0 1px rgba($shadow-color, 0.04);
	appearance: none;

	&::-ms-expand {
		display: none;
	}

	&:hover {
		border-color: darken($border-color, 50%);
	}

	&:focus {
		color: darken($text-color, 50%);
		border-color: $border-color;
		outline: 0 none;
		box-shadow: 0 0 1px 3px rgba($shadow-color, 0.7);
		box-shadow: 0 0 0 3px -moz-mac-focusring;
	}

	option {
		font-weight: normal;
	}
}

// Pen styling

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

select {
  @include select();
  max-width: 300px;
}