$cursorMode: exclusion;

.cursor{
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    top: 0; left: 0;
    width: 80px; height: 80px;
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(0);
    opacity: 0;
    margin-top: -40px; margin-left: -40px;
    transform-origin: center center;
    color: #FFF;
    mix-blend-mode: $cursorMode; 
    backface-visibility: hidden;

    &Icon{
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
        stroke: currentColor;
        fill: currentColor;
        transition: opacity 0.2s linear;

        &--header{
            top: auto; bottom: 50%; left: 50%;
            transform: translateX(-50%);
        }
    }

    &[data-cursor="popin"] {
        mix-blend-mode: normal;
    }
}

html[cursor-active] *{
    cursor: none;
}

html.touch{
    .cursor{
        display: none;
    }
}