/* Loosely based on https://leewarrick.com/blog/css-only-menus/ */


/* Popup layout & visual styling */

.popup
{
	position: relative;		/* ATTENTION: This one is essential to make position:absolute below work as expected */
}

.popup ul.popup-menu
{
	/* Hide popup menu by default */
	
	display: none;
	
	/* Display menu above popup icon */
	
	position: absolute;		/* ATTENTION: for position:absolute to work as expected, the position:relative in the parent is essential! */
	bottom: 68px;			/* Empiric value, don'T understand why */
	
	/* Restrict vertical size and enable scrolling if necessary */
	
    max-height: calc(100vh - 100px);	/* View height minus toolbar and a few extra pixels */
    overflow-y: auto;

	/* Menu Background */
	
	padding: 8px 0px 8px;
	border-radius: 8px;
	border: 1.5px solid gray;
	background: #444;

	/* Remove bullets */
	
	list-style: none;
}

/* popup icon has a blue background when open */

.popup img
{
	width: 60px;
	height: 60px;
	border-radius: 30px;
}

.popup.open img
{
	background-color: var(--fmblue);
}

/* Show popup when it has class "open" (after the icon was clicked) */

.popup.open ul.popup-menu
{
	display: block;
    z-index: 20;		/* show on top of other layers */
}

/* Left or right alignment */

ul.toolbar li.popup ul.popup-menu.right
{
	right: 0;
}

ul.toolbar li.popup ul.popup-menu.left
{
	left: 0;
}

/* Popup menu item layout */

ul.popup-menu li.popup-menu-item
{
	padding: 8px 24px 8px 16px;
	white-space: nowrap;	/* Make sure that menu item text is not wrapped to next line */
}

ul.popup-menu li.popup-menu-item.section
{
	opacity: 33%;
	font-size: 12pt;
}

ul.popup-menu li.popup-menu-item.divider
{
	height: 1px;
	padding: 0;
	margin: 0;
}

ul.popup-menu li.popup-menu-item:before
{
	content:url('none.png');
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
}

ul.popup-menu li.popup-menu-item.checkmark:before
{
	content:url('checkmark.png');
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
}

ul.popup-menu li.popup-menu-item.stop:before
{
	content:url('stop.png');
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
}

/* Hilite menu item when hovered or clicked */

ul.popup-menu li.popup-menu-item:hover:not(.section):not(.disabled),
ul.popup-menu li.popup-menu-item:active:not(.section):not(.disabled)
{
	background-color: var(--fmblue);
}
