/*---------------------------------------------------------------------------*/

nav
{
	flex: 0 0 auto; /* grow shrink base */
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0 6em; /* ver hor */
}

nav.Main
{
	background-color: var(--nav_background);
	color: var(--nav_color);
	font-weight: bold;
}

nav.App
{
	border-bottom: solid 1px var(--nav_background);
}

nav a
{
	font-weight: normal;
	text-decoration-color: currentcolor;
}

/*---------------------------------------------------------------------------*/
/* menu elements */

nav>*
{
	overflow: hidden;
	min-width: 34px; /* preserves at least the icon to be visible */
}

nav>*.Active
{
	overflow: visible; /* otherwise sub menus will be cut! */
	min-width: unset;
}

nav>*.Active a
{
	text-decoration: none; /* makes the underline disappear for opened sub menus */
}

nav.Main .Button:hover,
nav.Main .Button.Active
{
	background-color: var(--article_background);
	color: var(--article_color);
}

nav.App>*:hover,
nav.App>*.Active
{
	background-color: var(--submenu_background);
	color: var(--submenu_color);
}

/*---------------------------------------------------------------------------*/

.Button
{
	position: relative; /* to make it an anchestor for sub menu positioning */
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap; /* to prevent text wrapping into a new line */
	/* text-overflow: ellipsis; */
	text-align: left;
	margin-left: 1px;
	margin-right: 1px;
}

nav.Main .Button
{
	padding: 0.5em 1.0em;
}

nav.App .Button
{
	padding: 0.5em 0.5em;
}

.Button img
{
	/*margin-left: 5px;*/
	margin-right: 0.25em;
	vertical-align: bottom;
}

.Button:hover
{
	transition: var(--transition);
}

.Button.Disabled
{
	cursor: auto;
}

.Button.Disabled img
{
	filter: saturate(0) contrast(0.5) brightness(1.5);
}

/*---------------------------------------------------------------------------*/

.SubMenu /* this is placed as an achor for the sub menu */
{
	position: relative;
	display: none;
}

.SubMenu>* /* this is the actual sub menu window */
{
	position: absolute;
	top: 0px; left: 0px;
	width: auto;
	z-index: 1; /* required to be on top of other buttons */
	padding-left: 1em;
	padding-right: 1em;
	border: solid 1px var(--nav_background);
	border-top: none;
	color: var(--submenu_color);
	background-color: var(--submenu_background);
	white-space: nowrap; /* wrap must be explicit with <br> tags */
	max-height: 75vh;
	overflow: hidden auto; /* x y */
}

.SubMenu section
{
	margin: 0.7em 0; /* ver hor */
}

.SubMenu .Heading
{
	text-decoration: underline;
}

.SubMenu select,
.SubMenu input[type=submit],
.SubMenu input[type=text],
.SubMenu input[type=password],
.SubMenu .CheckSelect
{
	width: 12em;
}
.SubMenu select.Slim
{
	width: 7em;
}

.SubMenu input[type=number]
{
	width: 4em;
}

.SubMenu input[type=color]
{
	width: 2em;
	height: 1.5em; /* no effect on Forefox, which keeps a min height of 20px content */
}

.SubMenu .CheckSelect
{
	border: solid 1px grey;
}

.SubMenu select,
.SubMenu input[type=number],
.SubMenu input[type=color],
.SubMenu .CheckSelect
{
	margin-top: 1px;
	margin-bottom: 1px;
}

.SubMenu .CheckSelect
{
	max-height: 7.5em;
	overflow-y: auto;
	background-color: white;
	padding: 3px;
}

.SubMenu .CheckSelect hr
{
	margin-block-start: 2px;
	margin-block-end: 1px;
}

.CheckSelect
{
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

.CheckSelect select
{
	width: 4em;
	margin-right: 3px;
	/* text-overflow: ellipsis; */
}

.SubMenu label
{
	white-space: nowrap;
}

.SubMenu .Indent
{
	margin-left: 0.25em;
	padding: 0.25em;
	border-left: solid 1px grey;
}

.SubMenu input[type=submit]
{
	margin: 2px 0;
	text-align: left;
}

.SubMenu .Info
{
	white-space: normal;
}

.SubMenu header /* used in shared forms when displayed as .Dialog */
{
	display: none;
}

/*---------------------------------------------------------------------------*/