/* Reusable loading icon and delayed page-navigation overlay. */

.page-loader {
    --page-loader-ring-size: 72px;
    --page-loader-logo-size: 48px;
    --page-loader-spin-duration: 1.8s;

    position: fixed;
    z-index: var(--z-index-modal);
    inset: 0;
    display: grid;
    background: var(--color-background);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    place-items: center;
    transition:
        opacity var(--transition-interactive),
        visibility 0s linear var(--transition-interactive);
}

.page-loader[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}

.page-loader .loading-icon {
    --loading-icon-ring-size: var(--page-loader-ring-size);
    --loading-icon-logo-size: var(--page-loader-logo-size);
    --loading-icon-spin-duration: var(--page-loader-spin-duration);
}

body[data-page-loading="true"] {
    overflow: hidden;
}

.loading-icon {
    --loading-icon-ring-size: 36px;
    --loading-icon-logo-size: var(--icon-size-md);
    --loading-icon-spin-duration: 1.2s;

    position: relative;
    display: block;
    width: var(--loading-icon-ring-size);
    height: var(--loading-icon-ring-size);
    flex: 0 0 auto;
}

.loading-icon__logo,
.loading-icon__ring {
    position: absolute;
    inset: 0;
    display: block;
    margin: auto;
    object-fit: contain;
}

.loading-icon__logo {
    width: var(--loading-icon-logo-size);
    height: var(--loading-icon-logo-size);
}

.loading-icon__ring {
    width: var(--loading-icon-ring-size);
    height: var(--loading-icon-ring-size);
    transform-origin: center;
    animation:
        loading-icon-spin
        var(--loading-icon-spin-duration)
        linear
        infinite;
}

@keyframes loading-icon-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-icon__ring {
        animation: none;
    }
}