.moon-simple-integer-picker {
	padding: 0 @moon-picker-button-width;

	.moon-scroll-picker-repeater {
		width: 100%;
		white-space: nowrap;

		> * {
			display: inline-block;
		}
	}

	.moon-scroll-picker {
		height: @moon-picker-button-width;
		border-top: 0;
		border-bottom: 0;
		width: 100%;
	}

	.moon-scroll-picker-item {
		height: @moon-picker-button-width;
		line-height: @moon-picker-button-width;
		padding: 0;
	}

	.moon-scroll-picker-overlay-container {
		top: 0;
		line-height: @moon-picker-button-width;
		width: @moon-picker-button-width;
		height: @moon-picker-button-width;

		&.previous {
			left: 0;

			&:after {
				content: @moon-icon-arrowsmallleft;
				line-height: @moon-picker-button-width;
			}

			&.selected .moon-scroll-picker-overlay {
				border-bottom: 0;
				border-left-width: @moon-integer-picker-shadow-width;
				border-radius: @moon-integer-picker-radius 0 0 @moon-integer-picker-radius;

				&:after {
					content: @moon-icon-arrowsmallleft;
					line-height: @moon-picker-button-width;
				}
			}
		}

		&.next {
			right: 0;

			&:after {
				content: @moon-icon-arrowsmallright;
				line-height: @moon-picker-button-width;
			}

			&.selected .moon-scroll-picker-overlay {
				border-top: 0;
				border-right-width: @moon-integer-picker-shadow-width;
				border-radius: 0 @moon-integer-picker-radius @moon-integer-picker-radius 0;

				&:after {
					content: @moon-icon-arrowsmallright;
					line-height: @moon-picker-button-width;
				}
			}
		}

		.moon-scroll-picker-overlay {
			position: absolute;
			height: @moon-picker-button-width;
			.border-box;
		}
	}
}


.spotlight.moon-simple-integer-picker {
	background: @moon-spotlight-border-color;
	border-radius: @moon-integer-picker-radius;

	.moon-scroll-picker-overlay-container.next:after {
		content: @moon-icon-arrowlargeright;
		line-height: @moon-picker-button-width;
	}

	.moon-scroll-picker-overlay-container.previous:after {
		content: @moon-icon-arrowlargeleft;
		line-height: @moon-picker-button-width;
	}
}

.enyo-locale-right-to-left .moon-simple-integer-picker {
	.moon-scroll-picker {
		// since the repeater controls are inline-block and we want to keep the ordering the same
		// so scrolling works correctly, override the direction for the scroller's children
		direction: ltr;
	}
}

.enyo-locale-non-latin {
	.moon-simple-integer-picker-item {
		.enyo-locale-non-latin .moon-sub-header-text;
	}
}