#3476354 Fix flickering slots

Closes #3476354

In addition to fixing the flicker on hover, I took a moment to implement the 'empty slot' state as seen in https://www.figma.com/design/hOjDvI5yWMPdyugjpNuzW4/A--Experience-Builder?node-id=2991-23793&node-type=frame&t=CefUccZVYtxlQFAN-0

I also added a green border when hovering over the 'root' slot to make it easier to differentiate between dropping into a component slot or next to the component with the slot.

However I stopped short of adding the 'Add content' button as I'm concerned that both the addition of regions as slots and the work to replace the preview annotations with HTML comments will mean a lot of this code will be refactored/changed and didn't want to further complicate things in this MR.

ui/assets/css/preview.css

@@ -15,6 +15,8 @@ This file is included as an attached Drupal library and as such is subject to CS
   --xb--radius-1: 3px;
   --xb--radius-2: 4px;
   --xb--blue-9: #176bfd;
+  --xb--blue-slot-bg: #CCEDF9;
+  --xb--sortable-empty-height: 40px;
 }
 
 .xb--preview-dragging .xb--sortable-list {
@@ -24,21 +26,24 @@ This file is included as an attached Drupal library and as such is subject to CS
   position: relative;
   display: flow-root; /* Prevent margin collapse from content inside */
 }
-.xb--sortable-list:empty {
-  min-height: 1.5rem;
-  border: 2px dashed #ccc;
-}
-.xb--sortable-list:empty::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  content: "Slot";
-  text-align: right;
+
+.xb--sortable-slot-empty-placeholder {
+  min-height: var(--xb--sortable-empty-height);
+  background-color: var(--xb--blue-slot-bg);
+  background-image: url('../icons/drop-plain.svg');
+  background-repeat: repeat;
+  background-position: -5px -5px;
+  background-size: 29px 30px;
+  box-shadow: inset 0 0 10px rgba(53, 129, 158, 0.3);
+  [data-xb-uuid="root"] >  & {
+    min-height: calc(4 * var(--xb--sortable-empty-height));
+  }
 }
 .xb--preview-dragging *,
 .xb--preview-dragging {
   cursor: grabbing !important;
 }
+
 .xb--sortable-ghost {
   position: absolute;
   z-index: 1;
@@ -53,7 +58,6 @@ This file is included as an attached Drupal library and as such is subject to CS
 .xb--sortable-ghost * {
   display: none;
 }
-
 [data-xb-slot-is-empty] .xb--sortable-ghost {
   top: 0;
 }