* {
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
  margin: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 100, 100, 0.7);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  body {
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}

@supports (-ms-ime-align: auto) {
  body {
    -ms-overflow-style: auto;
  }
}

@media (prefers-color-scheme: dark) {
  * {
    scrollbar-color: rgba(200, 200, 200, 0.3) transparent;
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgba(200, 200, 200, 0.3);
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(200, 200, 200, 0.5);
  }
}

@media (prefers-color-scheme: light) {
  * {
    scrollbar-color: rgba(100, 100, 100, 0.3) transparent;
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgba(100, 100, 100, 0.3);
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 100, 100, 0.5);
  }
}

.scrollbar-macos {
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
  overflow-y: auto;
}

.scrollbar-macos::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-animated::-webkit-scrollbar-thumb {
  transition: background-color 0.3s ease;
}