/* /static/css/Custom_scroll/custom_scroll.css */

:root {
  --scrollbar-size: 8px;
  --scrollbar-radius: 9999px;

  --scrollbar-thumb: rgba(148, 163, 184, .55);
  --scrollbar-thumb-hover: rgba(59, 130, 246, .75);
  --scrollbar-track: transparent;
}

html.dark {
  --scrollbar-thumb: rgba(148, 163, 184, .45);
  --scrollbar-thumb-hover: rgba(191, 219, 254, .8);
}

/* Y */
.custom-scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* X */
.custom-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chrome / Edge / Safari */
.custom-scroll-y::-webkit-scrollbar {
  width: var(--scrollbar-size);
}

.custom-scroll-x::-webkit-scrollbar {
  height: var(--scrollbar-size);
}

.custom-scroll-y::-webkit-scrollbar-track,
.custom-scroll-x::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.custom-scroll-y::-webkit-scrollbar-thumb,
.custom-scroll-x::-webkit-scrollbar-thumb {
  border-radius: var(--scrollbar-radius);
  background-color: var(--scrollbar-thumb);
}

.custom-scroll-y::-webkit-scrollbar-thumb:hover,
.custom-scroll-x::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}