$prefix: scrollbarjs;



// visibility
.#{$prefix}-ver,
.#{$prefix}-hor,
.#{$prefix}-corner {
	display: none;
}

.#{$prefix}-scroll-ver  > .#{$prefix}-ver,
.#{$prefix}-scroll-hor  > .#{$prefix}-hor,
.#{$prefix}-scroll-both > .#{$prefix}-ver,
.#{$prefix}-scroll-both > .#{$prefix}-hor,
.#{$prefix}-scroll-both > .#{$prefix}-corner,
.#{$prefix}-resizable   > .#{$prefix}-corner {
	display: block;
}

.#{$prefix}-track-hor > div {
	height: 100%; // so we can see them
	float: left; // so they won't push each other to new lines
	// display: inline-block; for some reason makes firefox move it down 1px; letting it float fixes it
}



// rough positioning
.#{$prefix}-scrollbar,
.#{$prefix}-track,
.#{$prefix}-button,
.#{$prefix}-corner {
	position: absolute;
}

// height: 100%; width: 100% for absolutely positioned elements
// width/height:100% isn't as reliable since they need a parent with these explicitly set to work
.#{$prefix}-track {
	top: 0; right: 0; bottom: 0; left: 0;
}

.#{$prefix}-up     { top:    0; right: 0 }
.#{$prefix}-down   { bottom: 0; right: 0 }
.#{$prefix}-left   { bottom: 0; left:  0 }
.#{$prefix}-right  { bottom: 0; right: 0 }
.#{$prefix}-corner { bottom: 0; right: 0 }



// dimensions

// let scrollbars take up space, useful for opaque ones, however note that this doesn't seem work if the content can't wrap to a new line
/*
.#{$prefix}-viewport {
	padding-right: 20px;
}
*/

// this is a reliable way to add padding-bottom to the viewport
/*
.#{$prefix}-viewport::after {
	content: ''; display: block;
	height: 16px;
}
*/

.#{$prefix}-ver {
	top: 0; right: 0; bottom: 0;
	width: 16px;
}
.#{$prefix}-hor {
	right: 0; bottom: 0; left: 0;
	height: 16px;
}
.#{$prefix}-button, .#{$prefix}-corner {
	height: 16px;
	width: 16px;
}

.#{$prefix}-scroll-both > .#{$prefix}-ver,
.#{$prefix}-resizable   > .#{$prefix}-ver {
	margin-bottom: 16px;
}
.#{$prefix}-scroll-both > .#{$prefix}-hor,
.#{$prefix}-resizable   > .#{$prefix}-hor {
	margin-right: 16px;
}

.#{$prefix}-track-ver { margin: 16px 0; }
.#{$prefix}-track-hor { margin: 0 16px; }



// color
.#{$prefix}-scrollbar,
.#{$prefix}-corner {
	opacity: .8;
}

.#{$prefix}-track  { background: #DDD; }
.#{$prefix}-thumb  { background: #BBB; }
.#{$prefix}-button { background: #999; }
.#{$prefix}-corner { background: #777; }
.#{$prefix}-button-inactive { background: #CCC; }
.#{$prefix}-resizable > .#{$prefix}-corner { background: #000; }