.drag-indicator {
  z-index: 400;
  left: 15px;
  top: 15px;
  width: 58px;
  height: 58px;
  will-change: transform;
  @apply fixed pointer-events-none;

  &::before {
    @apply bg-secondary-500;
    content: "";
    transform: scale(0.2);
    border-radius: 50%;
    transition: transform 0.45s ease, opacity 0.3s ease;
    @apply w-full h-full block absolute left-0 top-0 opacity-0;
  }

  .arrows {
    @apply absolute flex items-center w-full h-full gap-16 opacity-0 justify-center transform transition-all delay-100 duration-300 ease-in-out;

    i {
      @apply text-white;
    }
  }

  &.is-visible {
    &::before {
      @apply opacity-100 transform scale-100;
    }

    .arrows {
      @apply opacity-100 gap-4;
    }
  }
}