@use '../utilities/colors' as *;
/* The container must be positioned relative: */
.custom-select {
	position: relative;
	min-width: 180px;
	border-radius: 25px;
	border: 1px solid rgba($primary-color, .5);
	display: inline-flex;
	align-items: center;
	-webkit-touch-callout: none; // iOS Safari
	-webkit-user-select: none; // Safari
	-khtml-user-select: none; // Konqueror HTML
	-moz-user-select: none; // Old versions of Firefox
	-ms-user-select: none; // Internet Explorer/Edge
	user-select: none; // Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox
	background-color: #FFF;

	&:before {
		content: "\e92e";
		font-family: 'icomoon';
		position: absolute;
		right: .5rem;
		color: var(--primary-color);
		opacity: .5;
		z-index: 0;
	}

	select {
		height: 46px;
		border-radius: 36px;
		width: 100%;
		appearance: none;
		border: 0;
		cursor: pointer;
		padding-left: 1rem;
		padding-right: 3rem;
		background-color: rgba($primary-color, 0);
		z-index: 1;
	}

	&--medium {
		height: 40px;

		select {
			height: 100%;
		}
	}

}