@import "/UI/Styles/_Theme.scss";

ScrollBox {
	flex-direction: row;
	flex-grow: 1;
	min-height: 0;
	position: relative;
}

ScrollBox .scroll-box-viewport {
	flex-direction: column;
	flex-grow: 1;
	min-height: 0;
	min-width: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}

ScrollBox.is-horizontal .scroll-box-viewport {
	overflow-x: scroll;
}

ScrollBox.is-vertical .scroll-box-bar--vertical {
	flex-direction: column;
	position: absolute;
	top: 2px;
	right: 0;
	bottom: 2px;
	width: 6px;
	background-color: rgba(#000000, 0.25);
	border: 0;
}

ScrollBox .scroll-box-bar--horizontal {
	flex-direction: row;
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 0;
	height: 6px;
	background-color: rgba(#000000, 0.25);
}

ScrollBox .scroll-box-bar--vertical .scroll-box-thumb {
	position: absolute;
	left: 0;
	right: 0;
	background-color: $primary-line;
	transition: background-color 0.12s ease-out;
}

ScrollBox .scroll-box-bar--horizontal .scroll-box-thumb {
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: $primary-line;
	transition: background-color 0.12s ease-out;
}

ScrollBox:hover .scroll-box-thumb {
	background-color: $primary;
}