style: remove the need of :has selector for input and use :focus-with…

…in instead
OriginProtocol · Aug 13, 2023 · 6810138 · 6810138
1 parent cf6e038
commit 6810138
Showing 1 changed file with 6 additions and 5 deletions.
diff --git 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}>