:root,
.display-builder.sl-theme-dark {
  --dropzone-placeholder-min-height: 1rem;
  --dropzone-slot-min-height: 2rem;
  --dropzone-slot-min-width: 3rem;
  --dropzone-slot-outline-type: dashed;
  --dropzone-slot-outline-width: 2px;
  --dropzone-slot-outline-offset: -2px;
  --dropzone-slot-outline-type-light: dotted;
  --dropzone-slot-outline-width-light: 1px;
  --dropzone-slot-outline-offset-light: -1px;

  /* Small visual highlight */
  --dropzone-color-light: var(--sl-color-warning-300);
  /* Strong visual highlight */
  --dropzone-color-strong: var(--sl-color-warning-600);
  /* Strong highlight for action source */
  --dropzone-color-hover: var(--sl-color-primary-300);
  /* Strong highlight for action target */
  --dropzone-color-target: var(--sl-color-warning-800);
  --dropzone-color-target-light: var(--sl-color-teal-600);
  --dropzone-z-index-label-root: 203;
  --dropzone-z-index-label-element: 202;
  --dropzone-z-index-label-slot: 201;
}

/* Common styles */
.db-dropzone {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  /* Will fail scroll of Sortable */
  /* min-height: var(--dropzone-slot-min-height); */
}

/* Because builder placeholders are normal button, reset hover as we want to
handle it instead of shoelace */
.db-placeholder.shoelace-button::part(base):hover {
  color: var(--sl-color-neutral-700);
  background-color: var(--sl-color-neutral-0);
}

/** Normal context, when nothing happen yet **/

.db-island-builder {
  .db-dropzone[data-component-id][data-slot-id]:empty {
    min-width: var(--dropzone-slot-min-width);
    min-height: var(--dropzone-slot-min-height);
  }
}

/* Act on the dropzone root */

/* @todo Start when builder is empty, show root and label to help start */
/* Same when start dragging to avoid non trigger of HTMX when the mouse is out of the dropzone. */
.display-builder--onDrag .db-dropzone--root {
  /* width: 98%; */
  /* height: 100%; */
  /* min-height: 50vh; */
}

.db-dropzone--root:empty {
  width: 98%;
  height: 100%;
  min-height: 50vh;
  margin: 0 0 0.5rem 1rem;
  outline: var(--dropzone-slot-outline-width) var(--dropzone-color-target-light) var(--dropzone-slot-outline-type-light);
}

.shoelace-drawer .db-dropzone--root:empty {
  margin-top: 1.5rem;
  margin-left: 0;
}

.display-builder--fullscreen .db-dropzone--root {
  width: 98%;
  min-height: 10vh;
  margin: 0 0 0 1rem;
}

/* Enough to make something with empty slot selectable */
[data-node-id][data-component-id]:has([data-slot-id]:empty) {
  min-width: var(--dropzone-placeholder-min-height);
  min-height: var(--dropzone-placeholder-min-height);
}

/* Highlight empty slots */
[data-slot-id]:empty {
  margin: 0.2rem;
  outline: var(--dropzone-slot-outline-width) var(--dropzone-color-target) var(--dropzone-slot-outline-type);
}

/** Hover context, when something is to be dropped **/

/* When nothing happen, slightly highlight containers of slot */
.db-island-builder {
  .db-dropzone [data-component-id]:not([data-slot-id]) {
    outline: var(--dropzone-slot-outline-width-light) var(--dropzone-color-light) var(--dropzone-slot-outline-type-light);
  }

  /* On hover, highlight only possible selectable elements */
  .db-dropzone [data-node-id]:hover,
  .db-dropzone [data-node-id]:not([data-component-id]):hover,
  .db-placeholder[data-node-id]:hover {
    position: relative;
    cursor: pointer !important;
    outline: var(--dropzone-slot-outline-width) var(--dropzone-color-hover) var(--dropzone-slot-outline-type) !important;
    outline-offset: var(--dropzone-slot-outline-offset-light) !important;
  }

  .db-dropzone [data-node-id]:hover::before,
  .db-dropzone [data-node-id]:not([data-component-id]):hover::before,
  .db-placeholder[data-node-id]:hover::before {
    position: absolute;
    z-index: var(--dropzone-z-index-label-element, 1);
    top: -16px;
    left: 0;
    display: inline-block;
    width: auto;
    margin-top: 0;
    margin-left: 0;
    padding: 0 3px;
    content: attr(data-node-title);
    text-align: left;
    white-space: nowrap;
    color: var(--db-background-color);
    background-color: var(--dropzone-color-hover);
    font-size: 0.9rem;
  }

  .db-dropzone--ghost,
  .db-dropzone--chosen {
    opacity: 0.4;
    border: var(--dropzone-slot-outline-width) var(--dropzone-color-hover) var(--dropzone-slot-outline-type);
  }

  .db-dropzone--chosen {
    opacity: 0.8;
  }

  .db-draggable--chosen {
    opacity: 0.8;
  }
}

