.orbit-loader-wrapper {
    display: none;
    place-content: center;
    place-items: center;
    height: 100%;
    width: 100%;
    --size: 4rem;
    --duration: 2s;
    --bg: #4254c6;
    --translate-scale: 1.0;

    [data-mantine-color-scheme="dark"] & {
        --bg: #6573d0;
    }

    #react-entry-point:has(>div._dash-loading) + & {
        display: grid;
        position: fixed;
        inset: 0;
    }
    /* #react-entry-point:has(*:not(#_pages_content)[data-dash-is-loading="true"]) + & {
        display: grid;
        position: fixed;
        inset: 0;
        z-index: 9999;
        animation: loader-appear 5s forwards;
    } */
}
@keyframes loader-appear {
    0% {
        display: none;
    }
    99% {
        display: none;
        opacity: 0;
    }
    100% {
        display: grid;
        position: fixed;
        inset: 0;
        background: var(--mantine-color-body);
        opacity: 1;
    }
}

div._dash-loading {
    display: none;
}
.orbit-loader-wrapper.fullscreen {
    height: 100vh;
    width: 100vw;
    height: 100svh;
    width: 100svw;
}
.orbit-loader-middle {
    height: var(--size);
    width: var(--size);
    border-radius: 50%;
    background: var(--bg);
    position: relative;
    animation: orbit-loader var(--duration) ease-in-out infinite;
}
.orbit-loader-half {
    height: calc(var(--size) / 2);
    width: var(--size);
    background: var(--bg);
    position: absolute;
    border-radius: var(--size) var(--size) 0 0;
}
.orbit-loader-top {
    top: calc(-0.5 * var(--size) * var(--translate-scale));
    transform: rotate(0deg);
}
.orbit-loader-right {
    top: calc(0.25 * var(--size));
    right: calc(-0.25 * var(--size) - 0.5 * var(--size) * var(--translate-scale));
    transform: rotate(90deg);
}
.orbit-loader-bottom {
    bottom: calc(-0.5 * var(--size) * var(--translate-scale));
    transform: rotate(180deg);
}
.orbit-loader-left {
    top: calc(0.25 * var(--size));
    left: calc(-0.25 * var(--size) - 0.5 * var(--size) * var(--translate-scale));
    transform: rotate(270deg);
}
.orbit-loader-quarter {
    height: calc(var(--size) / 2);
    width: calc(var(--size) / 2);
    background: var(--bg);
    position: absolute;
    border-radius: 100% 0 0 0;
}
.orbit-loader-top-left {
    top: calc(-0.5 * var(--size) * var(--translate-scale));
    left: calc(-0.5 * var(--size) * var(--translate-scale));
    transform: rotate(0deg);
}
.orbit-loader-top-right {
    top: calc(-0.5 * var(--size) * var(--translate-scale));
    right: calc(-0.5 * var(--size) * var(--translate-scale));
    transform: rotate(90deg);
}
.orbit-loader-bottom-right {
    bottom: calc(-0.5 * var(--size) * var(--translate-scale));
    right: calc(-0.5 * var(--size) * var(--translate-scale));
    transform: rotate(180deg);
}
.orbit-loader-bottom-left {
    bottom: calc(-0.5 * var(--size) * var(--translate-scale));
    left: calc(-0.5 * var(--size) * var(--translate-scale));
    transform: rotate(270deg);
}
@property --translate-scale {
    syntax: '<number>';
    initial-value: 1;
    inherits: true;
}
@keyframes orbit-loader {
    0% {
        transform: rotate(0);
        --translate-scale: 0.0;
    }
    25% {
        transform: rotate(90deg);
        --translate-scale: 1.0;
    }
    50% {
        transform: rotate(90deg);
        --translate-scale: 1.0;
    }
    100% {
        transform: rotate(360deg);
        --translate-scale: 0.0;
    }
}