/* Unified native and plugin scrollbars for the whole CRM interface. */
:root {
  --rise-scrollbar-track: rgba(91, 112, 148, 0.07);
  --rise-scrollbar-thumb: #9aaac1;
  --rise-scrollbar-thumb-end: #7f93b0;
  --rise-scrollbar-thumb-hover: #7189ab;
  --rise-scrollbar-thumb-active: #5e74dc;
}

html[data-bs-theme="dark"],
html.theme-dark,
body.theme-dark,
.theme-dark {
  --rise-scrollbar-track: rgba(218, 228, 244, 0.06);
  --rise-scrollbar-thumb: #59677b;
  --rise-scrollbar-thumb-end: #48576d;
  --rise-scrollbar-thumb-hover: #71829a;
  --rise-scrollbar-thumb-active: #7891ff;
}

/* Firefox. The property is harmless on elements that don't scroll. */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--rise-scrollbar-thumb) var(--rise-scrollbar-track) !important;
}

/* Chromium, Edge and Safari. The transparent border leaves a slim 4px core. */
*::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

*::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

*::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: var(--rise-scrollbar-track) !important;
}

*::-webkit-scrollbar-thumb {
  min-width: 34px;
  min-height: 34px;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--rise-scrollbar-thumb), var(--rise-scrollbar-thumb-end)) padding-box !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--rise-scrollbar-thumb-hover) padding-box !important;
}

*::-webkit-scrollbar-thumb:active {
  background: var(--rise-scrollbar-thumb-active) padding-box !important;
}

*::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Perfect Scrollbar used by the sidebar and several long panels. */
.ps__rail-y {
  width: 8px !important;
  background: transparent !important;
}

.ps__rail-x {
  height: 8px !important;
  background: transparent !important;
}

.ps__thumb-y {
  right: 2px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: var(--rise-scrollbar-thumb) !important;
}

.ps__thumb-x {
  bottom: 2px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: var(--rise-scrollbar-thumb) !important;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  width: 5px !important;
  background: var(--rise-scrollbar-thumb-hover) !important;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  height: 5px !important;
  background: var(--rise-scrollbar-thumb-hover) !important;
}

/* mCustomScrollbar is still used by a few legacy navigation blocks. */
.mCSB_scrollTools {
  width: 8px !important;
  opacity: 1 !important;
}

.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px !important;
  border-radius: 999px !important;
  background: var(--rise-scrollbar-track) !important;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 4px !important;
  border-radius: 999px !important;
  background: var(--rise-scrollbar-thumb) !important;
  opacity: 1 !important;
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background: var(--rise-scrollbar-thumb-hover) !important;
}

@media (hover: none) and (pointer: coarse) {
  *::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
  }

  *::-webkit-scrollbar-thumb {
    border-width: 1px !important;
  }
}