.enyo-viewlayout-slide {
	.pre(@prop, @val) {
		-webkit-@{prop}: @val;
		@{prop}: @val;
	}
	> .enyo-view {
		.pre(transform, translate3d(-100%, 0, 0));
		.pre(transition-property, none);
		.pre(transition-timing-function, linear);
	}

	&:not(.dragging) > .enyo-view.transitioning {
		-webkit-transition-property: -webkit-transform;
		transition-property: transform;
	}

	&.horizontal > .enyo-view {
		&.forward { .pre(transform, translate3d(100%, 0, 0)); }
		&.back { .pre(transform, translate3d(-100%, 0, 0)); }
		&.active { .pre(transform, translate3d(0, 0, 0)); }
	}

	&.vertical > .enyo-view {
		&.forward { .pre(transform, translateY(0, -100%, 0)); }
		&.back { .pre(transform, translateY(0, 100%, 0)); }
		&.active { .pre(transform, translate3d(0, 0, 0)); }
	}

	&.cover {
		// in cover mode, promote all views up a bit
		> .enyo-view {
			z-index: 5;
			// unless it's the stationary view which should always remain behind
			&.stationary {
				z-index: 0;
				.pre(transform, translate3d(0, 0, 0));
			}
		}

		// except when dragging where the active view is promoted
		&.dragging {
			> .enyo-view {
				z-index: 0;
				&.active { z-index: 10; }
			}
		}
	}
}