// Dropdown select box
//
// Form control styles for this component are contained in:
// `components/less/objects/forms.less`
// However, a few specific overrides are described here.
// -----------------------------------------------------------
@import '../less/variables/colors.less';

.o-dropdown {
	position: relative;

	& > .o-form-control {
		padding: 4px 25px 4px 12px; // override padding to fit down arrow
	}

	& > select {
		appearance: none;
	}

	// Fix appearence in IE11 (VWR-5000).
	& > select::-ms-expand {
		display: none;
	}

	& > .o-text-validation {
		right: 0;
	}

	&::after {
		content: '\f107';
		font: normal normal 400 14px/1 'Font Awesome 5 Pro';
		font-size: 14px;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		pointer-events: none;
		position: absolute;
		right: 10px;
		text-rendering: auto;
		top: 50%;
		transform: translateY(-50%);
	}
}

// Fix Firefox mysterious left padding on <select> elements.
/* stylelint-disable-next-line function-url-quotes */
@-moz-document url-prefix() {
	.o-dropdown > .o-form-control {
		padding-left: 8px;
	}
}

// Themeing
.o-dropdown.is-dark-theme {
	& select {
		background-color: @color-gray-x-dark;
		border: 2px solid @color-gray-light;
		border-radius: 5px;
		color: #fff;
		font-size: 14px;
		height: 33px;
		width: 100%;
	}

	&::after {
		color: #fff;
	}
}