::-webkit-scrollbar{width: 10px}
::-webkit-scrollbar-button{display: none}
::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.5);
    border-radius: 50px;
    border: 3px solid rgba(0,0,0,0);
    background-clip: content-box;
}

/*
::-webkit-scrollbar-thumb:hover{}
::-webkit-scrollbar-thumb:active{}
::-webkit-scrollbar-track{}
::-webkit-scrollbar-track-piece{}
::-webkit-scrollbar-corner{}
*/

/***************************************************
	positions
***************************************************/

[data-scrollbar~="right"]{overflow-y: scroll}
[data-scrollbar~="bottom"]{
	overflow-x: scroll;
	white-space: nowrap;
}

[data-scrollbar~="top"]{
	overflow-x: scroll;
	transform: scaleY(-1);
}

[data-scrollbar~="top"] > div{
	min-width: 100%;
	min-height: 100%;
	width: fit-content;
	transform: scaleY(-1);
	white-space: nowrap;
}

/* left */
[data-scrollbar~="left"]{
	overflow-y: scroll;
	transform: scaleX(-1);
}

[data-scrollbar~="left"] > div{
	min-width: 100%;
	min-height: 100%;
	transform: scaleX(-1);
}

/***************************************************
	template
***************************************************/

[data-scrollbar]::-webkit-scrollbar{
	width: 10px; 
	height: 10px;
}

[data-scrollbar]::-webkit-scrollbar-thumb{
	background: #bbb;
	background-clip: content-box;
}

[data-scrollbar]::-webkit-scrollbar-button{
	display: block;
    background: #f1f1f1;
    color: #000;
    height: 7px;
    width: 7px;
    cursor: pointer;
}

/*
[data-scrollbar]::-webkit-scrollbar-corner{}
*/

/***************************************************
	no button
***************************************************/

[data-scrollbar~="nobtn"]::-webkit-scrollbar-button,
[data-scrollbar~="nobtn"]::-webkit-scrollbar-corner{
	display: none;
}

/***************************************************
	rounding
***************************************************/

[data-scrollbar~="rounded"]::-webkit-scrollbar-thumb{
	border-radius: 50px;
}

/* rounded end */
[data-scrollbar~="roundedend"]::-webkit-scrollbar-thumb{
	border-radius: 50px 0px 0px 50px;
}

/***************************************************
	sizes
***************************************************/

/* thin */
[data-scrollbar~="thin"]::-webkit-scrollbar{
	width: 10px; 
	height: 10px;
}

[data-scrollbar~="thin"]::-webkit-scrollbar-thumb{
	background: rgba(0,0,0,0.5);
	border: 3px solid rgba(0,0,0,0);
	background-clip: content-box;
}

/* fat */
[data-scrollbar~="fat"]::-webkit-scrollbar{
	width: 30px; 
	height: 30px;
}

[data-scrollbar~="fat"]::-webkit-scrollbar-thumb{
	background: rgba(0,0,0,0.5);
	background-clip: content-box;
}

/***************************************************
	hover
***************************************************/

[data-scrollbar~="hover"]::-webkit-scrollbar-thumb{
	background: rgba(0,0,0,0);
	background-clip: content-box;
	transition: 0.3s;
}

[data-scrollbar~="hover"]:hover::-webkit-scrollbar-thumb{
	background: rgba(0,0,0,1);
	background-clip: content-box;
}

/***************************************************
	colour - both
***************************************************/

[data-scrollbar~="thin"]::-webkit-scrollbar-button,
[data-scrollbar~="thin"]::-webkit-scrollbar-corner{
	display: none;
}

[data-scrollbar~="color=red"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=red"]::-webkit-scrollbar-button{
	background: #f44336
}

[data-scrollbar~="color=orange"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=orange"]::-webkit-scrollbar-button{
	background: #ff9800
}

[data-scrollbar~="color=yellow"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=yellow"]::-webkit-scrollbar-button{
	background: #ffeb3b
}

[data-scrollbar~="color=green"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=green"]::-webkit-scrollbar-button{
	background: #4caf50
}

[data-scrollbar~="color=cyan"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=cyan"]::-webkit-scrollbar-button{
	background: #00bcd4
}

