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;`, + }, }} >