:root {
    --rz3-progress-overlay-bg: #ffffff;
    --rz3-progress-overlay-fg: #111827;
    --rz3-progress-overlay-spinner-track: rgba(17, 24, 39, 0.18);
    --rz3-progress-overlay-spinner-head: rgba(17, 24, 39, 0.9);
    --rz3-progress-overlay-z-boot: 5000;
    --rz3-progress-overlay-z-area: 900;
}

@media (prefers-color-scheme: dark) {
    :root {
        --rz3-progress-overlay-bg: #0b0f19;
        --rz3-progress-overlay-fg: #ffffff;
        --rz3-progress-overlay-spinner-track: rgba(255, 255, 255, 0.22);
        --rz3-progress-overlay-spinner-head: rgba(255, 255, 255, 0.92);
    }
}

.rz3-progress-overlay {
    display: grid;
    place-items: center;
    background: var(--mud-palette-surface, var(--rz3-progress-overlay-bg));
    color: var(--mud-palette-text-primary, var(--rz3-progress-overlay-fg));
    opacity: 1;
    transition: opacity 180ms ease;
}

.rz3-progress-overlay--boot {
    position: fixed;
    inset: 0;
    z-index: var(--rz3-progress-overlay-z-boot);
}

.rz3-progress-overlay--area {
    position: absolute;
    inset: 0;
    z-index: var(--rz3-progress-overlay-z-area);
}

.rz3-progress-overlay--main-page {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 56px;
    z-index: var(--rz3-progress-overlay-z-area);
}

.rz3-progress-overlay--global-admin-page {
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    right: 0;
    bottom: 0;
    left: 56px;
    z-index: var(--rz3-progress-overlay-z-area);
}

.rz3-progress-overlay--boot .rz3-progress-overlay__content {
    transform: translateX(var(--rz3-progress-overlay-boot-content-offset, 0px));
}

body.rz3-main-shell-route {
    --rz3-progress-overlay-boot-content-offset: 28px;
}

body.rz3-global-admin-route {
    --rz3-progress-overlay-boot-content-offset: 28px;
}

.rz3-progress-overlay.is-hiding {
    opacity: 0;
    pointer-events: none;
}

html.rz3-boot-overlay-hidden .rz3-progress-overlay--boot {
    display: none !important;
}

.rz3-progress-overlay__content {
    display: grid;
    grid-template-rows: 64px 24px;
    row-gap: 12px;
    place-items: center;
}

.rz3-progress-overlay__spinner {
    width: 175px;
    height: 175px;
    background-image: url('/assets/loading.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.rz3-progress-overlay__text {
    min-width: 1px;
    min-height: 24px;
    max-width: min(80vw, 560px);
    overflow: hidden;
    color: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes rz3-progress-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}