From 1d8181028b5cebc611fb23873e71a8e31a6b0475 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Wed, 18 Dec 2024 11:27:02 +0100
Subject: [PATCH] :lipstick: [#4949] Modal close button on dark mode

The modal close button changes color based on the light/dark mode of the page.

In addition, focus now increases the button opacity, making it more user-friendly

Backport-of: #4950
---
 src/openforms/scss/components/admin/_ReactModal.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/openforms/scss/components/admin/_ReactModal.scss b/src/openforms/scss/components/admin/_ReactModal.scss
index ded2494645..8d81d3f9c4 100644
--- a/src/openforms/scss/components/admin/_ReactModal.scss
+++ b/src/openforms/scss/components/admin/_ReactModal.scss
@@ -64,10 +64,14 @@
     top: 20px;
     right: 20px;
     cursor: pointer;
+    color: var(--body-fg);
+    background: transparent;
+    border: none;
     opacity: 0.5;
     line-height: 1;
 
-    &:hover {
+    &:hover,
+    &:focus {
       opacity: 0.8;
     }
   }