/**
 * Job search page — Select2 overrides for the Professional Area multi-select
 * (jobs/template-parts/search-form.php), matching the live site. Loads after
 * the base Select2 stylesheet (registered as its dependency in
 * jobs/assets.php).
 */

.select2-container--default .select2-selection--multiple {
	padding-bottom: 0;
}

.select2-selection--multiple {
	padding: 10px;
	height: 48px;
}

.select2-selection__clear span {
	font-size: 2rem;
	font-weight: 400;
}

.select2-selection__rendered {
	font-weight: 400;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
	margin-top: -10px;
}

.select2-container--default .select2-results__option--selected {
	background-color: var(--ds-color-alias-body-background-light);
	color: var(--ds-color-monochrome-darker);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--ds-color-palette-brand-4);
	color: var(--ds-color-alias-cta-primary-default-text);
}

.select2-search__field {
	margin-bottom: 6px;
	line-height: 1rem;
}

.select2-container {
	width: 100% !important;
}

/* Anchor for the dropdown — it is attached to the field wrapper via
   dropdownParent (search.js / content-latest-roles.js / home-hero-search.js),
   so the wrapper must be the containing block. */
.js-sbjobs-search-form .ds-c-select,
.js-latest-roles-form .ds-c-select,
.js-home-hero-search .ds-c-select {
	position: relative;
}