/******************************************************************************
 * CRDM Select2 single-select theme
 *
 * Opt in with Select2's theme: "crdm" in the UI Lab and approved production
 * controls. Existing default-themed Select2 controls are unchanged.
 ******************************************************************************/

.select2-container--crdm {
	max-width: 100%;
}

.select2-container--crdm .select2-selection--single {
	box-sizing: border-box;
	height: 38px;
	color: var(--crdm-text-value);
	background: var(--crdm-surface-control);
	border: 1px solid var(--crdm-border-strong);
	border-radius: var(--crdm-radius-sm);
	font-family: var(--crdm-font-ui);
	font-size: var(--crdm-font-size-control);
	font-weight: 400;
}

.select2-container--crdm .select2-selection--single .select2-selection__rendered {
	padding: 0 34px 0 10px;
	color: inherit;
	background: transparent;
	line-height: 36px;
}

.select2-container--crdm .select2-selection--clearable .select2-selection__rendered {
	padding-right: 58px;
}

.select2-container--crdm .select2-selection__placeholder {
	color: var(--crdm-text-faint);
	font-style: normal;
}

.select2-container--crdm .select2-selection__arrow {
	position: absolute;
	top: 1px;
	right: 12px;
	display: flex;
	width: 12px;
	height: 36px;
	align-items: center;
	justify-content: center;
}

.select2-container--crdm .select2-selection__arrow b {
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border: solid var(--crdm-brand-gold);
	border-width: 0 1.75px 1.75px 0;
	transform: rotate(45deg);
}

.select2-container--crdm.select2-container--open .select2-selection__arrow b {
	margin-top: 4px;
	transform: rotate(225deg);
}

.select2-container--crdm .select2-selection__clear {
	position: absolute;
	top: 1px;
	right: 32px;
	width: 20px;
	height: 36px;
	padding: 0;
	color: var(--crdm-text-muted);
	background: transparent;
	border: 0;
	font: inherit;
	cursor: pointer;
}

.select2-container--crdm .select2-selection__clear:hover,
.select2-container--crdm .select2-selection__clear:focus-visible {
	color: var(--crdm-brand-gold);
}

.select2-container--crdm.select2-container--focus .select2-selection--single,
.select2-container--crdm.select2-container--open .select2-selection--single,
.select2-container--crdm .select2-selection--single:focus {
	border-color: var(--crdm-info);
	box-shadow: 0 0 0 2px rgba(var(--crdm-info-rgb), .16);
	outline: none;
}

.select2-container--crdm .select2-dropdown {
	color: var(--crdm-text-value);
	background: var(--crdm-surface-raised);
	border: 1px solid var(--crdm-border-strong);
	border-radius: var(--crdm-radius-sm);
	box-shadow: var(--crdm-shadow-popover);
	font-family: var(--crdm-font-ui);
	font-size: var(--crdm-font-size-control);
	overflow: hidden;
}

.select2-container--crdm .select2-search--dropdown {
	padding: 8px;
}

.select2-container--crdm .select2-search__field {
	box-sizing: border-box;
	height: 38px;
	padding: 0 10px;
	color: var(--crdm-text-value);
	background: var(--crdm-surface-control);
	border: 1px solid var(--crdm-border-strong);
	border-radius: var(--crdm-radius-sm);
	font: inherit;
}

.select2-container--crdm .select2-search__field:focus {
	border-color: var(--crdm-info);
	box-shadow: 0 0 0 2px rgba(var(--crdm-info-rgb), .16);
	outline: none;
}

.select2-container--crdm .select2-results > .select2-results__options {
	max-height: 200px;
	overflow-y: auto;
}

.select2-container--crdm .select2-results__option {
	padding: 4px 10px;
	color: var(--crdm-text-value);
	font: inherit;
	line-height: 1.25;
}

.select2-container--crdm .select2-results__option--highlighted {
	color: var(--crdm-text-value);
	background: var(--crdm-surface-option-highlight);
}

.select2-container--crdm .select2-results__option--selected {
	color: var(--crdm-text-on-accent);
	background: var(--crdm-brand-gold);
}

.select2-container--crdm .select2-results__message,
.select2-container--crdm .select2-results__option--disabled,
.select2-container--crdm .select2-results__option[aria-disabled="true"] {
	color: var(--crdm-text-muted);
}

.select2-container--crdm.select2-container--disabled .select2-selection--single {
	opacity: .6;
	cursor: not-allowed;
}