/* core.css: the styles of resources/js/core.js (the same file in kzm-eShop, kzm-crm and sauron-counter, M22g).
   The accent colour is --app-accent, set by the project's own stylesheet (green by default). */

/* the spinner: LOADER (block) and LOADER_INLINE (in a cell, a button, a line) */
.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}

.loader-ring {
    width: 44px;
    aspect-ratio: 1;
    border-radius: 50%;
    /* a ring with a tail that fades out */
    background: conic-gradient(from 0deg, transparent 0 20%, var(--app-accent, #146526) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: loader-spin 0.9s linear infinite;
}

.loader-ring-sm {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}

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

@media (prefers-reduced-motion: reduce) {
    .loader-ring {
        animation-duration: 2.5s;
    }
}