/* Panels */
.moon-panels {
	&.activity,
	&.alwaysviewing {
		pointer-events: none;

		&.moon-composite {
			.moon-panels-background-scrim {
				.moon-composite();
			}
		}

		* {
			pointer-events: auto;
		}
		.moon-panels-breadcrumb {
			position: absolute;
			height: 100%;
			width: @moon-breadcrumb-width;
			right: -@moon-breadcrumb-width;

			.moon-panels-breadcrumb-header {
				border-top: 0.25rem solid #ccc;
				padding-top: 3px;
				margin: @moon-app-keepout;
				font-family: @moon-super-header-font-family;
				font-size: @moon-breadcrumb-text-size;
			}
			&.spotlight {
				background: @moon-spotlight-color;
				color: @moon-spotlight-text-color;

				.moon-panels-breadcrumb-header {
					border-color: @moon-spotlight-text-color;
				}
			}
		}
		.moon-panel {
			box-sizing: border-box;
			padding: @moon-app-keepout @moon-spotlight-outset;
		}
	}

	&.activity {
		.moon-panels-breadcrumbs {
			left: 0;
			width: @moon-breadcrumb-width;
		}
		.moon-panels-viewport {
			left: @moon-breadcrumb-width;
			right: 0;
			> *:not(:first-child) {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			> *:first-child {
				position: absolute;
				left: 0;
				right: 0;
				height: 100%;
			}
		}
		.moon-panels-panel-scrim {
			left: 0;
			width: 100%;
			background-color: @moon-panels-scrim-activity-bg-color;

			.moon-panels-branding {
				position: absolute;
				top: @moon-panel-breadcrumb-height + 12px; // breadcrumb height + padding
				width: @moon-panel-breadcrumb-inner-width;
				bottom: @moon-app-keepout;
				left: @moon-app-keepout;
				background-position: bottom center;
			}
		}
		.moon-panel {
			padding-left: 0;
		}
		&.first {
			.moon-panels-viewport {
				overflow: visible;
				
				> *:first-child {
					left: -@moon-breadcrumb-width;
					padding-left: @moon-spotlight-outset;
				}
				
			}
		}
		&:not(.first) {
			.moon-application-close-button {
				.enyo-locale-right-to-left & {
					left: (@moon-breadcrumb-width + @moon-spotlight-outset);
				}
			}
		}
	}

	&.alwaysviewing {
		.moon-panels-breadcrumb-header {
			color: white;
			border-top: 6px solid white;
		}
		.moon-panels-breadcrumbs {
			left: 0;
			width: 50%;
		}
		.moon-panels-viewport > * {
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.moon-panels-viewport,
		.moon-panels-panel-scrim {
			left: 50%;
			width: 50%;
		}
		.moon-panels-panel-scrim {
			background-color: @moon-panels-scrim-always-viewing-bg-color;
		}
	}

	// Scrim
	.moon-panels-background-scrim {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: black;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.5s linear;
		-webkit-transition: opacity 0.5s linear;
		-moz-transition: opacity 0.5s linear;

		&.visible {
			opacity: 0.2;
		}
	}
}

// Base set of styling for scrim to prevent receiving user input while transitioning
.moon-panels-client-wrapper:after {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
// Adding the content property here, instead of above, means that this element will only appear in
// the DOM during ".transitioning". This was altered to improve marquee animation performance.
// Pseudo-elements without a content property cannot receive styling.
.moon-panels.transitioning .moon-panels-client-wrapper:after {
	content: '';
}


.moon-panels:not(.activity):not(.alwaysviewing) {
	.moon-panels-viewport > * {
		position: absolute;
		width: 100%;
		height: 100%;
	}
}

.moon-panels-breadcrumbs,
.moon-panels-viewport,
.moon-panels-panel-scrim {
	overflow: hidden;
	position: absolute;
	height: 100%;
}

/* Show/Hide Handle */

.moon-panels-handle {
	position: absolute;
	top: 0;
	left: auto;
	right: -(@moon-panels-handle-width);
	height: 100%;
	width: @moon-panels-handle-width;
	z-index: 100;

	&:before {
		position: absolute;
		display: block;
		height: 100%;
		width: 100%;
		line-height: 100vh;
		margin-left: -12px;
		margin-right: 12px;
		background-color: @moon-panels-handle-bg-color;
		font-family: @moon-icon-font-family;
		font-size: @moon-panel-handle-icon-font-size;
		content: @moon-icon-arrowlargeleft;
		color: @moon-spotlight-text-color;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition: -webkit-transform 0.2s linear, opacity 0.2s linear;
		transition: transform 0.2s linear, opacity 0.2s linear;
		opacity: 1;
		text-align: center;
	}

	&.right:before {
		content: @moon-icon-arrowlargeright;
	}

	&.spotlight:before {
		background-color: @moon-panels-spot-fg-color;
		-webkit-transform: translate3d(-(@moon-panels-handle-width - 12), 0, 0);
		transform: translate3d(-(@moon-panels-handle-width - 12), 0, 0);
	}

	&.stashed:before {
		opacity: 0;
	}

	&.hidden {
		display: none;
	}
}
