/* The dropdown that replaces a native select popup inside a dialog.
   The list is position:fixed on document.body, so no ancestor's overflow can
   clip it — which is what made a select near a dialog's bottom edge look cut
   off. */

.sd-select {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 11px; border-radius: 9px; font: inherit; font-size: 13.5px;
  text-align: left; cursor: pointer; color: inherit;
  border: 1px solid rgba(127, 137, 158, 0.3); background: transparent;
}
.sd-select:hover { border-color: rgba(127, 137, 158, 0.5); }
.sd-select[aria-expanded="true"] { border-color: #2f6df6; box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.14); }
.sd-select:disabled { opacity: .55; cursor: default; }
.sd-select > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-select > i {
  flex: none; width: 8px; height: 8px; margin-right: 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); opacity: .5;
}
.sd-select[aria-expanded="true"] > i { transform: rotate(225deg) translate(-1px, -1px); }

.sd-select-list {
  z-index: 2000;
  overflow-y: auto;
  overscroll-behavior: contain;   /* the wheel stays in the list */
  padding: 5px;
  border-radius: 11px;
  background: var(--panel, #fff);
  border: 1px solid rgba(127, 137, 158, 0.28);
  box-shadow: 0 18px 44px rgba(8, 10, 16, 0.22);
}
.sd-select-list button {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 7px;
  font: inherit; font-size: 13.5px; background: transparent; color: inherit; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-select-list button:hover { background: rgba(127, 137, 158, 0.12); }
.sd-select-list button.is-selected { background: rgba(47, 109, 246, 0.12); color: #2f6df6; font-weight: 500; }

html[data-theme="dark"] {
  .sd-select-list { background: #1a2029; border-color: rgba(127, 137, 158, 0.35); }
}