Custom scrollbar Stylus mixin for Google Chrome and Mozilla Firefox 64+.

scrollbar.styl

$scrollbar-width= 5px
$scrollbar-color= red
$scrollbar-background= transparent
$scrollbar-thumb-radius= 6px
$scrollbar-thumb-border-thickness= 0px

scrollbar()
	scrollbar-width: thin
	scrollbar-color: transparent transparent
	transition: scrollbar-color 300ms

	&::-webkit-scrollbar
		width: $scrollbar-width;

	&::-webkit-scrollbar-track
		background: transparent

	&::-webkit-scrollbar-thumb
		background-color: transparent
		border-radius: $scrollbar-thumb-radius;
		border: $scrollbar-thumb-border-thickness solid transparent

	&:hover
		scrollbar-color: $scrollbar-color $scrollbar-background
		&::-webkit-scrollbar-thumb
			background-color: $scrollbar-color
		border: $scrollbar-thumb-border-thickness solid $scrollbar-background
		&::-webkit-scrollbar-track
			background: $scrollbar-background
$scrollbar
	scrollbar()

.foo
	@extend $scrollbar