:root {
  --scrollbar-color-light: var(--shade-40);
  --scrollbar-color-dark: var(--shade-05);
  --scrollbar-color-hover: var(--shade-20);
}

/* Chrome / Safari */
body.slite-scrollbar ::-webkit-scrollbar {
  width: 12px;
  background-color: transparent;
}

body.slite-scrollbar ::-webkit-scrollbar-thumb {
  width: 12px;
  box-shadow: 0 0 0 8px var(--scrollbar-color-light) inset;
  border-radius: 6px;
  border: solid 2px transparent;
}

body.slite-scrollbar.dark-mode ::-webkit-scrollbar-thumb {
  box-shadow: 0 0 0 8px var(--scrollbar-color-dark) inset;
}

body.slite-scrollbar ::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 0 8px var(--scrollbar-color-hover) inset;
}

/* Firefox */
body.slite-scrollbar {
  scrollbar-color: var(--scrollbar-color-light) transparent;
}

body.slite-scrollbar.dark-mode {
  scrollbar-color: var(--scrollbar-color-dark) transparent;
}