@import "theme";

.main-menu
{
	font-family: $display-font;
	color: $text-default;
	position: relative;
	width: 100%;
	height: 100%;
}

.navigator-canvas
{
	position: relative;
	width: 100%;
	height: 100%;
}

// Each page the NavigationHost creates is classed "navigator-body" and parented here.
// Pages overlay each other; only the current one is shown.
.navigator-body
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.2s ease-out, transform 0.2s ease-out;

	// NavigationHost adds "hidden" to every page that isn't the current one.
	// Fade + scale out instead of display:none so the swap animates.
	&.hidden
	{
		opacity: 0;
		transform: scale(1.2);
		pointer-events: none;
	}
}