@import "config.less";

.ui-scrollview-clip {
	position: relative;
}

.ui-scrollview-view {
}

.ui-scrolllistview .ui-li-divider {
	z-index: 10;
}

.ui-scrollbar {
	position: absolute;
	overflow: hidden;

	opacity: 0;
}

.ui-scrollbar-visible {
	opacity: 1;
}

.ui-scrollbar-y {
	top: 2 * @unit_base;
	right: 2 * @unit_base;
	bottom: 2 * @unit_base;
	width: 8 * @unit_base;
}

.ui-scrollbar-x {
	right: 2 * @unit_base;
	bottom: 2 * @unit_base;
	left: 2 * @unit_base;
	height: 8 * @unit_base;
}

.ui-scrollbar-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.ui-scrollbar-thumb {
	position: absolute;
	top: 0;
	left: 0;
	background-color: @color_scrollbar;
}

.ui-scrollbar-y .ui-scrollbar-thumb {
	width:  5 * @unit_base;
	height: 100%;
	.LESSborder-radius-all(2 * @unit_base);
	.LESSbox-shadow(1 * @unit_base, 1 * @unit_base, 2 * @unit_base, rgb(148, 146, 140))
}

.ui-scrollbar-x .ui-scrollbar-thumb {
	width: 100%;
	height: 5 * @unit_base;
	.LESSborder-radius-all(2 * @unit_base);
}

.ui-scroll-jump-top-bg {
	position: absolute;
	top: 9 * @unit_base;
	right: 13 * @unit_base;
	width: 37 * @unit_base;
	height: 37 * @unit_base;
}

.ui-scroll-jump-left-bg {
	position: absolute;
	bottom: 9 * @unit_base;
	left: 13 * @unit_base;
	width: 37 * @unit_base;
	height: 37 * @unit_base;
}

.ui-overflow-indicator-top {
	position: absolute;
	display: block;
	top: 0;
	width: 100%;
	height: 10 * @unit_base;
	opacity: 0;
	background: -webkit-gradient(linear,
				left bottom,
				left top,
				color-stop(0, rgb(255,255,255)),
				color-stop(1, rgb(128,128,128)));
}

.ui-overflow-indicator-bottom {
	position: absolute;
	display: block;
	bottom: 0;
	width:100%;
	height: 10 * @unit_base;
	opacity: 0;
	background: -webkit-gradient(linear,
				left bottom,
				left top,
				color-stop(0, rgb(128,128,128)),
				color-stop(1, rgb(255,255,255)));
}

/*
 * the values below are for the group index
 */

/*
 * padding here set to zero - otherwise the list scrolls underneith the top heading and can be seen above it
 */
.ui-content.ui-scrollview-clip {
	padding: 0;
}
.ui-content.ui-scrollview-clip > div.ui-scrollview-view {
	margin: 0;
	padding-left: 8 * @unit_base;
	padding-right: 8 * @unit_base;
}

/*
 * this seems to effect how far the top divider is place wrt to the scrollview
 * without this, it is placed too high, so it is clipped in half
 */
.ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
	margin: 0;
}