/* 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__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;
}