.window-loading {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    transition: 1s opacity;
}

    .window-loading:not(.visible) {
        opacity: 0;
    }

    .window-loading.visible {
        opacity: 1;
    }

    .window-loading:not(.modal) {
        top: 50%;
        left: 50%;
        width: 15em;
        height: 15em;
        transform: translate(-50%, -50%);
    }

    .window-loading.modal {
        display: grid;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-content: center;
        background-color: hsla(var(--hsl-color-white), 0.9);
        cursor: wait;
        pointer-events: none;
    }

        .window-loading.modal::before {
            position: absolute;
            content: ' ';
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

.window-loading-ui {
    display: grid;
    width: 15em;
    height: 15em;
    border-radius: 50%;
    background-color: hsla(var(--hsl-color-white), 0.75);
}

.window-loading:not(.modal) .window-loading-ui {
    position: relative;
}
.window-loading.modal .window-loading-ui {
    position: absolute;
    justify-self: center;
    top:2em;
    pointer-events: all;
}

.window-loading-label {
    position: absolute;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr max-content;
    height: 12.9em;
    width: 12.9em;
    align-self: center;
    justify-self: center;
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    border-color: var(--theme-color-grey-dark);
    padding: 1.9em;
    box-shadow: inset 1px 1px 6px 1px var(--theme-color-grey-dark);
    overflow: hidden;
}

    .window-loading-label .label {
        margin: auto;
        max-height: 100%;
        max-width: 100%;
        color: var(--theme-color-text-dark);
        background-color: var(--theme-color-grey-dark);
        text-align: center;
        text-shadow: 1px 1px 2px var(--theme-color-grey-dark);
        font-size: 1.2rem;
        font-variant: small-caps;
        overflow: hidden;
        white-space: pre-line;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        word-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
    }
    .window-loading-label .progress {
        width: max-content;
        max-width: 100%;
        height: max-content;
        max-height: 2.5em;
        margin: 0 auto;
        color: var(--theme-color-text-dark);
        background-color: var(--theme-color-grey-dark);
        text-align: center;
        text-shadow: 1px 1px 2px var(--theme-color-grey-dark);
        font-variant: small-caps;
        -webkit-background-clip: text;
        -moz-background-clip: text;
    }

.window-loading-segment {
    --color: transparent;
    position: absolute;
    animation: rotate 2s infinite;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 1px 1px 3px 0px var(--theme-color-blue);
}

    .window-loading-segment.top {
        --color: var(--theme-color-red);
        border-top: 15px solid;
        border-top-color: var(--color);
        border-left: 15px solid;
        border-left-color: var(--color);
        animation-timing-function: ease-in;
    }

    .window-loading-segment.bottom {
        --color: var(--theme-color-green);
        border-top: 15px solid;
        border-right: 15px solid;
        border-top-color: var(--color);
        border-right-color: var(--color);
        animation-timing-function: ease-out;
    }

    .window-loading-segment.edges {
        --color: var(--theme-color-blue);
        border: 15px solid;
        border-color: var(--color);
        animation-timing-function: ease;
    }

.window-loading-ui > .range {
    --mid: undefined;
    position: relative;
    width: calc(100% - 2.4em);
    height: calc(100% - 2.4em);
    margin: 1.2em;
    border-radius: 50%;
    overflow: hidden;
}

    .window-loading-ui > .range::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, var(--theme-color-blue-dark) 0%, var(--theme-color-blue-dark) calc(var(--mid) - 1px), transparent 1px, var(--theme-color-grey-dark) calc(var(--mid) + 1px), var(--theme-color-grey) 100%);
        opacity: 25%;
        /*transition-property: background;*/
        /*transition-duration: 0.25s;*/
        /*transition-delay: 0;*/
        /*transition-timing-function: ease-in-out;*/
    }

@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}