.enyo-light-panels {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	direction: ltr;

	&.horizontal {
		&.forwards {
			> .panels-container {
				> .shifted {
					transform: translateX(100%);
					-webkit-transform: translateX(100%);
				}
			}
		}
		&.backwards {
			> .panels-container {
				transform: translateX(-50%);
				-webkit-transform: translateX(-50%);

				> * {
					transform: translateX(100%);
					-webkit-transform: translateX(100%);
				}

				> .shifted {
					transform: translateX(0%);
					-webkit-transform: translateX(0%);
				}
			}
		}

		> .panels-container {
			width: 200%;
			height: 100%;

			> * {
				width: 50%;
			}
		}
	}

	&.vertical {
		&.forwards {
			> .panels-container {
				> .shifted {
					transform: translateY(100%);
					-webkit-transform: translateY(100%);
				}
			}
		}
		&.backwards {
			> .panels-container {
				transform: translateY(-50%);
				-webkit-transform: translateY(-50%);

				> * {
					transform: translateY(100%);
					-webkit-transform: translateY(100%);
				}

				> .shifted {
					transform: translateY(0%);
					-webkit-transform: translateY(0%);
				}
			}
		}

		> .panels-container {
			width: 100%;
			height: 200%;

			> * {
				height: 50%;
			}
		}
	}

	> .panels-container {
		position: relative;

		> * {
			display: inline-block;
			vertical-align: top;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			box-sizing: border-box;
		}

		> .offscreen {
			visibility: hidden;
		}

		.enyo-locale-right-to-left & > * {
			direction: rtl;
		}
	}
}
