.av-ajax-loading {
    cursor: progress;
}

/* Keep the original glyph's metrics, margins and DOM node, including its listeners. */
.av-ajax-loading-icon {
    position: relative;
    visibility: hidden;
}

.av-ajax-loading-icon::after {
    content: "";
    visibility: visible;
    position: absolute;
    box-sizing: border-box;
    width: .85em;
    height: .85em;
    top: 50%;
    left: 50%;
    margin: -.425em 0 0 -.425em;
    border: .12em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: av-ajax-spin .75s linear infinite;
}

.av-ajax-loading-pulse {
    animation: av-ajax-breathe 1.4s ease-in-out infinite;
}

@keyframes av-ajax-spin {
    to { transform: rotate(360deg); }
}

@keyframes av-ajax-breathe {
    0%, 100% { box-shadow: 0 0 0 1px var(--av-color-border, currentColor); }
    50% { box-shadow: 0 0 0 3px var(--av-color-primary, currentColor); }
}

@media (prefers-reduced-motion: reduce) {
    .av-ajax-loading-icon::after { animation: none; }
    .av-ajax-loading-pulse {
        animation: none;
        box-shadow: 0 0 0 2px var(--av-color-primary, currentColor);
    }
}