:root {
	--scrollbar-height: .5rem;
	--scrollbar-width: .5rem;
	--scrollbar-button-height: calc(var(--scrollbar-width) * 1.2);
	--scrollbar-button-width: calc(var(--scrollbar-height) * 1.2);
} body> * {
	--scrollbar-height: .25rem;
	--scrollbar-width: .25rem;
	--scrollbar-thumb-radius: var(--scrollbar-width);
	--scrollbar-button-height: 0;
	--scrollbar-button-width: 0;
} ::-webkit-scrollbar {
	-webkit-appearance: none;
} ::-webkit-scrollbar:vertical {
	width: var(--scrollbar-width);
} ::-webkit-scrollbar:horizontal {
	height: var(--scrollbar-height);
} ::-webkit-scrollbar-track {
} ::-webkit-scrollbar-thumb {
	background-color: var(--theme-color);
	border-radius: var(--scrollbar-thumb-radius, 0);
} ::-webkit-scrollbar-thumb:hover {
	background-color: var(--theme-color-dark);
}



/* scrollbar button */

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
	display: none;
} ::-webkit-scrollbar-button {
	background-color: var(--theme-color);
	border-radius: var(--scrollbar-width);
	height: var(--scrollbar-button-height);
	width: var(--scrollbar-button-width);
} ::-webkit-scrollbar-button:hover {
	background-color: var(--theme-color-dark);
} ::-webkit-scrollbar-button:vertical:start {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
} ::-webkit-scrollbar-button:vertical:end {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
} ::-webkit-scrollbar-button:horizontal:start {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
} ::-webkit-scrollbar-button:horizontal:end {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
} ::-webkit-scrollbar-corner {
	background-color: transparent;
	border-radius: var(--scrollbar-width);
	border-bottom-right-radius: 0;
}