Scrollbar color change in Firefox

Since version 64 Firefox allows limited styling of scrollbars:

.my-scrollable {
   scrollbar-color: red blue;
   scrollbar-width: thin;
}

See https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

Well, I have heard someone saying "It's Impossible"... But I don't believe in the impossible.

In the follwing example I only want to stylize the <ul> list in the main sidebar. Simply try this solution for Firefox scrollbar stylizes:

<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>

The Css will be:

.scrollable {
overflow: auto;
max-height:80vh;
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}

.scrollable::-webkit-scrollbar {
width: 0.5em!important;
}

.scrollable::-webkit-scrollbar-track-piece {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

.scrollable::-webkit-scrollbar-thumb:vertical {
background-color: #ddd;
outline: 1px solid slategrey;
}

Here are the final results:

(Note: The first image is the default scrollbar color).

In Firefox V103 coloring scrollbar works with:

html, body{scrollbar-color: #f33942 #000;}