.blou-cursor {
    --cursor-default-size: 16px;
    --cursor-size: var(--cursor-default-size);
    --cursor-height: var(--cursor-size);
    --cursor-width: var(--cursor-size);
    width: var(--cursor-width);
    height: var(--cursor-height);
    background-color: var(--wp--preset--color--primary);
    position: fixed;
    pointer-events: none;
    border: solid 1px white;
    z-index: 500;
    transition: all ease-in-out .1s, left 0s, top 0s, opacity ease-in-out .4s;
    border-radius: var(--cursor-size);
    margin-top: calc(var(--cursor-default-size) / 2 * 1);
    margin-left: calc(var(--cursor-default-size) / 2);
}

.blou-cursor.hover-nav {
    --cursor-size: 7px;
    border-radius: 22pt 22pt 99pt;
}

div.blou-cursor.idle {
    --cursor-size: 6px;
}

div.blou-cursor.scroll {
    --cursor-size: 9px;
    height: 14px;
    filter: blur(.5px);
}

.blou-cursor.hover {
    --cursor-size: 12px;
    border-radius: 2pt;
    margin-top: calc(var(--cursor-height) / 2 * 1);
    margin-left: calc(var(--cursor-size) / 2);
}

.blou-cursor.hold {
    width: 4px;
    border-radius: 2pt;
    margin-left: calc(var(--cursor-size) - 4px);
    margin-top: calc((var(--cursor-size) - 4px) / 2 * 1);
}


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