div.menu-tab{
	--scale: 16px; --space: var(--scale); --border: max(1px,var(--scale) / 16);
	--space-tabs: calc(var(--scale) * .5);
	--space-right: calc(var(--scale) * .5);
	--text-fs: calc(var(--scale) * 1.25);
	--icon-fs: calc(var(--scale) * 1.25 * 1.25);
	display: block;
	border-top: solid var(--border) hsl(var(--hue),var(--saturation),70%);
}

div.menu-tab:last-of-type{
	border-bottom: solid var(--border) hsl(var(--hue),var(--saturation),70%);
}

div.menu-tab{
	display: flex; flex-direction: column;
}

div.menu-tab.--open{
	padding: var(--space-tabs) 0;
}

a.menu-tab--header{
	display: flex; align-items: center; flex-wrap: nowrap; padding: var(--space); padding-right: var(--space-right);
	color: hsl(var(--hue),var(--saturation),var(--lightness)); font-size: var(--text-fs);
    text-decoration: none; cursor: pointer;
}

a.menu-tab--header:hover{
	background-color: hsl(var(--hue),var(--saturation),calc(var(--lightness-bg) + var(--lightness-hover)));
	text-decoration: underline;
}

div.menu-tab.--open a.menu-tab--header:hover{
	text-decoration: none;
}

a {
    text-decoration: none;
}

a * {
    cursor: pointer
}

div.menu-tab.--open > a.menu-tab--header:hover{
	cursor: default;
	background-color: transparent;
}

div.menu-tab.--open > a.menu-tab--header:hover * {
    cursor: default;
}

image.menu-tab--icon {
	cursor: inherit; margin-right: var(--space-right); flex-shrink: 0; font-size: var(--icon-fs);
}

div.menu-tab--caption {
	cursor: inherit;
}

div.menu-tab.--open div.menu-tab--caption {
	font-weight: bold;
}

div.menu-tab--container{
	display: none;
}

div.menu-tab.--open > div.menu-tab--container{
	display: block;
}

div.menu-subpart{
	--scale: 16px; --space-left: var(--scale); --space: calc(var(--scale) * .5);
	display: block; padding-top: calc(var(--scale) * .75); --space-bottom: calc(var(--scale) * .25);
}

div.menu-subpart:first-child{
	padding-top: 0;
}

div.menu-subpart{
	display: flex; flex-direction: column;
}

div.menu-subpart--header{
	display: flex; align-items: center; flex-wrap: nowrap; 
	padding: var(--space); padding-left: var(--space-left); padding-bottom: var(--space-bottom);
	color: hsl(var(--hue),var(--saturation),50%);
}

image.menu-subpart--icon {
	cursor: inherit; margin-right: var(--space); flex-shrink: 0;
}

div.menu-subpart--caption {
	cursor: inherit;
}

div.menu-separator{
	--scale: 16px; --space: calc(var(--scale) * .25);
	--height: max(1px,var(--scale) * .0625);
	display: block;
	margin: var(--space); height: var(--height);
	background-color: hsl(var(--hue),var(--saturation),80%);
}

.menu-item{
	--lightness: 50%;
	--scale: 16px; --icon-fs: calc(var(--scale) * 1.25); --space: calc(var(--scale) / 2); --selected: calc(var(--scale) * 6/16);
	--space-left: var(--scale); --space-left-selected: calc(var(--space-left) - var(--selected)); 
	display: block;
}

.menu-item{
	display: flex; align-items: center; flex-wrap: nowrap;
	cursor: pointer; padding: var(--space);
	color: hsl(var(--hue),var(--saturation),var(--lightness));
    text-decoration: none; cursor: pointer;
}

a * {
    cursor: pointer
}

.menu-item:hover{
	background-color: hsl(var(--hue),var(--saturation),calc(var(--lightness-bg) + var(--lightness-hover)));
}

.menu-item--icon {
	cursor: inherit; margin-right: var(--space); flex-shrink: 0; font-size: var(--icon-fs);
	width: var(--icon-fs); height: var(--icon-fs);
}

.menu-item--caption {
	cursor: inherit; overflow: hidden;
}

.menu-item.--activated{
	--lightness: 50%;
	--lightness-bg: 90%;
	color: hsl(var(--hue),var(--saturation-color),var(--lightness));
}

.menu-item.--disabled{
	--lightness: 80%; cursor: default;
}

.menu-item.--disabled:hover{
	background-color: transparent;
}

section.app--menu .menu-item{
	color: hsl(var(--hue),var(--saturation-color),var(--lightness));
}

.menu-item.--selectable{
	padding-left: var(--space-left);
}

.menu-item.--selectable.--selected{
	padding-left: var(--space-left-selected); cursor: default;
	color: hsl(var(--hue),var(--saturation-color),var(--lightness));
	border-left: solid var(--selected) hsl(var(--hue),var(--saturation-color),var(--lightness));
	background-color: hsl(var(--hue),var(--saturation),calc(var(--lightness-bg) + var(--lightness-hover)));
}

a.menu-item.--selectable.--selected[href]{
	cursor: pointer;
}