/* Native cursor: 32 × 32 pixels, hotspot at the central dot. */
@media (hover: hover) and (pointer: fine) {
    html,
    body,
    body * {
        cursor: var(--aol-native, url("cursor.svg") 16 16), auto !important;
    }

    /* Enlarge over clickable controls, including their icons and labels. */
    body :is(a[href], button, [role="button"], [role="link"], summary,
        input[type="button"], input[type="submit"], input[type="reset"],
        input[type="checkbox"], input[type="radio"], input[type="file"],
        input[type="range"], input[type="color"], select, label[for], [onclick]):hover,
    body :is(a[href], button, [role="button"], [role="link"], summary,
        label[for], [onclick]):hover * {
        cursor: var(--aol-native-hover, url("cursor-hover.svg") 24 24), pointer !important;
    }

    /* Retain familiar editing and disabled-control feedback. */
    body input:not([type]),
    body input[type="text"],
    body input[type="search"],
    body input[type="email"],
    body input[type="url"],
    body input[type="tel"],
    body input[type="password"],
    body input[type="number"],
    body textarea,
    body [contenteditable=""],
    body [contenteditable="true"],
    body [contenteditable="true"] * {
        cursor: text !important;
    }

    body :disabled,
    body [aria-disabled="true"],
    body [aria-disabled="true"] * {
        cursor: not-allowed !important;
    }
}

/* Activate the animated cursor only after JavaScript receives mouse movement. */
@media (hover: hover) and (pointer: fine) {
    html.aol-cursor-active,
    html.aol-cursor-active body,
    html.aol-cursor-active body * {
        cursor: none !important;
    }
}
#aol-circular-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 2147483647;
    visibility: hidden;
}
#aol-circular-cursor.aol-visible { visibility: visible; }
#aol-circular-cursor::before,
#aol-circular-cursor::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
#aol-circular-cursor::before {
    width: 32px;
    height: 32px;
    border: 1px solid var(--aol-ring, #000);
    transition: width 180ms ease-out, height 180ms ease-out;
}
#aol-circular-cursor::after {
    width: 6px;
    height: 6px;
    background: var(--aol-dot, #000);
}
#aol-circular-cursor.aol-clickable::before { width: var(--aol-hover-size, 48px); height: var(--aol-hover-size, 48px); }
@media (prefers-reduced-motion: reduce) {
    #aol-circular-cursor::before { transition: none; }
}