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

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:



Continue reading...