/* 
	TODO: Clean up and move rules here to ScrollControls.less
	when new scroller implementation (based on Scrollable mixin) is complete.

	For now, to avoid copy-paste and redundant bug-fix work, we are directly
	including this .less file from the ScrollControls package.json.
*/

.moon-scroller-client-wrapper,
.moon-scroller-viewport {
	box-sizing: border-box;
	height: 100%;
}

/* CSS for moon.ScrollStrategy */
.matrix-scroll-client {
	width: auto;
	height: auto;
	position: relative;
	overflow: visible;
}

.moon-scroller-client-wrapper.v-scroll-enabled {
	padding-right:  @moon-icon-button-small-size + @moon-spotlight-outset;
}
.enyo-locale-right-to-left .moon-scroller-client-wrapper.v-scroll-enabled {
	padding-right: 0;
	padding-left:  @moon-icon-button-small-size + @moon-spotlight-outset;
}
.moon-scroller-client-wrapper.h-scroll-enabled {
	padding-bottom:  @moon-icon-button-small-size;
}

/* Default states for horizontal and vertical scrollbars */
.moon-scroller-v-column,
.moon-scroller-h-column {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.1s linear;
	-moz-transition: opacity 0.1s linear;
	-webkit-transition: opacity 0.1s linear;
	
	transform: translateZ(0);
	-o-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-webkit-transform: translateZ(0);
}
/* Flip the horizontal scroller for RTL mode */
.enyo-locale-right-to-left .moon-scroller-h-column {
	-webkit-transform: translateZ(1px) scale(-1);
}
/* Toggle opacity with .visible class */
.moon-scroller-v-column.visible,
.moon-scroller-h-column.visible {
	opacity: 1;
}
/* Toggle opacity when enabled */
.moon-scroller-v-column.v-scroll-enabled,
.moon-scroller-h-column.h-scroll-enabled {
	visibility: visible;
}
/* Default position for vertical scrollbar */
.moon-scroller-v-column {
	top: 0px;
	bottom: 0px;
	right: @moon-spotlight-outset;
	width:  @moon-icon-button-small-size;
}
.enyo-locale-right-to-left .moon-scroller-v-column {
	right: auto;
	left: @moon-spotlight-outset;
}
/* Default position for horizontal scrollbar */
.moon-scroller-h-column {
	left: 0px;
	right: 0px;
	bottom: 0px;
	height:  @moon-icon-button-small-size;
}
/* Shorten vertical column when horizontal column is enabled */
.moon-scroller-v-column.h-scroll-enabled {
	bottom:  @moon-icon-button-small-size;
}
/* Shorten horizontal column when vertical column is enabled */
.moon-scroller-h-column.v-scroll-enabled {
	right:  @moon-icon-button-small-size;
}

.enyo-locale-right-to-left .moon-scroller-h-column.v-scroll-enabled {
	right: 0;
	left: @moon-icon-button-small-size;
}

.moon-scroller-thumb-container {
	position:absolute;
}
.moon-scroller-hthumb-container {
	left:  @moon-icon-button-small-size;
	right:  @moon-icon-button-small-size;
	bottom: 0px;
	height:  @moon-icon-button-small-size;
}
.moon-scroller-vthumb-container {
	top:  @moon-icon-button-small-size;
	bottom:  @moon-icon-button-small-size;
	right: 0px;
	width:  @moon-icon-button-small-size;
}

.moon-scroller-hthumb,
.moon-scroller-vthumb {
	transition: opacity 0.1s linear;
	-moz-transition: opacity 0.1s linear;
	-webkit-transition: opacity 0.1s linear;
}
.moon-scroller-hthumb {
	bottom:  @moon-icon-button-small-size/2 - 2;
}
.moon-scroller-vthumb {
	right:  @moon-icon-button-small-size/2 - 2;
}
.moon-scroller-hthumb.hidden,
.moon-scroller-vthumb.hidden {
	opacity: 0;
}

.moon-scroller-client-wrapper .enyo-new-thumb {
	background: @moon-thumb-bg-color;	
}

.moon-neutral .moon-scroller-client-wrapper .enyo-new-thumb {
	background: @moon-neutral-thumb-bg-color;
}
