/*
 *  Select2 Styling with Bootstrap 5 Integration and Phoenix Theme
 *
 *  This CSS file provides styling for Select2 dropdowns to integrate seamlessly
 *  with Bootstrap 5 and a Phoenix theme, improving the user experience.  It uses
 *  CSS variables for theme consistency and maintainability.
 */

/*
 *  General Select2 Styling
 */

/* Style the search field */
.select2-search__field {
	font-size: 0.8rem !important;
	border: var(--phoenix-border-width) solid var(--phoenix-border-color) !important;
	background-color: var(--phoenix-emphasis-bg) !important;
}

.select2-search__field::placeholder {
	color: var(--phoenix-body-color) !important;
}

.select2-search.select2-search--dropdown {
	background-color: var(--phoenix-emphasis-bg) !important;
}

.select2-results {
	background-color: var(--phoenix-emphasis-bg) !important;
}

.select2-search__field:focus {
	border-color: #3874ff !important; /* Keep this specific color */
	color: var(--phoenix-body-color) !important;
	background-color: var(--phoenix-emphasis-bg) !important;
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(var(--phoenix-primary-rgb), 0.25) !important; /* Simplified box-shadow */
}

/* Style the dropdown border and background */
.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below {
	border: var(--phoenix-border-width) solid var(--phoenix-border-color);
	background-color: var(--phoenix-emphasis-bg);
	color: var(--phoenix-body-color) !important;
}

/* Style the dropdown options */
.select2-container--bootstrap-5
	.select2-dropdown
	.select2-results__options
	.select2-results__option {
	/* General option styling */
	font-size: 0.8rem;
	color: var(--phoenix-body-color) !important; /* Consistent text color */
	background-color: var(--phoenix-emphasis-bg) !important; /* Consistent background color */
}

.select2-container--bootstrap-5
	.select2-dropdown
	.select2-results__options
	.select2-results__option.select2-results__option--highlighted {
	background-color: var(--phoenix-primary-bg-subtle) !important;
}

.select2-container--bootstrap-5
	.select2-dropdown
	.select2-results__options
	.select2-results__option.select2-results__option--selected {
	background-color: var(--phoenix-secondary-bg) !important;
}

/*
 *  Select2 with Bootstrap 5 Specific Styling
 */

/* Style the main selection container (single and multiple) */
.select2-container--bootstrap-5 .select2-selection {
	font-size: 0.8rem;
	border: var(--phoenix-border-width) solid var(--phoenix-border-color);
	background-color: var(--phoenix-emphasis-bg);
	color: var(--phoenix-body-color) !important;
}

.select2-selection__placeholder {
	color: var(--phoenix-body-color) !important;
}

.select2-container--bootstrap-5 .select2-selection:focus, /* Combined focus and open states */
.select2-container--bootstrap-5.select2-container--open .select2-selection {
	border-color: #3874ff !important; /* Keep this specific color */
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(var(--phoenix-primary-rgb), 0.25) !important; /* Simplified box-shadow */
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
	/* Single select rendered text */
	color: var(--phoenix-body-color) !important;
}

/* Select2 Multi-select Twitching Fix Don't Touch */
.select2-container--bootstrap-5 .select2-selection:not(.select2-selection--single) {
	padding: 2.5px 1rem !important;
}

.select2-container .select2-selection--multiple {
	align-items: center !important;
	display: flex !important;
}

.select2-container--bootstrap-5.select2-container--open.select2-container--below
	.select2-selection {
	border-bottom: 1px solid var(--phoenix-border-color) !important;
}
/* Select2 Multi-select Twitching Fix End Don't Touch */

/*
 *  Multi-Select Specific Styling
 */

.select2-container--bootstrap-5
	.select2-selection--multiple
	.select2-selection__rendered
	.select2-selection__choice {
	display: flex;
	align-items: center;
	padding: 0.1em 0.2em;
	margin: 0.15rem 0.6rem 0.15rem 0.15rem; /* Combined and adjusted margins */
	font-size: 0.8rem !important;
	cursor: auto;
	border: var(--phoenix-border-width) solid var(--phoenix-border-color);
	background-color: var(--phoenix-emphasis-bg);
	color: var(--phoenix-body-color);
	border-radius: 0.2rem;
}

.select2-container--bootstrap-5
	.select2-selection--multiple
	.select2-selection__rendered
	.select2-selection__choice
	.select2-selection__choice__remove {
	width: 10px;
	height: 10px;
	font-size: 0.8rem !important;
	padding: 0.15em;
	margin-left: 0.15rem;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

.select2-selection__clear {
	color: var(--phoenix-body-color) !important;
}

.form-select {
	padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
	min-height: calc(1.5em + 1rem + 2px) !important;
}