/*
 * Searchable Nationality / Business-suburb dropdowns on the profile + register
 * forms.
 *
 * BuddyBoss sizes the native controls on those forms with
 * `#buddypress #profile-edit-form input[type="text"], #profile-edit-form select
 * { height: 50px; width: 100%; }`, so the selectWoo/select2 box is matched to
 * the same 50px height, full width, border, radius and focus treatment, using
 * the theme's own custom properties.
 *
 * Everything is scoped to the .idu-select2 / .idu-select2-dropdown classes that
 * the init script sets via containerCssClass/dropdownCssClass, so no other
 * select2 instance on the site (group invites, messages, WooCommerce) is
 * affected.
 */

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

.select2-container.idu-select2 .select2-selection--single {
	height: var(--idu-select2-h, 50px) !important;
	padding: 0 15px;
	border: 1px solid var(--bb-content-border-color, #e7e9ec);
	border-radius: var(--bb-input-radius, 4px);
	background-color: var(--bb-content-background-color, #fff);
	outline: none;
}

.select2-container.idu-select2 .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: calc(var(--idu-select2-h, 50px) - 2px);
	color: var(--bb-body-text-color, #4d5c6d);
	font-size: inherit;
}

.select2-container.idu-select2 .select2-selection--single .select2-selection__placeholder {
	color: var(--bb-body-secondary-text-color, #a3a5a9);
}

.select2-container.idu-select2 .select2-selection--single .select2-selection__arrow {
	height: calc(var(--idu-select2-h, 50px) - 2px);
	right: 12px;
}

/* Focus / open state mirrors the native inputs. */
.select2-container.idu-select2.select2-container--open .select2-selection--single,
.select2-container.idu-select2.select2-container--focus .select2-selection--single {
	border-color: var(--bb-input-focus-border-color, #007cff);
	box-shadow: var(--bb-input-focus-shadow, none);
}

/* Dropdown panel. */
.idu-select2-dropdown {
	border-color: var(--bb-content-border-color, #e7e9ec);
	border-radius: var(--bb-input-radius, 4px);
	overflow: hidden;
}

.idu-select2-dropdown .select2-search--dropdown {
	padding: 10px;
}

.idu-select2-dropdown .select2-search--dropdown .select2-search__field {
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--bb-content-border-color, #e7e9ec);
	border-radius: var(--bb-input-radius, 4px);
	background-color: var(--bb-content-background-color, #fff);
	color: var(--bb-body-text-color, #4d5c6d);
}

.idu-select2-dropdown .select2-results__option {
	padding: 9px 14px;
	font-size: 14px;
	color: var(--bb-body-text-color, #4d5c6d);
}

.idu-select2-dropdown .select2-results__option--highlighted[aria-selected],
.idu-select2-dropdown .select2-results__option--highlighted[data-selected] {
	background-color: var(--bb-primary-color, #007cff);
	color: #fff;
}

.idu-select2-dropdown .select2-results__option[aria-selected="true"],
.idu-select2-dropdown .select2-results__option[data-selected="true"] {
	background-color: var(--bb-content-alternate-background-color, #f5f7f9);
	color: var(--bb-headings-color, #122b46);
}

/* Fallback: profile edit form. The container carries no theme class here
   (the selector really is `.select2-container .select2-selection--single`),
   so size it by location as well as by our own class, in case the class is
   ever not applied. */
#buddypress #profile-edit-form .select2-container { width: 100% !important; max-width: 100%; }
#buddypress #profile-edit-form .select2-container .select2-selection--single {
	height: var(--idu-select2-h, 50px) !important;
	padding: 0 15px;
	border: 1px solid var(--bb-content-border-color, #e7e9ec);
	border-radius: var(--bb-input-radius, 4px);
	background-color: var(--bb-content-background-color, #fff);
}
#buddypress #profile-edit-form .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: calc(var(--idu-select2-h, 50px) - 2px);
	color: var(--bb-body-text-color, #4d5c6d);
}
#buddypress #profile-edit-form .select2-container .select2-selection--single .select2-selection__arrow {
	height: calc(var(--idu-select2-h, 50px) - 2px);
	right: 12px;
}