:root {
  --app-scrollbar-size: 0.7rem;
  --app-scrollbar-track: rgba(255, 255, 255, 0.025);
  --app-scrollbar-thumb: rgba(132, 151, 166, 0.34);
  --app-scrollbar-thumb-hover: rgba(154, 173, 188, 0.48);
  --app-scrollbar-thumb-border: rgba(25, 37, 48, 0.95);
}

html:has(> body.light-theme),
body.light-theme {
  --app-scrollbar-track: rgba(0, 0, 20, 0.045);
  --app-scrollbar-thumb: rgba(94, 105, 124, 0.34);
  --app-scrollbar-thumb-hover: rgba(80, 92, 112, 0.5);
  --app-scrollbar-thumb-border: rgba(255, 255, 255, 0.95);
}

html {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

.app-scroll {
  overflow: auto;
}

.app-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}

.app-scroll-y {
  overflow-x: hidden;
  overflow-y: auto;
}

.app-scroll-contained {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:where(
  .app-scroll,
  .app-scroll-x,
  .app-scroll-y,
  .app-scroll-contained,
  .sidebar,
  .table-wrapper,
  .stats-table-container,
  .project-table,
  .cs-table,
  .dash-table,
  .history-table-wrap,
  .push-log-container,
  .promo-board__scroller,
  .promo-table-wrap,
  .lp-table-wrap,
  .list-dashboard-table,
  .ls-subtabs,
  .ls-table-shell,
  .vb-tabs,
  .vb-tbl-scroll,
  .vb-top-history,
  .vb-xbar,
  .vb-cal__dates-list,
  .suggestions
) {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

@supports selector(::-webkit-scrollbar) {
  :where(html, .app-scroll, .app-scroll-x, .app-scroll-y, .app-scroll-contained, .sidebar, .table-wrapper, .stats-table-container, .project-table, .cs-table, .dash-table, .history-table-wrap, .push-log-container, .promo-board__scroller, .promo-table-wrap, .lp-table-wrap, .list-dashboard-table, .ls-subtabs, .ls-table-shell, .vb-tabs, .vb-tbl-scroll, .vb-top-history, .vb-xbar, .vb-cal__dates-list, .suggestions)::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
  }

  :where(html, .app-scroll, .app-scroll-x, .app-scroll-y, .app-scroll-contained, .sidebar, .table-wrapper, .stats-table-container, .project-table, .cs-table, .dash-table, .history-table-wrap, .push-log-container, .promo-board__scroller, .promo-table-wrap, .lp-table-wrap, .list-dashboard-table, .ls-subtabs, .ls-table-shell, .vb-tabs, .vb-tbl-scroll, .vb-top-history, .vb-xbar, .vb-cal__dates-list, .suggestions)::-webkit-scrollbar-track {
    background: var(--app-scrollbar-track);
  }

  :where(html, .app-scroll, .app-scroll-x, .app-scroll-y, .app-scroll-contained, .sidebar, .table-wrapper, .stats-table-container, .project-table, .cs-table, .dash-table, .history-table-wrap, .push-log-container, .promo-board__scroller, .promo-table-wrap, .lp-table-wrap, .list-dashboard-table, .ls-subtabs, .ls-table-shell, .vb-tabs, .vb-tbl-scroll, .vb-top-history, .vb-xbar, .vb-cal__dates-list, .suggestions)::-webkit-scrollbar-thumb {
    border: 2px solid var(--app-scrollbar-thumb-border);
    border-radius: 999px;
    background: var(--app-scrollbar-thumb);
  }

  :where(html, .app-scroll, .app-scroll-x, .app-scroll-y, .app-scroll-contained, .sidebar, .table-wrapper, .stats-table-container, .project-table, .cs-table, .dash-table, .history-table-wrap, .push-log-container, .promo-board__scroller, .promo-table-wrap, .lp-table-wrap, .list-dashboard-table, .ls-subtabs, .ls-table-shell, .vb-tabs, .vb-tbl-scroll, .vb-top-history, .vb-xbar, .vb-cal__dates-list, .suggestions)::-webkit-scrollbar-thumb:hover {
    background: var(--app-scrollbar-thumb-hover);
  }
}

@media (forced-colors: active) {
  html,
  :where(.app-scroll, .app-scroll-x, .app-scroll-y, .app-scroll-contained, .sidebar, .table-wrapper, .stats-table-container, .project-table, .cs-table, .dash-table, .history-table-wrap, .push-log-container, .promo-board__scroller, .promo-table-wrap, .lp-table-wrap, .list-dashboard-table, .ls-subtabs, .ls-table-shell, .vb-tabs, .vb-tbl-scroll, .vb-top-history, .vb-xbar, .vb-cal__dates-list, .suggestions) {
    scrollbar-color: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}