.select {
	@include btn-focus-state;
	position: relative;
	height: $tap-height;
	color: $c-primary;

	&.select-small {
		height: $tap-height-small;
	}

	&.select--has-error {
		border-color: $c-ui-critical;
		background-image: none;
		background-color: $c-ui-critical-light;

		+ .text-input__helper {
			color: $c-ui-critical;
			opacity: 1;
		}
	}

	select {
		@include btn-focus-state;
		width: 100%;
		height: 100%;
		padding: 0 spacing('extra-loose') 0 spacing('tight');
		font-family: inherit;
		border: 1px solid $c-primary;
		color: inherit;
		background: transparent;
		border-radius: $border-radius-input;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		cursor: pointer;

		&[disabled] {
			color: rgba($c-primary, 0.5);
			border-color: rgba($c-primary, 0.5);
			cursor: not-allowed;

			&[readonly] {
				border: none;
				background-color: $c-grey-00;
				color: $c-text-light;

				+ .select__icon {
					display: none;
				}
			}
		}
	}
}

.select__icon {
	pointer-events: none;
	position: absolute;
	top: 50%;
	right: spacing('tight');
	transform: translate(0, -50%);
	fill: $c-primary;
}

.select.select-simple {
	background-image: none;
	color: $c-primary;

	select {
		border: none;
	}

	&.select--has-error {
		color: $c-text;
	}
}

form {
	.select {
		color: $c-text;

		select {
			border-color: $c-border;
			background-color: $c-bg-light;
		}
	}

	.select__icon {
		fill: $c-text-icon;
	}
}