.layersDropZone {
  --indent-depth: 0; /* this default is overwritten by an inline style in JSX */

  /* To ensure the absolutely positioned ghost is indented correctly it must be indented
  by the sum of 2 icons, their spacing and the indent-depth */
  --icon-width-indent: var(--space-4);
  --icon-padding-indent-sm: var(--space-1);

  position: absolute;
  z-index: var(--indent-depth);
  top: auto;
  right: 0;
  bottom: 0;
  left: calc((var(--indent-depth) * var(--space-2)) + var(--icon-padding-indent-sm) + var(--icon-width-indent));
  height: 16px;
  pointer-events: none;

  &.top {
    top: 0;
    bottom: auto;

    &::after {
      top: 0;
    }

    &::before {
      top: -2px;
      bottom: auto;
    }
  }

  &.bottom {
    &::after {
      bottom: 0;
    }
  }

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

    &::before {
      position: absolute;
      z-index: 1;
      bottom: -2px;
      left: 4px;
      display: block;
      width: 7px;
      height: 7px;
      content: "";
      border-radius: 4px;
      outline: 1px solid #fff;
      background-color: var(--purple-9);
    }
  }
}
