fix(aci): fix automation builder hover states (#96489)

updated automation builder delete buttons to only be hidden if the
device supports hover + use `visuallyHidden` instead of opacity

Author: ameliahsu

static/app/views/automations/components/automationBuilder.tsx

@@ -254,17 +254,18 @@ const IfThenWrapper = styled(Flex)`
   padding: ${p => p.theme.space.lg};
   margin-top: ${p => p.theme.space.md};
 
-  .delete-condition-group {
-    opacity: 0;
-  }
-  :hover .delete-condition-group {
-    opacity: 1;
+  /* Only hide delete button when hover is supported */
+  @media (hover: hover) {
+    &:not(:hover):not(:focus-within) {
+      .delete-condition-group {
+        ${p => p.theme.visuallyHidden}
+      }
+    }
   }
 `;
 
 const DeleteButton = styled(Button)`
   position: absolute;
   top: ${p => p.theme.space.sm};
   right: ${p => p.theme.space.sm};
-  opacity: 0;
 `;

static/app/views/automations/components/automationBuilderRow.tsx

@@ -50,17 +50,18 @@ const RowContainer = styled('div')<{incompatible?: boolean}>`
   min-height: 46px;
   align-items: center;
 
-  .delete-row {
-    opacity: 0;
-  }
-  :hover .delete-row {
-    opacity: 1;
+  /* Only hide delete button when hover is supported */
+  @media (hover: hover) {
+    &:not(:hover):not(:focus-within) {
+      .delete-row {
+        ${p => p.theme.visuallyHidden}
+      }
+    }
   }
 `;
 
 const DeleteButton = styled(Button)`
   position: absolute;
   top: ${space(0.75)};
   right: ${space(0.75)};
-  opacity: 0;
 `;