*::-webkit-scrollbar {
  width: 6px;
}
*::-webkit-scrollbar-track {
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 100rem;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) transparent;
}

I want to customize the scrollbar for my website. The -webkit properties are used for customization in Chrome, Edge, and other Chromium-based browsers, while scrollbar-width is for Firefox and IE. However, the scrollbar-width property disables -webkit. I want -webkit to take precedence in Chrome, and when it comes to Firefox, where -webkit is not supported, scrollbar-width should take effect.

I tried using @supports not, but it didn’t work