scrollbar with css that has scroll: overlay enabled

the-one-true-scrollbar.css

/* logic for scrollbar: */

html {
    overflow: overlay;
}

::-webkit-scrollbar {
    width: 18px;
    height: 18px
}

::-webkit-scrollbar-thumb {
    border: 6px solid transparent;
    background: rgba(0, 0, 0, .2);
    background: var(--palette-black-alpha-20, rgba(0, 0, 0, .2));
    border-radius: 10px;
    background-clip: padding-box
}

::-webkit-scrollbar-corner {
    background: transparent
}

::-webkit-scrollbar-thumb:vertical {
    min-height: 30px
}

::-webkit-scrollbar-thumb:horizontal {
    min-width: 30px
}

:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    background: var(--palette-black-alpha-20, rgba(0, 0, 0, .2));
    background-clip: padding-box
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .3);
    background: var(--palette-black-alpha-30, rgba(0, 0, 0, .3));
    background-clip: padding-box;
    border: 4px solid transparent
}
/* https://stackoverflow.com/a/34503125/5283424 */