:root {
  --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;
}

.db-dropzone {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--dropzone-slot-min-height);
}
.db-dropzone[data-component-id][data-slot-id]:empty {
  min-width: var(--dropzone-slot-min-width);
  min-height: var(--dropzone-slot-min-height);
}
.display-builder--highlight
  .display-builder__main
  .db-dropzone[data-component-id][data-slot-id]:empty {
  padding: 1rem 2rem;
}

/* 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 **/

/* Act on the dropzone root */

/* 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,
.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;
}

.display-builder--highlight .display-builder__main .db-dropzone--root {
  padding: 0.5rem;
}

/* Enough to make something with empty slot selectable */
[data-instance-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-strong)
    var(--dropzone-slot-outline-type);
}

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

/* When nothing happen, slightly highlight containers of slot */
.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);
}
.display-builder--highlight
  .display-builder__main
  .db-dropzone
  [data-component-id]:not([data-slot-id]) {
  padding: 1rem;
  outline: var(--dropzone-slot-outline-width) var(--dropzone-color-light)
    var(--dropzone-slot-outline-type);
}

/* On hover, highlight only possible selectable elements */
.db-dropzone [data-instance-id]:hover,
.db-dropzone [data-instance-id]:not([data-component-id]):hover,
.db-placeholder[data-instance-id]:hover {
  position: relative;
  cursor: hand !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;
}
.display-builder--highlight
  .display-builder__main
  .db-dropzone
  [data-instance-id],
.display-builder--highlight
  .display-builder__main
  .db-dropzone
  [data-instance-id]:not([data-component-id]),
.display-builder--highlight
  .display-builder__main
  .db-placeholder[data-instance-id] {
  position: relative;
  margin: 0.5rem;
  padding: 0.5rem;
  cursor: hand !important;
  outline: var(--dropzone-slot-outline-width) var(--dropzone-color-strong)
    var(--dropzone-slot-outline-type);
  outline-offset: var(--dropzone-slot-outline-offset);
}
.display-builder--highlight
  .display-builder__main
  .db-dropzone
  [data-instance-id]::before,
.display-builder--highlight
  .display-builder__main
  .db-dropzone
  [data-instance-id]:not([data-component-id])::before,
.display-builder--highlight
  .display-builder__main
  .db-placeholder[data-instance-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-instance-title);
  text-align: left;
  color: var(--db-background-color);
  background-color: var(--dropzone-color-hover);
  font-size: 14px;
}

.db-dropzone [data-instance-id]:hover::before,
.db-dropzone [data-instance-id]:not([data-component-id]):hover::before,
.db-placeholder[data-instance-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-instance-title);
  text-align: left;
  color: var(--db-background-color);
  background-color: var(--dropzone-color-hover);
  font-size: 0.9rem;
}
.display-builder--highlight
  .display-builder__main
  .db-dropzone
  [data-instance-id]::before,
.display-builder--highlight
  .display-builder__main
  .db-dropzone
  [data-instance-id]:not([data-component-id])::before,
.display-builder--highlight
  .display-builder__main
  .db-placeholder[data-instance-id]::before {
  background-color: var(--dropzone-color-strong);
}
.display-builder--highlight
  .display-builder__main
  .db-dropzone
  [data-instance-id]:hover::before,
.display-builder--highlight
  .display-builder__main
  .db-dropzone
  [data-instance-id]:not([data-component-id]):hover::before,
.display-builder--highlight
  .display-builder__main
  .db-placeholder[data-instance-id]:hover::before {
  background-color: var(--dropzone-color-hover) !important;
}

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

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

/* Expand empty slot on drag to be able to move and instance */
.display-builder--highlight .display-builder__main [data-slot-id]:hover,
.display-builder--highlight .display-builder__main [data-slot-id]:empty,
.display-builder--onDrag [data-slot-id]:empty {
  min-width: var(--dropzone-slot-min-width);
  min-height: var(--dropzone-slot-min-height);
}

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

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

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

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

/* Reset the hover effect when on drag to focus on possible targets */
.display-builder--onDrag .db-dropzone [data-instance-id]:hover,
.display-builder--onDrag
  .db-dropzone
  [data-instance-id]:not([data-component-id]):hover,
.display-builder--onDrag .db-placeholder[data-instance-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 start dragging something, highlight strongly targets and show labels */
.display-builder--highlight .display-builder__main .db-dropzone--root,
.display-builder--onDrag .db-dropzone--root {
  outline: var(--dropzone-slot-outline-width) var(--dropzone-color-target-light)
    var(--dropzone-slot-outline-type) !important;
  outline-offset: 0 !important;
}
.display-builder--highlight .display-builder__main .db-dropzone--root {
  padding: 0.3rem;
}
.display-builder--highlight .display-builder__main [data-slot-id],
.display-builder--onDrag [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);
}
.display-builder--highlight .display-builder__main [data-slot-id]::after,
.display-builder--onDrag [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;
  color: var(--db-background-color);
  background-color: var(--dropzone-color-target);
  font-size: 0.9rem;
}
/* Base container style when starting empty with nothing */
.db-dropzone--root:empty::after,
.display-builder--highlight
  .display-builder__main
  .db-dropzone.db-dropzone--root::after,
.display-builder--onDrag .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-instance-title);
  text-align: left;
  color: var(--db-background-color);
  background-color: var(--dropzone-color-target-light);
  font-size: 0.7rem;
}
.display-builder--highlight
  .display-builder__main
  .db-dropzone.db-dropzone--root::before {
  font-size: 0.9rem;
}

.display-builder--highlight
  .display-builder__main
  .db-dropzone
  *:not([data-slot-id]):has([data-slot-id])::before,
.display-builder--onDrag
  .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-instance-title);
  text-align: left;
  color: var(--db-background-color);
  background-color: var(--dropzone-color-strong);
  font-size: 14px;
}
.display-builder--highlight
  .display-builder__main
  .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;
  margin-top: 0;
  margin-left: 0;
}

/* When moving something inside the builder highlight the slots. */
.display-builder--onMove .display-builder__main [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-instance-id].db-block-token,
.display-builder [data-instance-id].db-block-wysiwyg {
  padding: 1px 0 0 1px;
}

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

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

/* If token or wysiwyg has a block tag, set to block */
.display-builder
  [data-instance-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-instance-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-instance-id].db-block-wysiwyg, */
.display-builder [data-instance-id].db-block-system-breadcrumb-block {
  display: block;
}
