/* TODO use --blazor-load-percentage CSS variable to display loading progress */

#container {
    --background: transparent;
    --foreground: transparent;
    --width: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    width: inherit;
    height: inherit;
    background-color: var(--background);
}

#center {
    display: flex;
    align-items: center;
    flex-direction: column;
}

#logo {
    display: block;
    height: 2.5rem;
    margin-bottom: 2rem;
}

#loading-progress {
    width: var(--width);
    height: var(--width);
    margin: 5px;
}

#circular-progress {
    --size: 100px;
    --half-size: calc(var(--size) / 2);
    --stroke-width: 8px;
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc(var(--blazor-load-percentage-numeric) * var(--circumference));

    cx: var(--half-size);
    cy: var(--half-size);
    r: var(--radius);
    stroke: var(--foreground);
    stroke-width: var(--stroke-width);
    fill: none;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: var(--half-size) var(--half-size);
    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
    transition: stroke-dasharray 0.3s linear 0s;
}

#loading-spinner {
    position: relative;
    width: calc(var(--width) + 10px);
    height: calc(var(--width) + 10px);
}

    #loading-spinner div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: var(--width);
        height: var(--width);
        margin: 5px;
        border-width: 3px;
        border-style: solid;
        border-radius: 50%;
        border-color: var(--foreground) transparent transparent transparent;
        animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }

        #loading-spinner div:nth-child(1) {
            animation-delay: -0.45s;
        }

        #loading-spinner div:nth-child(2) {
            animation-delay: -0.3s;
        }

        #loading-spinner div:nth-child(3) {
            animation-delay: -0.15s;
        }

@keyframes loading-spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}