.drag-cursor {
    pointer-events: none;
    position: fixed;
    width: 60px;
    height: 60px;
    border: medium solid #343434;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999999;
    transition: opacity .3s, visibility .3s, transform .3s;
    transform-origin: center;
}
.drag-cursor::before, .drag-cursor::after {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 100%;
    transform: scaleX(-1);
}
.drag-cursor::after {
    left: 100%;
    right: auto;
    transform: none;
}
.drag-cursor:not(.active) {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.5) translate(-50%, -50%);;
}
.drag-cursor.active {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
}