/* Wrapper element for the menu */
.menuwrap {

	/* Use a light-grey background with a system-themed font. */
	background-color: #eee;
	font-family: system-ui, sans-serif;
	
	/* Using inline-block for the menu wrapper allows it to size
	its width according to the size of the content, rather than
	being as wide as the HTML Element object. */
	display: inline-block;
	
	/* Show a rounded border. Use overflow: hidden to ensure the menu
	items don't overlap the border. */
	border: 0.3em solid #888;
	border-radius: 1em;
	overflow: hidden;
	
	/* Add a box shadow to give the menu a raised appearance. */
	box-shadow: 0.5em 0.5em 1em #444;
}


/* Menu fade animations are based on the classes "showing" and "hiding".
The fade in animation fades the opacity from 0 to 100, also stretches 
from slightly smaller to full size. */
@keyframes menuFadeIn {
	from {
		opacity: 0%;
		transform: scale(0.85, 0.85);
	}
	to {
		opacity: 100%;
	}
}

.menuwrap.showing {
	/* The transform origin should be in the top-left corner, so the
	animated scaling stretches outward from the clicked point. */
	transform-origin: 0% 0%;
	
	animation: 0.2s ease-out menuFadeIn;
}

/* The fade out animation is a simple opacity fade out. */
@keyframes menuFadeOut {
	from {
		opacity: 100%;
	}
	to {
		opacity: 0%;
	}
}

.menuwrap.hiding {
	/* Note that the fade out animation uses a forwards fill mode.
	This ensures the opacity remains 0 until the element is destroyed. */
	animation: 0.2s ease-out forwards menuFadeOut;
}

/* Menu items are a full row in the menu, and contain an icon and text.
Use flex display for convenient centering, and add some padding. */
.menuitem {
	display: flex;
	align-items: center;
	padding-right: 1em;
}

/* Reserve a 2em square space for menu icons, and also use flex display
to center any content within that square. Add some padding to shrink the
icon a little bit within the square. */
.menuicon {
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.25em;
}

/* The menu icon box includes an SVG element for the icon. Make sure it
sizes to fill the icon box. */
.menuicon svg {
	width: 100%;
	height: 100%;
}

/* Adjust the menu text to be padded and a little larger. */
.menutext {
	padding: 0.2em;
	font-size: 1.2em;
}

/* When hovering a menu item, make three changes:
1) Use a blue menu item background color
2) Make the contained menu item text turn white
3) Switch the SVG icon fill color to white */
.menuitem:hover {
	background-color: blue;
}

.menuitem:hover .menutext {
	color: white;
}

.menuitem:hover svg {
	fill: white;
}

/* Make the menu item go a darker shade of blue when activated,
so it visually responds to clicks. */
.menuitem:active {
	background-color: #008;
}

/* The menu separator is a hr element. Make it 0.1em high and
a grey color, so it better suits the menu style. */
.menuwrap hr {
	border: 0;
	height: 0.1em;
	background-color: #888;
}

.menuitem.disabled {
    color: gray; /* Grey out the text */
    cursor: not-allowed; /* Show a "not-allowed" cursor */
    opacity: 0.5; /* Make it semi-transparent */
    pointer-events: none; /* Prevent clicks and other interactions */
}

.menuitem.disabled .menuicon {
    opacity: 0.5; /* Grey out the icon */
}