From 85b14d2c6fc894221496ee097ccb3d8680fa4085 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Thu, 21 Sep 2023 16:45:20 +0100
Subject: [PATCH] refactor: ensure empty DropZones highlighting works in FF and
 Safari

---
 packages/core/components/DropZone/index.tsx         | 1 +
 packages/core/components/DropZone/styles.module.css | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
index d50f055e5..b6c7aecbb 100644
--- a/packages/core/components/DropZone/index.tsx
+++ b/packages/core/components/DropZone/index.tsx
@@ -143,6 +143,7 @@ function DropZoneEdit({ zone, style }: DropZoneProps) {
         isDestination: draggedDestinationId === zoneCompound,
         isDisabled: !isEnabled,
         isAreaSelected,
+        hasChildren: content.length > 0,
       })}
     >
       <DroppableStrictMode
diff --git a/packages/core/components/DropZone/styles.module.css b/packages/core/components/DropZone/styles.module.css
index a8f70b2bf..7e66683d9 100644
--- a/packages/core/components/DropZone/styles.module.css
+++ b/packages/core/components/DropZone/styles.module.css
@@ -28,8 +28,12 @@
 .DropZone--draggingOverArea:not(:has(.DropZone--hoveringOverArea)),
 .DropZone--hoveringOverArea:not(.DropZone--isDisabled):not(
     .DropZone--isRootZone
-  ),
-.DropZone:not(:has(.DropZone-item)) {
+  ) {
+  background: var(--puck-color-azure-9);
+  outline: 2px dashed var(--puck-color-azure-7);
+}
+
+.DropZone:not(.DropZone--hasChildren) {
   background: var(--puck-color-azure-9);
   outline: 2px dashed var(--puck-color-azure-7);
 }