/* Searchable native <select> enhancement */
.ss-wrap {
  position: relative;
  width: 100%;
}

.ss-wrap select.ss-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ss-input {
  width: 100%;
}

/* List is appended to body (fixed) so overflow:auto parents cannot clip it. */
.ss-list {
  display: none;
  position: fixed;
  z-index: 2000;
  max-height: min(16rem, 50vh);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.ss-list.open {
  display: block;
}

.ss-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.4rem 0.75rem;
  font-size: inherit;
  color: inherit;
}

.ss-option:hover,
.ss-option.active {
  background: var(--bs-primary, #0d6efd);
  color: #fff;
}

.ss-option.muted {
  color: var(--bs-secondary-color, #6c757d);
  pointer-events: none;
}

.ss-option.muted:hover,
.ss-option.muted.active {
  background: transparent;
  color: var(--bs-secondary-color, #6c757d);
}