/* Try to have highlight mode full for builder. */
.display-builder--highlight {
  .db-island-builder .db-dropzone[data-component-id][data-slot-id]:empty {
    padding: 1rem 2rem;
  }
  .db-island-builder .db-dropzone--root {
    padding: 0.3rem;
  }
  /* Expand empty slot on drag to be able to move and instance */
  .db-island-builder [data-slot-id]:hover,
  .db-island-builder [data-slot-id]:empty,
  .display-builder--onDrag .db-island-builder [data-slot-id]:empty {
    min-width: var(--dropzone-slot-min-width);
    min-height: var(--dropzone-slot-min-height);
  }

  /* When start dragging something, highlight strongly targets and show labels */
  .db-island-builder .db-dropzone--root,
  .display-builder--onDrag .db-island-builder .db-dropzone--root {
    outline: var(--dropzone-slot-outline-width) var(--dropzone-color-target-light) var(--dropzone-slot-outline-type) !important;
    outline-offset: 0 !important;
  }

  .db-island-builder [data-slot-id],
  .display-builder--onDrag .db-island-builder [data-slot-id] {
    padding: 0.5rem;
    outline: var(--dropzone-slot-outline-width) var(--dropzone-color-target) var(--dropzone-slot-outline-type);
    outline-offset: var(--dropzone-slot-outline-offset);
  }

  /* Builder only highlight */
  .db-island-builder {
    .db-dropzone [data-component-id]:not([data-slot-id]) {
      padding: 0.7rem;
      outline: var(--dropzone-slot-outline-width) var(--dropzone-color-light) var(--dropzone-slot-outline-type);
    }
    .db-dropzone [data-node-id],
    .db-dropzone [data-node-id]:not([data-component-id]),
    .db-placeholder[data-node-id] {
      position: relative;
      margin: 0.5rem;
      padding: 0.5rem;
      cursor: pointer !important;
      outline: var(--dropzone-slot-outline-width) var(--dropzone-color-strong) var(--dropzone-slot-outline-type);
      outline-offset: var(--dropzone-slot-outline-offset);
    }
    .db-dropzone [data-node-id]::before,
    .db-dropzone [data-node-id]:not([data-component-id])::before,
    .db-placeholder[data-node-id]::before {
      position: absolute;
      z-index: var(--dropzone-z-index-label-element, 1);
      top: 0;
      left: 0;
      display: inline-block;
      padding: 0 3px;
      content: attr(data-node-title);
      text-align: left;
      color: var(--db-background-color);
      background-color: var(--dropzone-color-hover);
      font-size: 14px;
    }

    .db-dropzone [data-node-id]::before,
    .db-dropzone [data-node-id]:not([data-component-id])::before,
    .db-placeholder[data-node-id]::before {
      white-space: nowrap;
      background-color: var(--dropzone-color-strong);
    }
    .db-dropzone [data-node-id]:hover::before,
    .db-dropzone [data-node-id]:not([data-component-id]):hover::before,
    .db-placeholder[data-node-id]:hover::before {
      white-space: nowrap;
      background-color: var(--dropzone-color-hover) !important;
    }
  }

  .db-island-builder [data-slot-id]::after,
  .display-builder--onDrag .db-island-builder [data-slot-id]::after {
    position: absolute;
    z-index: var(--dropzone-z-index-label-slot);
    top: -10px;
    right: -10px;
    display: inline-block;
    padding: 0 3px;
    content: attr(title);
    text-align: left;
    white-space: nowrap;
    color: var(--db-background-color);
    background-color: var(--dropzone-color-target);
    font-size: 0.9rem;
  }
  /* Base container style when starting empty with nothing */
  .db-island-builder .db-dropzone--root:empty::after,
  .db-island-builder .db-dropzone.db-dropzone--root::after,
  .display-builder--onDrag .db-island-builder .db-dropzone.db-dropzone--root::after {
    position: absolute;
    z-index: var(--dropzone-z-index-label-root);
    top: -9px;
    right: -2px;
    display: inline-block;
    padding: 0 3px;
    content: attr(data-node-title);
    text-align: left;
    color: var(--db-background-color);
    background-color: var(--dropzone-color-target-light);
    font-size: 0.7rem;
  }
  .db-island-builder .db-dropzone.db-dropzone--root::before {
    font-size: 0.9rem;
  }

  .db-island-builder .db-dropzone *:not([data-slot-id]):has([data-slot-id])::before,
  .display-builder--onDrag .db-island-builder .db-dropzone *:not([data-slot-id]):has([data-slot-id])::before {
    position: absolute;
    z-index: var(--dropzone-z-index-label-element, 1);
    top: -2px;
    left: -2px;
    display: inline-block;
    padding: 0 3px;
    content: attr(data-node-title);
    text-align: left;
    color: var(--db-background-color);
    background-color: var(--dropzone-color-strong);
    font-size: 14px;
  }
  .db-island-builder .db-dropzone *:not([data-slot-id]):has([data-slot-id])::before {
    z-index: calc(var(--dropzone-z-index-label-element, 1) + 1);
    top: -2px;
    left: -2px;
    width: auto;
    max-height: 2rem;
    margin-top: 0;
    margin-left: 0;
  }
}

