@media (pointer: fine) {
    .sg-cursor {
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--z-cursor);
        pointer-events: none;
        mix-blend-mode: difference;
    }

    .sg-cursor__dot {
        position: absolute;
        width: 6px;
        height: 6px;
        background-color: var(--smoked-mocha);
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .sg-cursor__ring {
        position: absolute;
        width: 36px;
        height: 36px;
        border: 1.5px solid var(--smoked-mocha);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width var(--duration-sm) var(--ease-out),
                    height var(--duration-sm) var(--ease-out),
                    border-color var(--duration-sm) var(--ease-out);
    }

    .sg-cursor.is-hover .sg-cursor__ring {
        width: 56px;
        height: 56px;
        border-color: var(--mocha-light);
    }
}

@media (pointer: coarse) {
    .sg-cursor {
        display: none;
    }
}