/* A small ring turning while something loads, in a place too small for a placeholder, such as a
   legend's key, a dropdown's button or the start of a status: a gray ring with a lighter arc, quiet
   as a state is, at a legend key's size (0.7rem), with a gap after it. */
/* The pulse placeholders need a box's room and don't read as loading at a key's size. */
.loading-ring
{
    display: inline-block;
    flex: none;
    box-sizing: border-box;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid var(--neutral-higher-emphasis-surface-color);
    border-top-color: var(--neutral-surface-medium-emphasis-contrast-color);
    border-radius: 50%;
    margin-right: 0.3rem;
    vertical-align: middle;
    /* The site's shared turning keyframes, at an even pace. */
    animation: rotate 0.8s linear infinite;
}

/* Under reduced motion the ring turns slowly, so it still says something is loading without a quick
   movement. */
@media (prefers-reduced-motion: reduce)
{
    .loading-ring
    {
        animation-duration: 3s;
    }
}