:root,
.display-builder.sl-theme-dark {
  --layer-base-container-bg-color: var(--sl-color-neutral-200);
  --layer-base-padding: 0.25rem;
  --layer-base-border-width: 2px;
  --layer-transition: 0.2s ease-in-out;
  --layer-gap: 0.5rem;
  --layer-pill-padding: 0.1rem 0.5rem;
  --layer-border-size: 0.2rem;
  --layer-border-type: solid;
  --layer-border-radius: var(--sl-border-radius-medium);
  --layer-text-color-hover: var(--sl-color-primary-700);
  --layer-component-bg-color: var(--sl-color-neutral-50);
  --layer-component-bg-color-hover: var(--sl-color-orange-100);
  --layer-component-border-color: var(--sl-color-neutral-300);
  --layer-component-border-color-hover: var(--sl-color-purple-700);
  --layer-block-bg-color: var(--sl-color-primary-100);
  --layer-block-bg-color-hover: var(--sl-color-primary-200);
  --layer-block-border-color: var(--sl-color-primary-700);
  --layer-block-border-color-hover: var(--sl-color-primary-700);
  --layer-block-text-color: var(--sl-color-primary-800);
  --layer-pill-bg-color: var(--sl-color-indigo-50);
  --layer-pill-border-color: var(--sl-color-warning-300);
  --layer-pill-text-color: var(--sl-color-neutral-950);
  --layer-slot-title-color: var(--sl-color-warning-700);
}

/* Keep a top border test when drag */
/* .display-builder--onMove:not(.display-builder--highlight) .db-layer.db-dropzone--chosen + .db-layer,
.display-builder--onDrag:not(.display-builder--highlight) .db-layer.db-dropzone--chosen + .db-layer {
  border-top: 3px solid var(--layer-slot-title-color);
  padding-top: 0.2rem;
} */

/* When moving something inside the builder highlight the slots. */
.display-builder--onMove,
.display-builder--onDrag {
  .db-dropzone--root {
    outline: var(--dropzone-slot-outline-width) var(--dropzone-slot-outline-type) var(--dropzone-color-target);
  }

  .db-island-layers {
    [data-slot-id] {
      border-radius: 0.1rem;
      outline: var(--dropzone-slot-outline-width) var(--dropzone-color-target) var(--dropzone-slot-outline-type);
    }

    [data-slot-id]:has(.db-layer) {
      outline-width: var(--dropzone-slot-outline-width);
    }

    .db-layer.db-layer--component::part(base) {
      border-style: solid;
    }

    .db-layer.db-layer--component:hover::part(base) {
      border-color: var(--layer-component-border-color);
      background-color: var(--layer-base-container-bg-color);
    }
  }

  .db-layer.db-dropzone--chosen {
    margin: var(--layer-gap) 0 var(--layer-gap) 0;
    &.db-layer--block::part(base) {
      background-color: var(--layer-block-bg-color-hover) !important;
    }
    &.db-layer--component::part(base) {
      background-color: var(--layer-component-bg-color-hover) !important;
    }
  }

  .db-layer.db-layer--block {
    &::part(base) {
      border-style: solid;
    }
  }

  .db-layer {
    .db-layer__info {
      &.db-layer--block {
        &:hover {
          &::part(base) {
            background-color: var(--layer-block-bg-color);
          }
        }
      }
    }
  }
}