[data-scrollbar~="color=blue"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=blue"]::-webkit-scrollbar-button{
	background: #2196f3
}

[data-scrollbar~="color=purple"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=purple"]::-webkit-scrollbar-button{
	background: #673ab7
}

[data-scrollbar~="color=pink"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=pink"]::-webkit-scrollbar-button{
	background: #e91e63
}

[data-scrollbar~="color=brown"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=brown"]::-webkit-scrollbar-button{
	background: #935640
}

[data-scrollbar~="color=black"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=black"]::-webkit-scrollbar-button{
	background: #000
}

[data-scrollbar~="color=white"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=white"]::-webkit-scrollbar-button{
	background: #fff
}

[data-scrollbar~="color=darkgray"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=darkgray"]::-webkit-scrollbar-button{
	background: #4c4c4c
}

[data-scrollbar~="color=gray"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=gray"]::-webkit-scrollbar-button{
	background: #9e9e9e
}

[data-scrollbar~="color=lightgray"]::-webkit-scrollbar-thumb,
[data-scrollbar~="color=lightgray"]::-webkit-scrollbar-button{
	background: #cbcbcb
}

/***************************************************
	colour - bar
***************************************************/

[data-scrollbar~="barcolor=red"]::-webkit-scrollbar-thumb{background: #f44336}
[data-scrollbar~="barcolor=orange"]::-webkit-scrollbar-thumb{background: #ff9800}
[data-scrollbar~="barcolor=yellow"]::-webkit-scrollbar-thumb{background: #ffeb3b}
[data-scrollbar~="barcolor=green"]::-webkit-scrollbar-thumb{background: #4caf50}
[data-scrollbar~="barcolor=cyan"]::-webkit-scrollbar-thumb{background: #00bcd4}
[data-scrollbar~="barcolor=blue"]::-webkit-scrollbar-thumb{background: #2196f3}
[data-scrollbar~="barcolor=purple"]::-webkit-scrollbar-thumb{background: #673ab7}
[data-scrollbar~="barcolor=pink"]::-webkit-scrollbar-thumb{background: #e91e63}
[data-scrollbar~="barcolor=brown"]::-webkit-scrollbar-thumb{background: #935640}
[data-scrollbar~="barcolor=black"]::-webkit-scrollbar-thumb{background: #000}
[data-scrollbar~="barcolor=white"]::-webkit-scrollbar-thumb{background: #fff}
[data-scrollbar~="barcolor=darkgray"]::-webkit-scrollbar-thumb{background: #4c4c4c}
[data-scrollbar~="barcolor=gray"]::-webkit-scrollbar-thumb{background: #9e9e9e}
[data-scrollbar~="barcolor=lightgray"]::-webkit-scrollbar-thumb{background: #cbcbcb}

/***************************************************
	colour - buttons
***************************************************/

[data-scrollbar~="btncolor=red"]::-webkit-scrollbar-button{background: #f44336}
[data-scrollbar~="btncolor=orange"]::-webkit-scrollbar-button{background: #ff9800}
[data-scrollbar~="btncolor=yellow"]::-webkit-scrollbar-button{background: #ffeb3b}
[data-scrollbar~="btncolor=green"]::-webkit-scrollbar-button{background: #4caf50}
[data-scrollbar~="btncolor=cyan"]::-webkit-scrollbar-button{background: #00bcd4}
[data-scrollbar~="btncolor=blue"]::-webkit-scrollbar-button{background: #2196f3}
[data-scrollbar~="btncolor=purple"]::-webkit-scrollbar-button{background: #673ab7}
[data-scrollbar~="btncolor=pink"]::-webkit-scrollbar-button{background: #e91e63}
[data-scrollbar~="btncolor=brown"]::-webkit-scrollbar-button{background: #935640}
[data-scrollbar~="btncolor=black"]::-webkit-scrollbar-button{background: #000}
[data-scrollbar~="btncolor=white"]::-webkit-scrollbar-button{background: #fff}
[data-scrollbar~="btncolor=darkgray"]::-webkit-scrollbar-button{background: #4c4c4c}
[data-scrollbar~="btncolor=gray"]::-webkit-scrollbar-button{background: #9e9e9e}
[data-scrollbar~="btncolor=lightgray"]::-webkit-scrollbar-button{background: #cbcbcb}