/* Popup rendered in the page, independent of the browser's native select menu. */
.demo-select {
  --select-bg: #fff;
  --select-text: #04243d;
  --select-border: #c8e5f4;
  --select-active-bg: #e8f8ff;
  --select-accent: #006ba3;
  position: relative;
  min-width: 0;
  align-self: center;
  font: inherit;
}
[data-demo="calm"] .demo-select {
  --select-bg: #191512;
  --select-text: #fff8e7;
  --select-border: #73602d;
  --select-active-bg: #3c3019;
  --select-accent: #f5d56a;
}
select[data-demo-select][hidden], .demo-select [hidden] { display: none !important; }
.demo-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--select-border);
  border-radius: 16px;
  background: var(--select-bg);
  color: var(--select-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.demo-select__value { min-width: 0; overflow-wrap: anywhere; }
.demo-select__trigger:focus-visible {
  outline: 3px solid var(--select-accent);
  outline-offset: 3px;
}
.demo-select__arrow { flex: none; font-size: 20px; line-height: 1; }
.demo-select.is-open { z-index: 20; }
.demo-select__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: var(--select-list-height, 260px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--select-border);
  border-radius: 14px;
  background: var(--select-bg);
  color: var(--select-text);
  box-shadow: 0 12px 30px #0003;
}
.demo-select.opens-up .demo-select__list { top: auto; bottom: calc(100% + 8px); }
.demo-select__option {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--select-text);
  background: var(--select-bg);
  font: inherit;
  line-height: 1.5;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.demo-select__option:hover, .demo-select__option.is-active {
  color: var(--select-text);
  background: var(--select-active-bg);
  outline: 1px solid var(--select-accent);
  outline-offset: -1px;
}
.demo-select__option[aria-selected="true"] { font-weight: 700; }
.demo-select__option[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.demo-select__error { display: block; margin-top: 8px; color: var(--select-text); font-size: .875rem; }
.demo-select__trigger[aria-invalid="true"] { border: 2px solid var(--select-accent); }
@media (forced-colors: active) {
  .demo-select__option.is-active { outline: 2px solid Highlight; }
}