@layer base {
  html {
    scrollbar-width: thin;
    scrollbar-color: rgb(156, 163, 175) rgb(249, 250, 251);
  }
  
  body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  body::-webkit-scrollbar-track {
    @apply bg-gray-50;
  }
  
  body::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded;
  }
  
  body::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }
}

@layer utilities {
  .dark-scrollbars-compat {
    scrollbar-color: rgb(71, 85, 105) rgb(30, 41, 59);
  }
  
  .dark-scrollbars::-webkit-scrollbar-track {
    @apply bg-slate-800;
  }
  
  .dark-scrollbars::-webkit-scrollbar-thumb {
    @apply bg-slate-600;
  }
  
  .dark-scrollbars::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-500;
  }
}