.is-loading-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.is-loading-status::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    border: 1.75px solid rgba(255, 255, 255, 0.18);
    border-top-color: rgba(255, 255, 255, 0.92);
    border-right-color: rgba(255, 255, 255, 0.52);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 10px rgba(255, 255, 255, 0.18);
    animation: loading-status-spin 850ms linear infinite, loading-status-pulse 1.7s ease-in-out infinite;
}

@keyframes loading-status-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loading-status-pulse {
    0%,
    100% {
        opacity: 0.78;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.03),
            0 0 8px rgba(255, 255, 255, 0.12);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.06),
            0 0 14px rgba(255, 255, 255, 0.24);
    }
}

@media (prefers-reduced-motion: reduce) {
    .is-loading-status::before {
        animation: none;
    }
}