/** On drag context, when something is selected **/

/* Reset the slight highlight when nothing happen */
.display-builder--onDrag .db-dropzone [data-component-id][data-node-id]:not([data-slot-id]) {
  position: relative;
  outline: 0 none transparent;
  outline-offset: 0;
}

/* From library drag need more visual hint */
.db-island-library .db-draggable--chosen {
  opacity: 0.8;
}

/* Completely hide the drag element to avoid confusion with what's under the mouse when selected */
.db-draggable--drag,
.db-dropzone--drag {
  opacity: 0 !important;
}

/* Reset the hover effect when on drag to focus on possible targets */
.display-builder--onDrag .db-dropzone [data-node-id]:hover,
.display-builder--onDrag .db-dropzone [data-node-id]:not([data-component-id]):hover,
.display-builder--onDrag .db-placeholder[data-node-id]:hover {
  outline: 0 none transparent;
  outline-offset: 0;
}

/* When on drag reset the normal slight highlight */
.display-builder--onDrag .db-dropzone > * {
  outline: 0 none transparent;
  outline-offset: 0;
}

/* When moving something inside the builder highlight the slots. */
.display-builder--onMove .db-island-builder [data-slot-id] {
  padding: 0;
  outline: var(--dropzone-slot-outline-width) var(--dropzone-color-target) var(--dropzone-slot-outline-type);
  outline-offset: var(--dropzone-slot-outline-offset);
}

/* Fix for block of menu 'tools' which display without border / shadow */
.db-dropzone--highlighted:has(span.db-block-system-menu-blocktools) {
  display: inline-grid;
}

/* Manual fix to give token more space to be able to grab */
.display-builder [data-node-id].db-block-token,
.display-builder [data-node-id].db-block-wysiwyg {
  padding: 1px 0 0 1px;
}

/* Manual fix for some inline block */
/* @todo find a better solution */
.display-builder [data-node-id].db-block-system-branding-block,
.display-builder [data-node-id].db-block-token,
.display-builder [data-node-id].db-block-icon-renderable,
.display-builder [data-node-id].db-placeholder-token,
.display-builder [data-node-id][class*="db-block-system-menu"] {
  display: inline-block;
}

.display-builder [data-node-id].db-block-wysiwyg {
  display: inline;
}

/* If token or wysiwyg has a block tag, set to block */
.display-builder [data-node-id].db-block-wysiwyg:has(address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, li, main, nav, ol, p, pre, section, table, tfoot, ul, video),
.display-builder [data-node-id].db-block-token:has(address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, li, main, nav, ol, p, pre, section, table, tfoot, ul, video) {
  display: block;
}
/* .display-builder [data-node-id].db-block-wysiwyg, */
.display-builder [data-node-id].db-block-system-breadcrumb-block {
  display: block;
}
