:root{
  --scroll-track:#e9ded3;
  --scroll-thumb:#8e604b;
  --scroll-thumb-hover:#6f4636;
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
}

html:has(body.mode-est),
html:has(body[class*="esthetic"]),
html:has(body:not(.mode-ortho) esthetic-header){
  --scroll-track:#17100d;
  --scroll-thumb:#b87e61;
  --scroll-thumb-hover:#d4a48d;
}

html:has(body.mode-ortho){
  --scroll-track:#e9ded3;
  --scroll-thumb:#8e604b;
  --scroll-thumb-hover:#6f4636;
}

*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--scroll-track)}
::-webkit-scrollbar-thumb{
  min-height:48px;
  border:3px solid var(--scroll-track);
  border-radius:999px;
  background:var(--scroll-thumb);
}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
::-webkit-scrollbar-corner{background:var(--scroll-track)}

/* Search menus use a light paper surface even in the dark aesthetic theme. */
.faq-suggestions,.ortho-faq-suggestions{scrollbar-color:#9a654d #eaded4}
.faq-suggestions::-webkit-scrollbar-track,.ortho-faq-suggestions::-webkit-scrollbar-track{background:#eaded4}
.faq-suggestions::-webkit-scrollbar-thumb,.ortho-faq-suggestions::-webkit-scrollbar-thumb{border-color:#eaded4;background:#9a654d}
.faq-suggestions::-webkit-scrollbar-thumb:hover,.ortho-faq-suggestions::-webkit-scrollbar-thumb:hover{background:#734735}

@media(max-width:680px){
  ::-webkit-scrollbar{width:7px;height:7px}
  ::-webkit-scrollbar-thumb{border-width:2px}
}