html .no-bg-scrollbar {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  scrollbar-width: thin;
}

html .no-bg-scrollbar::-webkit-scrollbar {
  width: 4px;
}

html.dark .no-bg-scrollbar {
  scrollbar-color: hsla(0, 0%, 100%, 0.2) transparent;
}

html .no-bg-scrollbar::-webkit-scrollbar,
html .no-bg-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
}

html .no-bg-scrollbar:active::-webkit-scrollbar-thumb,
html .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
html .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
html .no-bg-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border: 4px solid transparent;
  background-clip: content-box;
  border-radius: 10px;
}

html .no-bg-scrollbar::-webkit-scrollbar-thumb:active,
html .no-bg-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.35) !important;
}

html.dark .no-bg-scrollbar:active::-webkit-scrollbar-thumb,
html.dark .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
html.dark .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
html.dark .no-bg-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: hsla(0, 0%, 100%, 0.2);
}

html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:active,
html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: hsla(0, 0%, 100%, 0.35) !important;
}
