/** loader-spinner--a **/
.loader-spinner--a {
    --loader-size: calc(var(--block-size) / 6);
    --anim-duration: 0.6s;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 var(--loader-size) var(--light-color);
    animation: loader-spinner-a calc(var(--anim-duration) * 6) linear infinite;
}
.loader-spinner--a::before,
.loader-spinner--a::after {
    width: var(--dot-size);
    aspect-ratio: 1 / 1;
    background: currentColor;
    border-radius: 50%;
    animation: loader-spinner-a-1 var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
}
.loader-spinner--a::before {
    --x-dist: 0;
    --y-dist: var(--loader-size-half);
    bottom: calc(100% + var(--loader-size));
    left: calc(50% - var(--dot-size-half));
    transform-origin: center var(--loader-size);
}
.loader-spinner--a::after {
    --x-dist: var(--loader-size-half);
    --y-dist: 0;
    top: calc(50% - var(--dot-size-half));
    right: calc(100% + var(--loader-size));
    transform-origin: var(--loader-size) center;
    animation-delay: calc(var(--anim-duration) / 2 * -1);
}
@keyframes loader-spinner-a {
    100% {
        transform: rotate(1turn);
    }
}
@keyframes loader-spinner-a-1 {
    0%, 100% {
        opacity: 0;
    }
    33% {
        opacity: 1;
    }
    0% {
        transform: scale(1.1);
    }
    88% {
        transform: rotate(180deg) translate(var(--x-dist), var(--y-dist));
    }
}