From 261d9d594b50e8a686b426bdaaf57080fc230394 Mon Sep 17 00:00:00 2001
From: BPower0036 <80090789+BPower0036@users.noreply.github.com>
Date: Mon, 5 Dec 2022 08:30:43 +0000
Subject: [PATCH] Fix broken radio focus styling in light mode

https://github.com/mozilla/multi-account-containers/commit/5ccf55cbd18eacce61dc776934cf96d1f9386b98
---
 src/css/popup.css | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index 08ca85f..0c5300c 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -1905,15 +1905,25 @@ manage things like container crud */
   margin-inline: auto;
 }
 
+/* When focusing the element add a thin blue highlight to match input fields. This gives a distinction to other selected radio items */
+.radio-choice > .radio-container > [type="radio"]:focus + label {
+  outline: solid 1px var(--input-border-focus-color);
+  -moz-outline-radius: 100%;
+}
+
 .radio-choice > .radio-container > [type="radio"]:checked + label {
   background-color: var(--usercontext-bg-focus-color);
   border-radius: 100%;
 }
 
-/* When focusing the element add a thin blue highlight to match input fields. This gives a distinction to other selected radio items */
-.radio-choice > .radio-container > [type="radio"]:focus + label {
-  outline: solid 1px var(--input-border-focus-color);
-  -moz-outline-radius: 100%;
+.radio-choice > .radio-container > [type="radio"]:checked + label:hover {
+  background-color: var(--usercontext-bg-hover-color);
+  border-radius: 100%;
+}
+
+.radio-choice > .radio-container > [type="radio"]:checked + label:active {
+  background-color: var(--usercontext-bg-active-color);
+  border-radius: 100%;
 }
 
 .edit-container-panel fieldset {
@@ -2404,4 +2414,4 @@ tr:hover > td > .trash-button {
 
 .searchbar input {
   inline-size: 100%;
-}
\ No newline at end of file
+}