From 6810138b4cc13756c6d453d0b8a0ad7d36ccd540 Mon Sep 17 00:00:00 2001
From: dcodes05 <danutcodes@gmail.com>
Date: Sun, 13 Aug 2023 15:01:20 +0200
Subject: [PATCH] style: remove the need of :has selector for input and use
 :focus-within instead

---
 libs/shared/components/src/Cards/SwapCard/Input.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/libs/shared/components/src/Cards/SwapCard/Input.tsx b/libs/shared/components/src/Cards/SwapCard/Input.tsx
index 1db6f73d..8506c6f3 100644
--- a/libs/shared/components/src/Cards/SwapCard/Input.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/Input.tsx
@@ -44,11 +44,7 @@ export function Input({
         border: '1px solid',
         borderColor: 'divider',
         borderRadius: 1,
-        // !! parent selector (:has) -> doesnt work in firefox oob, only with a flag
-        '&:hover, &:has(input:focus)': {
-          background: (theme) =>
-            `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box,
-             linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) border-box;`,
+        '&:hover, &:focus-within': {
           borderColor: 'transparent',
           borderStartStartRadius: (theme) => theme.shape.borderRadius,
           borderStartEndRadius: (theme) => theme.shape.borderRadius,
@@ -68,6 +64,11 @@ export function Input({
                 0.4,
               )} 100%) border-box;`,
         },
+        '&:focus-within': {
+          background: (theme) =>
+            `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box,
+             linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) border-box;`,
+        },
       }}
     >
       <Box sx={styles}>