/* Branded dropdowns (see assets/js/select.js). Colours come from tokens. */

.wb-dd { position: relative; display: block; width: 100%; }
.wb-dd__native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }

.wb-dd__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: 48px; padding: 0 var(--space-4);
  border: var(--stroke-1) solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--ink);
  font: 400 16px/24px var(--font-sans); text-align: left; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wb-dd__btn:hover { border-color: var(--ink-muted); }
.wb-dd__btn:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.wb-dd.is-open .wb-dd__btn { border-color: var(--accent); }
.wb-dd.is-disabled .wb-dd__btn { opacity: .45; cursor: not-allowed; }
.wb-dd__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-dd__value.is-placeholder { color: var(--ink-subtle); }
.wb-dd__chev { display: inline-flex; flex: none; color: var(--ink-muted); transition: transform .2s ease; }
.wb-dd.is-open .wb-dd__chev { transform: rotate(180deg); color: var(--accent-ink); }

/* Compact (the guide editor's text style menu) */
.wb-dd--compact { display: inline-block; width: auto; }
.wb-dd--compact .wb-dd__btn { min-height: 36px; height: 36px; gap: var(--space-2); padding: 0 10px 0 12px; font: 600 13px/1 var(--font-sans); min-width: 132px; }

/* The option list floats above everything (the kit allows shadows on floating menus). */
.wb-dd__list {
  position: fixed; z-index: 1000; max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none;
  border: var(--stroke-1) solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-1); color: var(--ink); box-shadow: var(--shadow-2);
  font: 400 15px/22px var(--font-sans); outline: none;
  animation: wb-dd-in .14s ease-out;
}
/* Focus sits on the list for the keyboard; the highlighted option shows where you are. */
.wb-dd__list:focus, .wb-dd__list:focus-visible { outline: none; }
.wb-dd__list.is-above { animation-name: wb-dd-in-up; }
@keyframes wb-dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes wb-dd-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.wb-dd__opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 40px; padding: 8px 10px 8px 12px; border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
}
.wb-dd__opt.is-active { background: var(--surface-2); }
.wb-dd__opt[aria-selected="true"] { color: var(--accent-ink); font-weight: 700; }
.wb-dd__opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.wb-dd__text { min-width: 0; }
.wb-dd__check { display: inline-flex; flex: none; visibility: hidden; color: var(--accent-ink); }
.wb-dd__opt[aria-selected="true"] .wb-dd__check { visibility: visible; }
.wb-dd__list::-webkit-scrollbar { width: 10px; }
.wb-dd__list::-webkit-scrollbar-thumb { border: 3px solid var(--surface-1); border-radius: 10px; background: var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
  .wb-dd__list { animation: none; }
  .wb-dd__chev { transition: none; }
}