#Map /* Map with overlay elements */
{
	position: relative;
	display: flex;
	justify-content: center; /* absolute positioned elements without left or right */

	.Map /* the div composed by leaflet */
	{
		z-index: 1;
		width: 100%; height: 100%;
	}

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

	output /* text information */
	{
		z-index: 2;
		position: absolute;
		bottom: 28px;
		border: 1px solid; border-radius: 5px;
		border-color: var(--border-color);
		background-color: var(--background-color);
		padding: 3px 5px;
		font-size: 1em;
	}

	nav /* container for buttons */
	{
		z-index: 3;
		position: absolute;
		padding: var(--gap);
		
		display: flex;
		flex-wrap: wrap;
		row-gap: var(--gap);
		column-gap: var(--gap);

		&.Top.Left, &.Bottom.Right
		{
			width: min-content;
			max-height: 100%;
			flex-direction: column;
		}
		&.Top.Right, &.Bottom.Left
		{
			max-width: 100%;
			height: min-content;
			flex-direction: row;
		}
		&.Left { left: 0; }
		&.Right { right: 0; }
		&.Top { top: 0; }
		&.Bottom { bottom: 0; }
	}
}