/************************************************************/
/*
/*      View transition CSS
/*
/************************************************************/
/* TODO: REMAKE LOADING TRANSITION USING THE VIEW TRANSITION API */
body:not(.wp-admin):not(.loaded, .hide-loading-overlay) {
	overflow-y: hidden;
}

.loading-overlay {
	display: grid;
	grid-template-rows: 100%;
	grid-template-columns: 100%;
	justify-content: center;
    align-items: center;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--wp--custom--color--default--accent--dark);
	box-sizing: border-box;
	opacity: 1;
	transition: opacity var(--wp--custom--duration--medium);
	pointer-events: all;
	z-index: 20;
	
	body:is(.loaded, .hide-loading-overlay) & {
		opacity: 0;
		pointer-events: none;
	}
	
	& > * {
        grid-row: 1;
        grid-column: 1;
        object-fit: contain;
		user-select: none;
		pointer-events: none;
		filter: var(--wp--custom--color--danube-blue--filter);
	}
	
	& > .icon {
        max-width: 50%;
        height: 90%;
        margin-block: auto 0;
        margin-inline: 0 auto;
        opacity: .05;
        translate: -25% 25%;
	}
	
	& > .loading {
        width: min(250px, 50vw);
		max-height: 30svh;
		margin: auto;
		z-index: 21;
	}

    /******************************/
    /* Responsive
    /******************************/
    @media (width <= 750px) {
        & > .icon {
            translate: -25% calc(100% / 3);
        }
    }
    
    @media (width <= 500px) {
        & > .icon {
            max-width: 75%;
            translate: -25% 35%;
        }
    }
    
    @media (width <= 350px) {
        & > .icon {
            display: none;
        }
    }
}