feat(core): ✨ add overlay as affordnance to popup menus

resources/mixins.less

@@ -34,6 +34,7 @@
 // When using fadeChildren, the child elements need to have
 // opacity: 0 set manually
 .citizen-card-show( @fadeChildren: true ) {
+	z-index: @z-index-overlay;
 	opacity: 1;
 	pointer-events: auto;
 	transform: none;

resources/skins.citizen.styles/components/Header.less

@@ -89,7 +89,6 @@
 	}
 
 	&__inner {
-		z-index: -1; // Inner element should be behind menu and search
 		display: flex;
 		min-width: 0;
 		flex-direction: var( --header-direction );
@@ -177,6 +176,33 @@
 	.citizen-header {
 		transition: var( --transition-menu );
 		transition-property: transform;
+
+		/*
+		 * Add overlay to menus as affordnance
+		 * TODO: We should use JS to add the overlay instead of abusing CSS
+		*/
+		.citizen-menu-checkbox-checkbox,
+		.citizen-button {
+			contain: initial;
+
+			&[ aria-expanded='true' ] {
+				&::before {
+					position: fixed;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
+					width: auto;
+					height: auto;
+					background-color: var( --background-color-overlay );
+					content: '';
+				}
+
+				~ .citizen-menu-checkbox-target {
+					z-index: 1;
+				}
+			}
+		}
 	}
 
 	.citizen-scroll--down .citizen-header {

resources/skins.citizen.styles/components/Menu.less

@@ -82,7 +82,6 @@
 		height: 0;
 		padding: 0;
 		margin: 0;
-		opacity: 0;
 
 		// HACK: Fake focus styles
 		&:focus {

resources/skins.citizen.styles/components/Search.less

@@ -127,32 +127,4 @@
 			transition: none;
 		}
 	}
-
-	#citizen-search__checkbox:checked {
-		+ .citizen-search__card {
-			z-index: 2;
-		}
-
-		// HACK: Click overlay to dismiss search bar
-		~ .citizen-search__button {
-			// Reset containment so that the overlay is visible
-			contain: initial;
-
-			.citizen-search__buttonIcon {
-				display: none;
-			}
-
-			#citizen-search__buttonCheckbox {
-				position: fixed;
-				z-index: 1;
-				top: 0;
-				right: 0;
-				bottom: 0;
-				left: 0;
-				width: auto;
-				height: auto;
-				background-color: var( --background-color-overlay );
-			}
-		}
-	}
 }

skinStyles/extensions/Echo/ext.echo.styles.badge.less

@@ -82,7 +82,6 @@
 // Add quiet background hover states
 #pt-notifications-alert,
 #pt-notifications-notice {
-	z-index: 1; // fix background clipping
 	border-radius: var( --border-radius--small );
 
 	&:hover {