:root {
	--scrollbar-size: 10px;
	--t-time: 0.1s;
}
.scrollbar-x,
.scrollbar-y {
	position: absolute;
}

.scrollbar-x.hidden,
.scrollbar-y.hidden {
	display: none;
}

.scrollbar-x {
	bottom: 3px;
	left: var(--scrollbar-size);
	right: var(--scrollbar-size);
	top: auto;
	height: var(--scrollbar-size);
}

.scrollbar-y {
	bottom: var(--scrollbar-size);
	left: auto;
	right: 3px;
	top: var(--scrollbar-size);
	width: var(--scrollbar-size);
}

.scrollbar-x .bar,
.scrollbar-y .bar {
	opacity: 0.5;

	position: absolute;
	background: #555;
	border-radius: calc(var(--scrollbar-size) / 2);
}
.scrollbar-x .bar {
	height: calc(var(--scrollbar-size) / 2);
	top: calc(var(--scrollbar-size) / 4);
	transition: opacity var(--t-time), height var(--t-time), top var(--t-time);
}
.scrollbar-y .bar {
	width: calc(var(--scrollbar-size) / 2);
	left: calc(var(--scrollbar-size) / 4);
	transition: opacity var(--t-time), width var(--t-time), left var(--t-time);
}

.scrollbar-x:hover .bar {
	height: var(--scrollbar-size);
	opacity: 1;
	top: 0;
}
.scrollbar-y:hover .bar {
	width: var(--scrollbar-size);
	opacity: 1;
	left: 0;
}