/* Shared visible scrollbars.
 * Styling WebKit scrollbars opts macOS browsers out of transient overlay bars,
 * while Firefox uses the standardized color properties below.
 */
:root {
  --scrollbar-track: #edf1f5;
  --scrollbar-thumb: #8a95a5;
  --scrollbar-thumb-hover: #687487;
}

html,
body,
body :where(*) {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: auto;
}

html,
body,
body :where(.table-wrap, [class*="-scroll"], [class*="-listbox"], [class*="-popover"], dialog) {
  scrollbar-gutter: stable;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
body :where(*)::-webkit-scrollbar {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  -webkit-appearance: none !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
body :where(*)::-webkit-scrollbar-track {
  background: var(--scrollbar-track) !important;
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
body :where(*)::-webkit-scrollbar-thumb {
  min-width: 40px;
  min-height: 40px;
  border: 3px solid var(--scrollbar-track) !important;
  border-radius: 999px;
  background: var(--scrollbar-thumb) !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
body :where(*)::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover) !important;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
body :where(*)::-webkit-scrollbar-corner {
  background: var(--scrollbar-track) !important;
}