angular scrollbar style back to original when mouse hover on the page issue

Question

I am using Agnualr-19 with Tailwind, I am tring to style my app scrollbar but after various tries the only thing that is working is the following:

scrollbar-width: thin; 
scrollbar-color: theme('colors.primary.100') theme('colors.grey.200');

But I did not like it because I couldn't change the radios or control the width. However, I installed 'tailwind-scrollbar' dependency and the following finally started to show the effect:

@layer base {
  /* Custom scrollbar styles */
  ::-webkit-scrollbar {
    width: 10px !important; /* Width of the scrollbar */
    height: 10px !important; /* Height of the scrollbar (for horizontal scrollbars) */
  }

  ::-webkit-scrollbar-track {
    background: theme('colors.grey.200') !important; /* Color of the track */
    border-radius:  5px !important; /* Rounded corners for the track */
  }

  ::-webkit-scrollbar-thumb {
    background: theme('colors.primary.100') !important; /* Color of the scrollbar thumb */
    border-radius: 5px !important; /* Rounded corners for the thumb */
  }

  ::-webkit-scrollbar-thumb:hover {
    background: theme('colors.primary.normal') !important; /* Color of the scrollbar thumb on hover */
  }
}

The big issue now is that the styles are shown only when the mouse is out of the window, once I hover inside the page window the scrollbar returns to the original style.

Not hovering	Hovering

Answer 1

I solve it by adding the following:

*:hover {
  scrollbar-color: initial;
}