#Ctrl
{
	width: 100%; height: 100%;
	position: relative;

	display: flex; /* this is to make the justify-content havning an effect */
	justify-content: center; /* absolute positioned elements without left or right */
	
	overflow: hidden; /* this avoids scrollbars when button layout overflows due to a very small screen size */

	.Transient /* transient elements */
	{
		display: none; /* initial state  */
	}

	nav /* container for buttons */
	{
		z-index: 1;
		position: absolute;
		padding: var(--gap);
		
		display: flex;
		row-gap: var(--gap);
		column-gap: var(--gap);
		
		/* the following layout ensures that the first button of a nav is put into
		the corner and kept at this position also during wrap. The flow of
		subsequent elements is in anti-clockwise direction. */
		
		&.Left
		{
			left: 0;
		}
		&.Right
		{
			right: 0;
		}
		&.Top
		{
			top: 0;
			flex-wrap: wrap;
		}
		&.Bottom
		{
			bottom: 0;
			flex-wrap: wrap-reverse;
		}
		&.Top.Left
		{
			flex-direction: column;
		}
		&.Bottom.Right
		{
			flex-direction: column-reverse;
		}
		&.Top.Right
		{
			flex-direction: row-reverse;
		}
		&.Bottom.Left
		{
			flex-direction: row;
		}
		&.Top.Left, &.Bottom.Right
		{
			width: min-content;
			max-height: calc(100% - var(--button-size) - var(--gap));
		}
		&.Top.Right, &.Bottom.Left
		{
			height: min-content;
			max-width: calc(100% - var(--button-size) - var(--gap));
		}
	}
	
	output /* temporary text information */
	{
		z-index: 2;
		position: absolute;
		top: var(--gap);
		max-width: calc(100% - 2 * (var(--button-size) + 2 * var(--gap)));
		max-height: calc(2 * var(--button-size) + var(--gap)); /* prevents layout corruption due to very long info messages */
		overflow: hidden;
		padding: 3px 5px;
		font-size: 1em;
	}
}