.appFooter__loading {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms linear;
}

.appFooter__loading.is-active {
    opacity: 1;
}

.appFooter__loading.is-fading {
    opacity: 0;
    transition-duration: 1000ms;
}

.appFooter__loadingTrack,
.appFooter__loadingFill {
    position: absolute;
    inset: 0;
}

.appFooter__loadingTrack {
    background: color-mix(in srgb, var(--c-accent) 10%, transparent);
}

.appFooter__loadingFill {
    width: 100%;
    transform: scaleX(var(--footer-loading-progress, 0));
    transform-origin: left center;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--c-accent) 48%, transparent) 0%,
            color-mix(in srgb, var(--c-accent) 88%, white 12%) 72%,
            color-mix(in srgb, var(--c-accent) 60%, transparent) 100%
    );
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 18%, transparent);
    transition: transform var(--footer-loading-transform-duration, 520ms) linear;
}

.appFooter__loading.is-active .appFooter__loadingFill {
    will-change: transform;
}

.appFooter__loading[data-loading-mode="indeterminate"][data-loading-status="active"] .appFooter__loadingFill {
    width: 38%;
    min-width: 96px;
    transform: none;
    transition: none;
    animation: appFooterLoadingSweep 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.appFooter__loading[data-loading-status="complete"] .appFooter__loadingTrack {
    background: color-mix(in srgb, var(--c-accent) 16%, transparent);
}

.appFooter__loading[data-loading-status="complete"] .appFooter__loadingFill {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--c-accent) 62%, transparent) 0%,
            color-mix(in srgb, var(--c-accent) 92%, white 8%) 100%
        );
}

.appFooter__loading[data-loading-status="error"] .appFooter__loadingTrack {
    background: color-mix(in srgb, var(--c-console-level-error) 16%, transparent);
}

.appFooter__loading[data-loading-status="error"] .appFooter__loadingFill {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--c-console-level-error) 72%, transparent) 0%,
            color-mix(in srgb, var(--c-console-level-error) 96%, white 4%) 100%
        );
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-console-level-error) 26%, transparent);
}

.appFooter__loadingLabel {
    color: color-mix(in srgb, var(--c-font) 82%, var(--c-accent) 18%);
}

.appFooter__loading[data-loading-status="complete"] ~ .appFooter__content .appFooter__loadingLabel {
    color: color-mix(in srgb, var(--c-font) 72%, var(--c-accent) 28%);
}

.appFooter__loading[data-loading-status="error"] ~ .appFooter__content .appFooter__loadingLabel {
    color: color-mix(in srgb, var(--c-font) 70%, var(--c-console-level-error) 30%);
}

@keyframes appFooterLoadingSweep {
    from {
        transform: translate3d(-160%, 0, 0);
    }

    to {
        transform: translate3d(420%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .appFooter__loading,
    .appFooter__loadingFill {
        transition-duration: 0ms;
    }

    .appFooter__loading[data-loading-mode="indeterminate"][data-loading-status="active"] .appFooter__loadingFill {
        animation: none;
        width: 28%;
        transform: none;
    }
}