:root {
  --app-scrollbar-thumb: rgb(113 113 122 / 30%);
}

* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent !important;
  transition: scrollbar-color 160ms ease;
}

*:hover {
  scrollbar-color: var(--app-scrollbar-thumb) transparent !important;
}

*::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track:hover,
*::-webkit-scrollbar-track:active,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-track-piece:hover,
*::-webkit-scrollbar-track-piece:active {
  background: transparent !important;
}

*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb:active {
  background: transparent !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background-clip: padding-box !important;
}

*:hover::-webkit-scrollbar-thumb,
*:hover::-webkit-scrollbar-thumb:hover,
*:hover::-webkit-scrollbar-thumb:active {
  background: var(--app-scrollbar-thumb) !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background-clip: padding-box !important;
}