.bk-dragging-overlay {
  @apply fixed bottom-auto top-0 left-0 pointer-events-none z-dragging-overlay rounded select-none will-change-transform cursor-grabbing;

  * {
    @apply !pointer-events-none;
  }

  &.bk-is-touch {
    @apply bottom-0 top-auto;
  }

  > .bk-dragging-overlay-item {
    @apply absolute h-full top-0 left-0;
  }

  > .bk-dragging-overlay-item.bk-is-top {
    @apply shadow-xl-even z-50 rounded-md overflow-hidden will-change-transform;

    &:before {
      content: '';
      @apply absolute top-0 left-0 w-full h-full z-50;
      outline: 5px solid var(--bk-active-color);
      outline-offset: -4px;
      border-radius: inherit;
    }
  }
  > .bk-dragging-overlay-item.bk-is-fallback {
    @apply border border-mono-500;
  }
  &.bk-is-active > .bk-dragging-overlay-item.bk-is-top {
    @apply !opacity-80;
  }
}

.bk-dragging-overlay-markup {
  @apply absolute top-0 left-0 origin-top-left rounded w-full h-full pointer-events-none;
  @apply rounded;

  * {
    @apply !pointer-events-none;
  }

  > * {
    /* display: none !important; */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    /* Prevent text wrapping for cloned ghost elements (in particular: buttons). */
    width: calc(100% + 1px) !important;
    height: 100% !important;
    @apply !pointer-events-none;
    @apply !select-none !shadow-none;
  }
  @screen md {
    &:before {
      content: '';
      @apply absolute top-0 left-0 w-full h-full z-50 rounded;
    }
  }
}

.bk-dragging-overlay-fallback {
  @apply relative h-full w-full text-xl pt-30 lg:pt-0 lg:flex lg:items-center lg:justify-center;

  &.bk-is-top {
    @apply shadow-xl-even z-50;
  }

  > div {
    @apply flex flex-col items-center font-bold origin-top lg:origin-center;
  }

  .bk-blokkli-item-icon,
  .bk-icon {
    @apply relative overflow-hidden;
    @apply text-[1.8em] mb-[0.2em];
    @apply w-full h-full max-w-[1em] max-h-[1em] rounded-[0.2em] p-[0.1em] border-[0.02em];

    svg {
      @apply relative z-10;
    }

    &:before {
      content: '';
      @apply absolute top-0 left-0 w-full h-full bg-current opacity-10;
    }
  }
}

.bk-dragging-overlay-label {
  @apply absolute bottom-full left-1/2 -translate-x-1/2 mb-40 rounded-full text-white;
  @apply px-15 py-10 whitespace-nowrap;
  @apply shadow;
  @apply flex items-center gap-5 leading-none font-sans text-lg;
  will-change: transform, contents, opacity;

  .bk-icon {
    @apply w-15 h-15;
  }

  strong {
    @apply font-bold;
  }

  svg {
    @apply fill-current;
  }
}
