@keyframes quark-spinner-container-rotate {
    to { transform: rotate(360deg); }
}

@keyframes quark-spinner-layer-rotate {
    12.5% { transform: rotate(var(--spinner-layer-1)); }
    25% { transform: rotate(var(--spinner-layer-2)); }
    37.5% { transform: rotate(var(--spinner-layer-3)); }
    50% { transform: rotate(var(--spinner-layer-4)); }
    62.5% { transform: rotate(var(--spinner-layer-5)); }
    75% { transform: rotate(var(--spinner-layer-6)); }
    87.5% { transform: rotate(var(--spinner-layer-7)); }
    100% { transform: rotate(var(--spinner-layer-8)); }
}

@keyframes quark-spinner-left-spin {
    from { transform: rotate(var(--spinner-left-start)); }
    50% { transform: rotate(var(--spinner-left-middle)); }
    to { transform: rotate(var(--spinner-left-start)); }
}

@keyframes quark-spinner-right-spin {
    from { transform: rotate(var(--spinner-right-start)); }
    50% { transform: rotate(var(--spinner-right-middle)); }
    to { transform: rotate(var(--spinner-right-start)); }
}

@keyframes quark-spinner-four-color {
    0%, 15% { stroke: var(--spinner-color-1); }
    25%, 40% { stroke: var(--spinner-color-2); }
    50%, 65% { stroke: var(--spinner-color-3); }
    75%, 90% { stroke: var(--spinner-color-4); }
    100% { stroke: var(--spinner-color-1); }
}

.quark-spinner-track-graphic,
.quark-spinner-indeterminate,
.quark-spinner-layer,
.quark-spinner-circle-rotator,
.quark-spinner-circle-graphic {
    position: absolute;
    width: 100%;
    height: 100%;
}

.quark-spinner-track-graphic,
.quark-spinner-circle-graphic {
    display: block;
    fill: transparent;
}

.quark-spinner-track-graphic {
    inset: 0;
}

.quark-spinner-indeterminate {
    inset: 0;
    font-size: 0;
    letter-spacing: 0;
    white-space: nowrap;
    animation: quark-spinner-container-rotate var(--spinner-rotation-duration) linear infinite;
}

.quark-spinner-layer {
    inset: 0;
    animation: quark-spinner-layer-rotate var(--spinner-cycle-duration) var(--spinner-easing) infinite both;
}

.quark-spinner-clipper {
    display: inline-flex;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.quark-spinner-gap-patch {
    position: absolute;
    top: 0;
    left: 47.5%;
    box-sizing: border-box;
    width: 5%;
    height: 100%;
    overflow: hidden;
}

/* Animate HTML wrappers so Android WebView can composite the static SVG arcs. */
.quark-spinner-clipper .quark-spinner-circle-rotator {
    width: 200%;
}

.quark-spinner-left .quark-spinner-circle-rotator {
    left: 0;
    animation: quark-spinner-left-spin var(--spinner-arc-duration) var(--spinner-easing) infinite both;
}

.quark-spinner-right .quark-spinner-circle-rotator {
    left: -100%;
    animation: quark-spinner-right-spin var(--spinner-arc-duration) var(--spinner-easing) infinite both;
}

.quark-spinner-gap-patch .quark-spinner-circle-graphic {
    left: -900%;
    width: 2000%;
    transform: rotate(180deg);
}

.quark-spinner-circle {
    r: var(--spinner-radius);
    stroke: var(--spinner-foreground);
    stroke-width: var(--spinner-stroke-width);
}

.quark-spinner-multicolor .quark-spinner-circle {
    animation: quark-spinner-four-color var(--spinner-color-duration) var(--spinner-easing) infinite both;
}

.quark-spinner-track {
    r: var(--spinner-track-radius);
    fill: transparent;
    stroke: var(--spinner-track-color);
    stroke-width: var(--spinner-track-stroke-width);
    opacity: var(--spinner-track-opacity);
}

.quark-spinner[data-reverse="true"] .quark-spinner-indeterminate,
.quark-spinner[data-reverse="true"] .quark-spinner-layer,
.quark-spinner[data-reverse="true"] .quark-spinner-circle-rotator {
    animation-direction: reverse;
}

@media (forced-colors: active) {
    .quark-spinner-circle,
    .quark-spinner-track { stroke: CanvasText; }
}