From 6794093e8ef2f40ac2a694df1e8557404bacad50 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Sat, 25 Apr 2020 18:58:47 -0700
Subject: [PATCH] fix hover/focus beahvior for remove button

---
 src/ItemList.js | 38 ++++++++++++++++++--------------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/ItemList.js b/src/ItemList.js
index 3d7af94..96c7412 100644
--- a/src/ItemList.js
+++ b/src/ItemList.js
@@ -64,7 +64,6 @@ export function Item({ item, outfitState, dispatchToOutfit }) {
 
   return (
     <Box
-      role="group"
       mb="1"
       mt="1"
       p="1"
@@ -77,12 +76,16 @@ export function Item({ item, outfitState, dispatchToOutfit }) {
       className={
         "item-container " +
         css`
-          input:active + & {
-            border-color: ${theme.colors.green["800"]};
-          }
+          &:hover,
           input:focus + & {
-            border-style: dotted;
-            border-color: ${theme.colors.gray["400"]};
+            background-color: ${theme.colors.gray["100"]};
+          }
+
+          input:active + & {
+            border-color: ${theme.colors.green["400"]};
+          }
+          input:checked:focus + & {
+            border-color: ${theme.colors.green["800"]};
           }
         `
       }
@@ -105,20 +108,15 @@ export function Item({ item, outfitState, dispatchToOutfit }) {
             opacity="0"
             transitionProperty="opacity color"
             transitionDuration="0.2s"
-            _groupHover={{
-              opacity: 1,
-              transitionDuration: "0.5s",
-            }}
-            _hover={{
-              opacity: 1,
-              color: "gray.800",
-              backgroundColor: "gray.200",
-            }}
-            _focus={{
-              opacity: 1,
-              color: "gray.800",
-              backgroundColor: "gray.200",
-            }}
+            className={css`
+              &:hover,
+              &:focus,
+              input:focus + .item-container & {
+                opacity: 1;
+                color: ${theme.colors.gray["800"]};
+                backgroundcolor: ${theme.colors.gray["200"]};
+              }
+            `}
           />
         </Tooltip>
       )}