/* Quick visual fix for Choices.js highlighted/selected options. */
:root {
  --phoenix-choices-item-selected-bg: var(--phoenix-primary);
  --phoenix-choices-item-selected-color: #fff;
}

/* Choices.js's own stylesheet gives the .choices wrapper a 24px margin-bottom, which stacks
   on top of Bootstrap's .mb-3/.mb-4 field spacing and pushes any .form-text hint right below
   it much further down than a plain <select class="form-select"> (no wrapper div) would.
   Let the surrounding Bootstrap layout control spacing instead. */
.choices {
  margin-bottom: 0;
}

.choices__item--selectable.is-highlighted {
  background-color: var(--phoenix-choices-item-selected-bg) !important;
  color: var(--phoenix-choices-item-selected-color) !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--phoenix-choices-item-selected-bg) !important;
  color: var(--phoenix-choices-item-selected-color) !important;
}

.choices__button::after {
  content: "\00D7" !important;
  font-size: 1rem;
  line-height: 1;
  color: var(--phoenix-choices-item-selected-color);
}

.choices__item--selectable {
  transition: background-color 0.2s ease, color 0.2s ease;
}