/* HTML styles for the splash screen */
:root {
    --splash-background: #FFFFFF;
}

html,
body,
#out {
    width: 100%;
    height: 100%;
    background: var(--splash-background);
}

.avalonia-splash {
    position: absolute;
    height: 100%;
    width: 100%;
    background: var(--splash-background);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    justify-content: center;
    align-items: center;
    display: flex;
    pointer-events: none;
}

/* Light theme styles */
@media (prefers-color-scheme: light) {
    :root {
        --splash-background: #FFFFFF;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --splash-background: #212121;
    }
}

.avalonia-splash .splash-icon {
    width: 128px;
    height: 128px;
    max-width: 28vw;
    max-height: 28vw;
    object-fit: contain;
}

.avalonia-splash.splash-close {
    transition: opacity 200ms, display 200ms;
    display: none;
    opacity: 0;
}

body.effect-viewer-dialog-open .avalonia-native-host {
    /* Keep browser native controls from covering Avalonia-rendered modal overlays. */
    z-index: 0;
}

body.effect-viewer-dialog-open .avalonia-canvas {
    z-index: 1;
}