/* FaiserLoader: FAISER's outline head inside a faint ring; a bright arc runs round the ring while his eyes fill and fade.
   Served to both apps at _content/RoboInsure.UI/faiser-loader.css. Colour = the app's MudBlazor primary colour (brand cyan
   in the client app, #077A96 in the admin portal). No small size: buttons and inline spots keep MudBlazor's small spinner.

   Line weights are set per size so they come out a fixed thickness on screen (the drawing is 360 units across, and the
   face is drawn at 58%): Medium (56 px) face 1.75 px, ring 2.5 px; Large (96 px) face 2 px, ring 3 px.
   Units = pixels x 360 / size, and the face's are divided by 0.58 more. */

.faiser-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    width: 56px;
    height: 56px;
    color: var(--mud-palette-primary, #2EE0FF);

    --faiser-face-stroke: 19.4; /* 1.75 px at 56 px */
    --faiser-ring-stroke: 16.1; /* 2.5 px at 56 px */
}

.faiser-loader--large {
    width: 96px;
    height: 96px;

    --faiser-face-stroke: 12.9; /* 2 px at 96 px */
    --faiser-ring-stroke: 11.25; /* 3 px at 96 px */
}

.faiser-loader svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.faiser-loader-face path,
.faiser-loader-face circle,
.faiser-loader-eye {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--faiser-face-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The faint full ring the arc runs round. */
.faiser-loader-track {
    fill: none;
    stroke: currentColor;
    stroke-opacity: .22;
    stroke-width: var(--faiser-ring-stroke);
}

/* The bright arc: about a quarter of the ring, running round. */
.faiser-loader-arc {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--faiser-ring-stroke);
    stroke-linecap: round;
    stroke-dasharray: .28 .72;
    transform-box: fill-box;
    transform-origin: center;
    animation: faiser-loader-arc 1.2s linear infinite;
}

/* The eyes are outlines that fill and fade. */
.faiser-loader-eye {
    fill: currentColor;
    animation: faiser-loader-eyes 1.6s ease-in-out infinite;
}

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

@keyframes faiser-loader-eyes {
    0%, 100% { fill-opacity: .15; }
    50% { fill-opacity: .85; }
}

/* People who switch animations off on their device see a still FAISER. */
@media (prefers-reduced-motion: reduce) {
    .faiser-loader-arc { animation: none; }
    .faiser-loader-eye { animation: none; fill-opacity: .6; }
}