/**
 * The Sitelutions preloader: a three-colour ring that turns.
 *
 * One element, any size:
 *
 *     <span class="sl-preloader" aria-hidden="true"></span>
 *
 * 1em by default, so it takes the place of a spinner icon in a line of text or
 * a button and follows the font size. --lg is 2em, for a panel; --xl is 120px,
 * for a whole page. Any other size is style="--sl-size:40px". The ring, its
 * thickness and the three round heads are all drawn from that one length, so
 * they scale together - the heads are gradients on ::after rather than child
 * elements, which is what lets it be a single span.
 *
 * .sl-preloader-screen is the full-page cover: a white layer with the ring in
 * the middle. Add .is-hidden to fade it out.
 *
 * Loaded on every admin and client area page by
 * includes/hooks/sl_preloader.php. A page WHMCS does not render (a document a
 * module echoes itself) links it with sl_preloader_stylesheet().
 * Demo: /assets/preloader/
 */

.sl-preloader {
    --sl-size: 1em;
    --sl-thickness: calc(var(--sl-size) * 0.24);
    --sl-duration: 2.6s;
    --sl-teal: 34 185 169;
    --sl-red: 230 71 47;
    --sl-orange: 248 158 61;
    position: relative;
    display: inline-block;
    flex: none;
    width: var(--sl-size);
    height: var(--sl-size);
    vertical-align: -0.125em;
    animation: sl-preloader-spin var(--sl-duration) linear infinite;
    will-change: transform;
}

.sl-preloader--lg {
    --sl-size: 2em;
}

.sl-preloader--xl {
    --sl-size: 120px;
}

.sl-preloader::before,
.sl-preloader::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

/* The ring: each colour fades in over a third of the turn. */
.sl-preloader::before {
    background: conic-gradient(
        rgb(var(--sl-red) / 0) 0deg,
        rgb(var(--sl-red) / 0.54) 60deg,
        rgb(var(--sl-red)) 120deg,
        rgb(var(--sl-orange) / 0) 120deg,
        rgb(var(--sl-orange) / 0.54) 180deg,
        rgb(var(--sl-orange)) 240deg,
        rgb(var(--sl-teal) / 0) 240deg,
        rgb(var(--sl-teal) / 0.54) 300deg,
        rgb(var(--sl-teal)) 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--sl-thickness) - 0.5px), #000 calc(100% - var(--sl-thickness) + 0.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--sl-thickness) - 0.5px), #000 calc(100% - var(--sl-thickness) + 0.5px));
}

/*
 * The round heads, at the end of each colour: 0, 120 and 240 degrees. Their
 * centres sit on the middle of the ring, 38% of the size from the centre
 * (half the size less half the thickness): 50% + 38% * sin(a), 50% - 38% * cos(a).
 */
.sl-preloader::after {
    background:
        radial-gradient(circle at 50% 12%, rgb(var(--sl-teal)) calc(var(--sl-thickness) / 2 - 0.5px), transparent calc(var(--sl-thickness) / 2 + 0.5px)),
        radial-gradient(circle at 82.909% 69%, rgb(var(--sl-red)) calc(var(--sl-thickness) / 2 - 0.5px), transparent calc(var(--sl-thickness) / 2 + 0.5px)),
        radial-gradient(circle at 17.091% 69%, rgb(var(--sl-orange)) calc(var(--sl-thickness) / 2 - 0.5px), transparent calc(var(--sl-thickness) / 2 + 0.5px));
}

.sl-preloader-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--sl-preloader-bg, #fff);
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.sl-preloader-screen > .sl-preloader {
    --sl-size: 120px;
}

.sl-preloader-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sl-preloader-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@keyframes sl-preloader-spin {
    from { transform: rotate(30deg); }
    to { transform: rotate(390deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sl-preloader {
        animation-duration: calc(var(--sl-duration) * 3);
    }
}