From 0e42030d39883c1880e7594ab63f996e8b7611a3 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Sun, 16 Jul 2023 02:49:33 -0400
Subject: [PATCH] =?UTF-8?q?fix(core):=20=F0=9F=90=9B=20do=20not=20insert?=
 =?UTF-8?q?=20pseudo=20elements=20to=20input=20element?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It is invalid and does not work in Firefox.

Closes: #689
---
 .../components/Header.less                    | 31 +++++++++----------
 .../skins.citizen.styles/components/Menu.less |  1 +
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/resources/skins.citizen.styles/components/Header.less b/resources/skins.citizen.styles/components/Header.less
index 92e3db2c..54ed741b 100644
--- a/resources/skins.citizen.styles/components/Header.less
+++ b/resources/skins.citizen.styles/components/Header.less
@@ -180,26 +180,25 @@
 		/*
 		 * Add overlay to menus as affordnance
 		 * TODO: We should use JS to add the overlay instead of abusing CSS
+		 * TODO: This does not work for TOC and Pref menu
 		*/
-		.citizen-menu-checkbox-checkbox,
-		.citizen-button {
+		.citizen-header__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-header__button {
+					&::before {
+						position: fixed;
+						z-index: 1;
+						top: 0;
+						right: 0;
+						bottom: 0;
+						left: 0;
+						width: auto;
+						height: auto;
+						background-color: var( --background-color-overlay );
+						content: '';
+					}
 				}
 			}
 		}
diff --git a/resources/skins.citizen.styles/components/Menu.less b/resources/skins.citizen.styles/components/Menu.less
index de8fae67..a5743e57 100644
--- a/resources/skins.citizen.styles/components/Menu.less
+++ b/resources/skins.citizen.styles/components/Menu.less
@@ -82,6 +82,7 @@
 		height: 0;
 		padding: 0;
 		margin: 0;
+		opacity: 0;
 
 		// HACK: Fake focus styles
 		&:focus {