.db-island-layers {
  .db-dropzone[data-component-id][data-slot-id] {
    min-width: 0;
    min-height: 2rem;
  }

  .db-dropzone--root {
    padding: 1rem;
    background-color: var(--layer-base-container-bg-color);
  }

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

  [data-slot-id]:has(.db-layer) {
    outline-width: 0;
  }

  .db-layer {
    scroll-margin-top: var(--toolbar-height, 64px);
    position: relative;
    width: 100%;
    min-height: 1rem;
    margin: 0 0 var(--layer-gap) 0;
    cursor: move;
    color: var(--db-text-color);
    font-size: 0.9rem;

    /* box-shadow: var(--sl-shadow-x-large); */

    &::part(base) {
      padding: var(--layer-base-padding);
      transition: var(--layer-transition);
      border: var(--layer-border-size) var(--layer-border-type) transparent;
      border-radius: var(--layer-border-radius);
      box-shadow: var(--sl-shadow-small);
    }

    &::part(header) {
      padding: 0.2rem 0.5rem;
      border-bottom: none;
    }

    &:hover {
      color: var(--layer-text-color-hover);

      &::part(base) {
        box-shadow: var(--sl-shadow-x-large);
      }
    }

    .db-layer__title {
      flex-basis: 20%;
      margin: 0;
      font-size: 0.9rem;
    }

    .db-layer__header {
      display: flex;
    }

    .db-layer__info {
      flex-grow: 1;
      margin: 0 0.25rem 0 1rem;
      text-align: right;
      font-size: 0.75rem;

      em {
        margin-right: 0.2rem;
        margin-left: 0.3rem;
      }

      ul {
        display: inline;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      li {
        display: inline-block;
        margin-right: 0.125rem;
        padding: var(--layer-pill-padding);
        color: var(--layer-pill-text-color);
        border: 1px solid var(--layer-pill-border-color);
        border-radius: var(--sl-border-radius-pill);
        background-color: var(--layer-pill-bg-color);
      }
    }

    .db-layer__children {
      padding-left: 0.4375rem;
      color: var(--layer-slot-title-color);
      font-style: italic;

      > * {
        font-style: normal;
      }
    }

    .db-layer__children > slot {
      margin-top: 0.4375rem;
    }

    &.db-layer--component,
    &.db-layer--block {
      &::part(base) {
        padding: 0;
      }
    }

    &.db-layer--component {
      &::part(base) {
        border-color: var(--layer-component-border-color);
        background-color: var(--layer-component-bg-color);
      }

      &::part(body) {
        padding: 0.5rem 1rem 0.5rem 0.5rem;
      }
    }

    &.db-layer--block {
      margin-bottom: var(--layer-gap);
      padding: 0;
      cursor: grab;

      &::part(body) {
        padding: 0.2rem var(--layer-gap);
      }

      &::part(base) {
        padding: 0;
        color: var(--layer-block-text-color);
        border-color: var(--layer-block-border-color);
        background-color: var(--layer-block-bg-color);
      }

      &:hover {
        &::part(base) {
          border-color: var(--layer-block-border-color-hover);
          background-color: var(--layer-block-bg-color-hover);
        }
      }
    }
  }
}

.display-builder--highlight {
  .db-island-layers {
    .db-dropzone--root {
      outline: var(--dropzone-slot-outline-width) var(--dropzone-color-target-light) var(--dropzone-slot-outline-type) !important;
    }

    [data-slot-id] {
      padding: 0.2rem;
    }

    .db-dropzone[data-component-id][data-slot-id]:empty {
      &::after {
        min-height: 1.7rem;
        margin-left: 1rem;
        content: " Empty slot ";
        font-size: x-small;
        font-style: italic;
      }
    }

    .db-layer {
      &.db-layer--component {
        &::part(base) {
          border-color: var(--layer-component-border-color-hover);
        }
      }
    }
  }
}

/* Monochromatic Saturation Indigo-Violet Ramp */

.display-builder:not(.sl-theme-dark) .db-island-layers .db-layer.db-layer--component:hover {
  --layer-hover-bg: oklch(98% 0.01 260);
  --layer-hover-border: oklch(94% 0.02 260);

  &::part(base) {
    border-color: var(--layer-hover-border);
    background-color: var(--layer-hover-bg);
  }

  & & {
    --layer-hover-bg: oklch(96% 0.02 260);
    --layer-hover-border: oklch(90% 0.04 260);
    & & {
      --layer-hover-bg: oklch(94% 0.03 260);
      --layer-hover-border: oklch(86% 0.06 260);
      & & {
        --layer-hover-bg: oklch(92% 0.04 260);
        --layer-hover-border: oklch(82% 0.08 260);
        & & {
          --layer-hover-bg: oklch(90% 0.05 260);
          --layer-hover-border: oklch(78% 0.1 260);
          & & {
            --layer-hover-bg: oklch(88% 0.06 260);
            --layer-hover-border: oklch(74% 0.12 260);
            & & {
              --layer-hover-bg: oklch(86% 0.07 260);
              --layer-hover-border: oklch(70% 0.14 260);
              & & {
                --layer-hover-bg: oklch(84% 0.08 260);
                --layer-hover-border: oklch(65% 0.16 260);
                & & {
                  --layer-hover-bg: oklch(82% 0.09 260);
                  --layer-hover-border: oklch(60% 0.18 260);
                  & & {
                    --layer-hover-bg: oklch(80% 0.1 260);
                    --layer-hover-border: oklch(55% 0.2 260);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.display-builder.sl-theme-dark .db-island-layers .db-layer.db-layer--component:hover {
  --layer-hover-bg: oklch(25% 0.04 260);
  --layer-hover-border: oklch(35% 0.08 260);

  &::part(base) {
    border-color: var(--layer-hover-border);
    background-color: var(--layer-hover-bg);
  }

  & & {
    --layer-hover-bg: oklch(28% 0.05 260);
    --layer-hover-border: oklch(38% 0.09 260);
    & & {
      --layer-hover-bg: oklch(31% 0.06 260);
      --layer-hover-border: oklch(41% 0.1 260);
      & & {
        --layer-hover-bg: oklch(34% 0.07 260);
        --layer-hover-border: oklch(44% 0.11 260);
        & & {
          --layer-hover-bg: oklch(37% 0.08 260);
          --layer-hover-border: oklch(47% 0.12 260);
          & & {
            --layer-hover-bg: oklch(40% 0.09 260);
            --layer-hover-border: oklch(50% 0.13 260);
            & & {
              --layer-hover-bg: oklch(43% 0.1 260);
              --layer-hover-border: oklch(53% 0.14 260);
              & & {
                --layer-hover-bg: oklch(46% 0.11 260);
                --layer-hover-border: oklch(56% 0.15 260);
                & & {
                  --layer-hover-bg: oklch(49% 0.12 260);
                  --layer-hover-border: oklch(59% 0.16 260);
                  & & {
                    --layer-hover-bg: oklch(52% 0.13 260);
                    --layer-hover-border: oklch(62% 0.17 260);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.display-builder.display-builder--onMove:not(.sl-theme-dark) .db-island-layers,
.display-builder.display-builder--onDrag:not(.sl-theme-dark) .db-island-layers {
  .db-layer.db-layer--component:has(.db-dropzone--chosen) {
    --layer-bg: oklch(98% 0.01 260);
    --layer-border: oklch(94% 0.02 260);

    &::part(base) {
      border-color: var(--layer-border);
      background-color: var(--layer-bg);
    }

    & & {
      --layer-bg: oklch(96% 0.02 260);
      --layer-border: oklch(90% 0.04 260);
      & & {
        --layer-bg: oklch(94% 0.03 260);
        --layer-border: oklch(86% 0.06 260);
        & & {
          --layer-bg: oklch(92% 0.04 260);
          --layer-border: oklch(82% 0.08 260);
          & & {
            --layer-bg: oklch(90% 0.05 260);
            --layer-border: oklch(78% 0.1 260);
            & & {
              --layer-bg: oklch(88% 0.06 260);
              --layer-border: oklch(74% 0.12 260);
              & & {
                --layer-bg: oklch(86% 0.07 260);
                --layer-border: oklch(70% 0.14 260);
                & & {
                  --layer-bg: oklch(84% 0.08 260);
                  --layer-border: oklch(65% 0.16 260);
                  & & {
                    --layer-bg: oklch(82% 0.09 260);
                    --layer-border: oklch(60% 0.18 260);
                    & & {
                      --layer-bg: oklch(80% 0.1 260);
                      --layer-border: oklch(55% 0.2 260);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.display-builder.sl-theme-dark.display-builder--onMove .db-island-layers,
.display-builder.sl-theme-dark.display-builder--onDrag .db-island-layers {
  .db-layer.db-layer--component:has(.db-dropzone--chosen) {
    --layer-hover-bg: oklch(25% 0.04 260);
    --layer-hover-border: oklch(35% 0.08 260);

    &::part(base) {
      border-color: var(--layer-border);
      background-color: var(--layer-bg);
    }

    & & {
      --layer-hover-bg: oklch(28% 0.05 260);
      --layer-hover-border: oklch(38% 0.09 260);
      & & {
        --layer-hover-bg: oklch(31% 0.06 260);
        --layer-hover-border: oklch(41% 0.1 260);
        & & {
          --layer-hover-bg: oklch(34% 0.07 260);
          --layer-hover-border: oklch(44% 0.11 260);
          & & {
            --layer-hover-bg: oklch(37% 0.08 260);
            --layer-hover-border: oklch(47% 0.12 260);
            & & {
              --layer-hover-bg: oklch(40% 0.09 260);
              --layer-hover-border: oklch(50% 0.13 260);
              & & {
                --layer-hover-bg: oklch(43% 0.1 260);
                --layer-hover-border: oklch(53% 0.14 260);
                & & {
                  --layer-hover-bg: oklch(46% 0.11 260);
                  --layer-hover-border: oklch(56% 0.15 260);
                  & & {
                    --layer-hover-bg: oklch(49% 0.12 260);
                    --layer-hover-border: oklch(59% 0.16 260);
                    & & {
                      --layer-hover-bg: oklch(52% 0.13 260);
                      --layer-hover-border: oklch(62% 0.17 260);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
