/*

-------------------------------------------------------------------------------
 TEMPLATE
-------------------------------------------------------------------------------

<template context-menu=[NAME]>
	<div class="menu-item" onclick="[CODE]">
		<div class="menu-item--icon material-icons">[ICON]</div>
		<div class="menu-item--caption">[CAPTION]</div>
	</div>
	<div class="menu-separator"></div>
	<div class="menu-item --disabled" onclick="[CODE]">
		<div class="menu-item--icon material-icons">[ICON]</div>
		<div class="menu-item--caption">[CAPTION]</div>
	</div>
</template>

<element context-menu=[NAME]></element>

-------------------------------------------------------------------------------
 INFORMATION
-------------------------------------------------------------------------------
Click on 'element' open the context menu.
Click outside of context-menu, close the context menu.
Click on a none '--disabled' 'menu-item' element, close the context menu.
-------------------------------------------------------------------------------
cf menu component
-------------------------------------------------------------------------------

*/

section.context-menu{
	--scale: 16px;
	--space: var(--scale);
	--radius: calc(var(--scale) * .25);
	--shadow: calc(var(--scale) * .25);
	--lightness-bg: 100%;
	display: block; position: absolute; overflow: auto;
	max-width: calc(100% - var(--space)); max-height: calc(100% - var(--space)); 
	border-radius: var(--radius); box-shadow: 0 0 var(--shadow) hsla(var(--hue),var(--saturation),0%,.5);
	background-color: hsl(var(--hue),var(--saturation),var(--lightness-bg));
	color: hsl(var(--hue),var(--saturation),var(--lightness)); z-index: 9900;
}

div.context-menu-icon {
	width: 24px; height: 24px; text-align: center; line-height: 24px; font-size: 16px; 
    color: hsl(var(--hue),var(--saturation),50%); cursor: pointer;
}

div.context-menu-icon:hover{
    background-color: hsl(var(--hue),var(--saturation),95%); 
    color: hsl(var(--hue),var(--saturation),30%);
}