:root {
    --loading-border-width: 14px;
}

@keyframes loading {
    0%   {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}

.loading:has(> .component.loading-backdrop) {
    position: relative;
    pointer-events: none;
    cursor: pointer;

    & > .component.loading-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        backdrop-filter: 
                blur(1px) 
                contrast(10%)
                brightness(1.75);
        border-radius: 4px;
        z-index: 2;

        container-type: size;
        container-name: loading-backdrop;


        .loading-spinner {
            position: sticky;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            border-radius: 50%;
            width: 25%;
            aspect-ratio: 1 / 1;
            max-width: 80px;

            border: var(--loading-border-width) solid rgba(0,0,0,0.75);
            outline: 1px solid #072a77;
            box-shadow: 0 0 3px 1px rgba(0,0,0,1);

            .inner {
                position: absolute;
                inset: calc(-1 * var(--loading-border-width));
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                border: var(--loading-border-width) solid transparent;
                border-top: var(--loading-border-width) solid #1485d6;
                animation: loading 1.75s infinite ease-in-out;
            }
        }
    }

    @container loading-backdrop (min-width: 0px) {
        .loading-spinner {
            margin-top: 50cqh;
            margin-left: 50cqw;
        }
    }

}