//
// Views
// ==============================




// Manager
// ------------------------------

.ViewManager {
	.square(100%);
	background-color: black;
	overflow: hidden;
	position: relative;
}




// View
// ------------------------------

// setup

.View {
	.display-flex();
	.flex-direction(column);
	.square(100%);
	background-color: @body-bg;
	line-height: 1; // reset. default line-height is for readable content not apps
	overflow: hidden;
	position: absolute;

	// stop weird text rendering issue after transform/animation end
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	// prepare the element for animation
	.translateZ(0);
}

// introduce iOS style springy scrolling

.springy-scrolling {
	position: relative;

	&::before,
	&::after {
		.square(1px;);
		content: "";
		position: absolute;
	}

	&::before {
		bottom: -1px;
	}
	&::after {
		top: -1px;
	}
}




// Error View
// ------------------------------

// TEMP

.ErrorView {
	.align-items(center);
	.display-flex();
	.flex-direction(column);
	.justify-content(center);
	text-align: center;
}
.ErrorView__icon {
	font-size: 64px;
	margin-bottom: .5em;
}
.ErrorView__heading {
	display: block;
	font-weight: bold;
	margin-bottom: 1em;
	padding-left: 2em;
	padding-right: 2em;
}
.ErrorView__text {
	display: block;
	font-size: @font-size-sm;
	line-height: 1.4;
	padding-left: 2em;
	padding-right: 2em;
}




// No Results
// use in conjuction with https://www.npmjs.com/package/react-container
// ------------------------------

.no-results {
	color: fade(@text-color, 60%);
}
.no-results__icon {
	font-size: 64px;
}
.no-results__text {
	margin-top: 1em;
}




// Animation
// ------------------------------

// React's CSSTransitionGroup requires an animation so we transition from .99 opacity to 1 with "artificial"

// transition: instant (default)
.view-transition-instant-enter-active { .animation( artificial 10ms ); }
.view-transition-instant-leave { .animation( fadeOut 60ms ); }

// transition: fade
.view-transition-fade-enter-active { .animation( artificial 10ms ); }
.view-transition-fade-leave { .animation( fadeOut 340ms ); }

// transition: fade expand

.view-transition-fade-expand-enter-active { .animation( artificial 10ms ); }
.view-transition-fade-expand-leave { .animation( fadeExpand 340ms ); }

// transition: fade contract

.view-transition-fade-contract-enter-active { .animation( artificial 10ms ); }
.view-transition-fade-contract-leave { .animation( fadeContract 340ms ); }

// SHOW
// ====

// common stacking context

.view-transition-show-from-top-enter-active,
.view-transition-show-from-right-enter-active,
.view-transition-show-from-bottom-enter-active,
.view-transition-show-from-left-enter-active {
	pointer-events: none; // disable user interaction whilst views are transitioning
	z-index: @zindex-view-top;
}

.view-transition-reveal-from-top-leave,
.view-transition-reveal-from-right-leave,
.view-transition-reveal-from-bottom-leave,
.view-transition-reveal-from-left-leave {
	pointer-events: none; // disable user interaction whilst views are transitioning
	z-index: @zindex-view-bottom;
}

// common animation components

.view-transition-show-from-top-enter-active,
.view-transition-show-from-top-leave,
.view-transition-show-from-bottom-enter-active,
.view-transition-show-from-bottom-leave {
	.animation-duration( @view-transition-duration );
	.animation-timing-function( @view-transition-timing-function );
}
.view-transition-show-from-left-enter-active,
.view-transition-show-from-left-leave,
.view-transition-show-from-right-enter-active,
.view-transition-show-from-right-leave {
	.animation-duration( @view-transition-duration );
	.animation-timing-function( @view-transition-timing-function );
}

// blank state

.view-transition-show-from-top-leave,
.view-transition-show-from-bottom-leave   { .animation-name( artificial ); }

// variants

.view-transition-show-from-top-enter-active      { .animation-name( viewShowFromTopEnter ); }
.view-transition-show-from-right-enter-active    { .animation-name( viewShowFromRightEnter ); }
.view-transition-show-from-bottom-enter-active   { .animation-name( viewShowFromBottomEnter ); }
.view-transition-show-from-left-enter-active     { .animation-name( viewShowFromLeftEnter ); }

.view-transition-show-from-left-leave     { .animation-name( viewShowFromLeftLeave ); }
.view-transition-show-from-right-leave    { .animation-name( viewShowFromRightLeave ); }

// REVEAL
// ======

// common stacking context

.view-transition-reveal-from-top-enter-active,
.view-transition-reveal-from-right-enter-active,
.view-transition-reveal-from-bottom-enter-active,
.view-transition-reveal-from-left-enter-active {
	pointer-events: none; // disable user interaction whilst views are transitioning
	z-index: @zindex-view-bottom;
}

.view-transition-reveal-from-top-leave,
.view-transition-reveal-from-right-leave,
.view-transition-reveal-from-bottom-leave,
.view-transition-reveal-from-left-leave {
	pointer-events: none; // disable user interaction whilst views are transitioning
	z-index: @zindex-view-top;
}

// common animation components

.view-transition-reveal-from-top-enter-active,
.view-transition-reveal-from-top-leave,
.view-transition-reveal-from-bottom-enter-active,
.view-transition-reveal-from-bottom-leave {
	.animation-duration( @view-transition-duration );
	.animation-timing-function( @view-transition-timing-function );
}
.view-transition-reveal-from-left-enter-active,
.view-transition-reveal-from-left-leave,
.view-transition-reveal-from-right-enter-active,
.view-transition-reveal-from-right-leave {
	.animation-duration( @view-transition-duration );
	.animation-timing-function( @view-transition-timing-function );
}

// blank state

.view-transition-reveal-from-top-enter-active,
.view-transition-reveal-from-bottom-enter-active   { .animation-name( artificial ); }

// variants

.view-transition-reveal-from-top-leave      { .animation-name( viewRevealFromTopLeave ); }
.view-transition-reveal-from-right-leave    { .animation-name( viewRevealFromRightLeave ); }
.view-transition-reveal-from-bottom-leave   { .animation-name( viewRevealFromBottomLeave ); }
.view-transition-reveal-from-left-leave     { .animation-name( viewRevealFromLeftLeave ); }

.view-transition-reveal-from-left-enter-active     { .animation-name( viewRevealFromLeftEnter ); }
.view-transition-reveal-from-right-enter-active    { .animation-name( viewRevealFromRightEnter ); }