// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/.

.form-select {
	--# {
		$prefix
	}

	form-select-bg-img: # {
		escape-svg($form-select-indicator)
	}

	;
	display: block;
	width: 100%;
	padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
	font-family: $form-select-font-family;
	@include font-size($form-select-font-size);
	font-weight: $form-select-font-weight;
	line-height: $form-select-line-height;
	color: $form-select-color;
	appearance: none;
	background-color: $form-select-bg;
	background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
	background-repeat: no-repeat;
	background-position: $form-select-bg-position;
	background-size: $form-select-bg-size;
	border: $form-select-border-width solid $form-select-border-color;
	@include border-radius($form-select-border-radius, 0);
	@include box-shadow($form-select-box-shadow);
	@include transition($form-select-transition);

	&:focus {
		border-color: $form-select-focus-border-color;
		outline: 0;

		@if $enable-shadows {
			@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
		}

		@else {
			// Avoid using mixin so we can pass custom focus shadow properly box-shadow: $form-select-focus-box-shadow;
		}
	}

	&[multiple],
	&[size]:not([size="1"]) {
		padding-right: $form-select-padding-x;
		background-image: none;
	}

	&:disabled {
		color: $form-select-disabled-color;
		background-color: $form-select-disabled-bg;
		border-color: $form-select-disabled-border-color;
	}
	// Remove outline from select box in FF
	&:-moz-focusring {
		color: transparent;
		text-shadow: 0 0 0 $form-select-color;
	}
}

.form-select-sm {
	padding-top: $form-select-padding-y-sm;
	padding-bottom: $form-select-padding-y-sm;
	padding-left: $form-select-padding-x-sm;
	@include font-size($form-select-font-size-sm);
	@include border-radius($form-select-border-radius-sm);
}

.form-select-lg {
	padding-top: $form-select-padding-y-lg;
	padding-bottom: $form-select-padding-y-lg;
	padding-left: $form-select-padding-x-lg;
	@include font-size($form-select-font-size-lg);
	@include border-radius($form-select-border-radius-lg);
}