/* IntegerPicker.css */
.moon-scroll-picker-container {
	display: inline-block;
	position: relative;
	text-align: center;
	vertical-align: top;
}

/*disabled*/
.moon-scroll-picker-container.disabled {
  cursor: default;
  opacity: @moon-disabled-opacity;
}

.moon-scroll-picker {
	direction: ltr;
	height: @moon-integer-picker-height;
	border-top: solid 30px transparent;
	border-bottom: solid 30px transparent;
	border-radius: @moon-integer-picker-radius;
}

.spotlight .moon-scroll-picker {
	background: @moon-spotlight-border-color;
	color: @moon-spotlight-text-color;
	pointer-events: none;
}

.moon-scroll-picker-item {
	white-space: nowrap;
	padding: 0 @moon-picker-min-padding 3px @moon-picker-min-padding;
	min-width: 48px;
	height: @moon-integer-picker-height;
	line-height: @moon-integer-picker-height;
	text-align: center;
	background: transparent;
}

.moon-scroll-picker-buffer {
	white-space: nowrap;
	padding: 0 @moon-picker-min-padding 3px @moon-picker-min-padding;
	height: 0;
	opacity: 0;
}

.moon-scroll-picker-overlay-container {
	position:absolute;
	z-index: 1;
	width: 100%;
	height: @moon-integer-picker-overlay-height;
	font-family: @moon-icon-font-family;

	&.next {
		top: 0;
	}
	&.next:after {
		content: @moon-icon-arrowsmallup;
		font-size: @moon-integer-picker-caret-font-size;
		line-height: @moon-integer-picker-caret-font-size/2 + 3;
	}
	&.previous {
		bottom: 0;
	}
	&.previous:after {
		content: @moon-icon-arrowsmalldown;
		font-size: @moon-integer-picker-caret-font-size;
		line-height: @moon-integer-picker-caret-font-size/2 - 9;
	}
}

.spotlight .moon-scroll-picker-overlay-container {
	color: @moon-white;

	&.next:after {
		content: @moon-icon-arrowlargeup;
		line-height: @moon-integer-picker-caret-font-size/2 + 9;
	}
	&.previous:after {
		content: @moon-icon-arrowlargedown;
		line-height: @moon-integer-picker-caret-font-size/2 - 12;
	}
}

.selected .moon-scroll-picker-overlay {
	position: absolute;
	height: @moon-integer-picker-overlay-height + 6px;
	width: 100%;
	background-color: @moon-accent;

	&.next {
	 	top: 0;
		border-style: solid;
		border-width: 0;
		border-color: rgba(0,0,0,0.2);

		border-top-width: @moon-integer-picker-shadow-width;
		border-radius: @moon-integer-picker-radius @moon-integer-picker-radius 0 0;
	}
	&.next:after {
		content: @moon-icon-arrowsmallup;
		font-size: @moon-integer-picker-caret-font-size;
		line-height: @moon-integer-picker-caret-font-size/2 - 3;
	}
	&.previous {
	 	bottom: 0;
		border-style: solid;
		border-width: 0;
		border-color: rgba(0,0,0,0.2);

		border-bottom-width: @moon-integer-picker-shadow-width;
		border-radius: 0 0 @moon-integer-picker-radius @moon-integer-picker-radius;
	}
	&.previous:after {
		content: @moon-icon-arrowsmalldown;
		font-size: @moon-integer-picker-caret-font-size;
		line-height: @moon-integer-picker-caret-font-size/2 + 9;
	}
 }

.moon-scroll-picker-taparea {
	position:absolute;
	top: -12px;
	right: -12px;
	bottom: -12px;
	left: -12px;
}