/* Sizes the vendored select2 widget (js/vendors/select2.min.css) to match this theme's
   Bootstrap .form-control fields, and mirrors the .error state from SASS/_content.scss
   (hand-authored, not compiled by CodeKit — see functions.php for why). */

.form-item .select2-container {
	display: block;
	width: 100% !important;
}

.form-item .select2-container--default .select2-selection--single {
	display: block;
	height: auto;
	min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width, 1px) * 2));
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	background-color: var(--bs-body-bg, #fff);
	border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
	border-radius: var(--bs-border-radius, 0.375rem);
}

.form-item .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	margin-top: 0.1rem;
	line-height: 1.5;
	color: inherit;
}

.form-item .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	top: 0;
	right: 0.5rem;
}

/* error state, matching .error in SASS/_content.scss (color__secondary_orange: rgb(255, 103, 31)) */
.form-item .select2-container.error.select2-container--default .select2-selection--single {
	background-color: #b40303;
	border-color: rgb(255, 103, 31);
}

.form-item .select2-container.error .select2-selection__rendered {
	color: rgb(255, 103, 31);
}