.v-cursor {
    z-index: 99999999;
    position: fixed;
    background-color: #fff;
    mix-blend-mode: difference;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    transition: opacity 0.2s ease-in-out, transform 0.5s ease-in-out,
        height 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* link state */
.v-cursor.link {
    height: 50px;
    width: 50px;
    background-color: rgba(0, 0, 0, 0.1);
    /* replace with $text color */
    border: 3px solid rgba(0, 0, 0, 0);
    /* replace with $text color */
}

/* button state */
.v-cursor.button {
    height: 60px;
    width: 60px;
    background-color: #e0deff50;
    /* replace with $accent */
}

.v-cursor.drag-button {
    height: 60px;
    width: 60px;
    /* replace with $accent */
}

/* image state */
.v-cursor.img,
.v-cursor.drag-button {
    height: 80px;
    width: 80px;
    background-color: #ffd600d9;
     mix-blend-mode: normal;
   
}

.v-cursor.drag-button {
    background-color: #b4b4b4d2;
}

/* image after */
.v-cursor.img::after,
.v-cursor.drag-button::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.c-img {
    display: inline-block;
    transition: transform 0.2s ease-out;
    will-change: transform;
}

/* default after */
.v-cursor::after {
    content: "Watch";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    color: #000;
    /* replace with $curstext if needed */
    font-size: 16px;
    opacity: 0;
    transition: all 0.3s ease;
    /* replacement for +trs */
}

.v-cursor.drag-button::after {
    content: "Drag";
}

/* ===================== */

.v-dot {
    z-index: 99999999;
    position: fixed;
    background-color: transparent;
    left: 0;
    top: 0;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: 0s, opacity 0.5s, background-color 0.4s;
    transform: translate(-50%, -50%);
}

/* dot link state */
.v-dot.link {
    background-color: rgba(255, 255, 255, 0);
}

/* dot button state */
.v-dot.button {
    background-color: rgba(255, 255, 255, 0);
}