.overlay {
  --drop-target-spacing: 40px;
  --name-tag-vertical-offset: -24px;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  /* match the border width of the iFrame to prevent the overlay position being out by 1px */
  border: 1px transparent solid;
}

.viewportOverlay {
  position: absolute;
  transition: opacity 0.1s ease-in-out;
  pointer-events: all;
  opacity: 1;

  &.isZooming {
    transition: none;
    pointer-events: none;
    opacity: 0;
  }
}


.regionOverlay,
.pageOverlay {
  position: absolute;
  outline: 1px solid transparent;
  inset: 0;
  outline-offset: -1px;

  &.dropTarget {
    pointer-events: none;
  }
}

.regionOverlay {
  &.hovered {
    outline: 1px dashed var(--color-outline-root);
  }

  &.dropTarget {
    outline: 1px dashed var(--color-outline-root);
  }
}

.pageOverlay {
  &.hovered {
    outline: 1px dashed var(--color-outline-page);
  }

  &.dropTarget {
    outline: 1px dashed var(--color-outline-page);
  }
}

.componentOverlay {
  position: absolute;
  transition: opacity 0.1s ease-in-out, backdrop-filter 0.2s ease-in-out;
  pointer-events: all;
  opacity: 0;
  outline: 1px solid transparent;

  .sortableList {
    width: 100%;
    height: 100%;
  }

  .hidden {
    display: none;
  }

  > span {
    display: none;
  }

  &.selected {
    outline: 1px dashed var(--color-outline-component);
  }

  &.hovered {
    outline: 1px solid var(--color-outline-component);
  }

  &.dragging {
    backdrop-filter: grayscale(80%) opacity(40%);
    background: #fff;
    mix-blend-mode: color;
  }

  &.updating {
    animation: 1.5s shine linear infinite;
    border-radius: 5px;
    background: linear-gradient(110deg, rgba(255,255,255,0.2) 8%, rgba(255,255,255,0.8) 18%, rgba(255,255,255,0.2) 33%);
    background-size: 200% 200%;
    backdrop-filter: grayscale(100%)  opacity(40%);
  }
}
@keyframes shine {
  to {
    background-position-x: -200%;
  }
}

.slotOverlay {
  position: absolute;
  outline: 1px solid transparent;

  &.dropTarget {
    outline: 1px dashed var(--color-outline-slot);
    outline-offset: -1px;
  }

  &.hovered {
    outline: 1px solid var(--purple-9);
  }
}

/* .emptySlotDropZone { */
/*  position: absolute; */
/*  display: flex; */
/*  align-items: center; */
/*  justify-content: center; */
/*  width: calc(100% - 10px); */
/*  height: calc(100% - 10px); */
/*  pointer-events: none; */
/*  color: #fff; */
/*  border-radius: var(--radius-2); */
/*  outline: 2px dashed var(--gray-5); */
/*  background: linear-gradient(to bottom, #ccc, #efefef); */
/*  font-size: 12px; */
/*  inset: 5px; */

/*  &.isOver { */
/*    color: #fff; */
/*    background: var(--purple-8); */
/*  } */
/* } */

.emptySlotContainer,
.emptyRegionContainer,
.emptyPageContainer {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: none;
}

.emptySlotContainer {
  color: var(--purple-9);
  border: 1px solid var(--purple-9);

}

.emptyRegionContainer {
  color: var(--green-9);
  border: 1px solid var(--green-9);
}

.emptyPageContainer {
  color: var(--blue-9);
  border: 1px solid var(--blue-9);
}

.emptyRegionDropZone,
.emptySlotDropZone,
.emptyPageDropZone {
  position: absolute;
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  gap: var(--space-1);
  inset: 4px;
  backdrop-filter: blur(30px);

  > div {
    white-space: nowrap;
  }

  &.isOver {
    color: #fff;
    background: var(--green-8);
  }
}

.emptyRegionDropZone {
  flex-direction: column;
  gap: 0;
  border: 1px dashed var(--green-9);

  &.isOver {
    color: #fff;
    background: var(--green-8);
  }

  .regionMessage {
    color: var(--green-7);
  }
}

.emptyPageDropZone {
  flex-direction: column;
  gap: 0;
  border: 1px dashed var(--blue-9);

  &.isOver {
    color: #fff;
    background: var(--blue-8);
  }
}

.emptySlotDropZone {
  border: 1px dashed var(--purple-9);

  &.isOver {
    color: #fff;
    background: var(--purple-8);
  }
}

.componentDropZone {
  position: absolute;
  pointer-events: none;
  /* background: rgba(255,255,0,0.2); */

  &.isOver {
    &::after {
      position: absolute;
      display: block;
      content: '';
      border-radius: 4px;
      outline: 1px solid #fff;
      background-color: var(--purple-9);
    }
  }

  &.top {
    top: 0;
    width: 100%;
    height: 50%;
    max-height: 40px;

    &::after {
      top: 0;
      width: 100%;
      height: 3px;
    }
  }

  &.bottom {
    bottom: 0;
    width: 100%;
    height: 50%;
    max-height: 40px;

    &::after {
      bottom: 0;
      width: 100%;
      height: 3px;
    }
  }

  &.left {
    top: 0;
    left: 0;
    width: 50%;
    max-width: 40px;
    height: 100%;

    &::after {
      left: 0;
      width: 3px;
      height: 100%;
    }
  }

  &.right {
    top: 0;
    right: 0;
    width: 50%;
    max-width: 40px;
    height: 100%;

    &::after {
      right: 0;
      width: 3px;
      height: 100%;
    }
  }
}

.slotDropZone {
  position: absolute;
  pointer-events: none;
  background: rgba(255, 100, 100, 0.3);

  &.isOver {
    &::after {
      position: absolute;
      display: block;
      content: '';
      border-radius: 4px;
      outline: 1px solid #fff;
      background-color: var(--orange-9);
    }
  }

  &.before {
    top: -5px;
    width: 100%;
    height: 5px;

    &::after {
      top: 0;
      width: 100%;
      height: 3px;
    }
  }

  &.after {
    bottom: -5px;
    width: 100%;
    height: 5px;

    &::after {
      top: 0;
      width: 100%;
      height: 3px;
    }
  }
}

.regionDropZone {
  position: absolute;
  pointer-events: none;
  /* background: rgba(255,100,100,0.3); */

  &.isOver {
    &::after {
      position: absolute;
      display: block;
      content: '';
      border-radius: 4px;
      outline: 1px solid #fff;
      background-color: var(--purple-9);
    }
  }

  &.before {
    top: -15px;
    width: 100%;
    height: 15px;

    &::after {
      bottom: 0;
      width: 100%;
      height: 3px;
    }
  }

  &.after {
    bottom: -15px;
    width: 100%;
    height: 15px;

    &::after {
      top: 0;
      width: 100%;
      height: 3px;
    }
  }
}

.canvasNameTag {
  position: absolute;
  top: var(--name-tag-vertical-offset);
}

.sortableItem {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.regionItem {
  width: 100%;
  height: 100%;
}
