.spinner-wrapper {
    opacity: 1;
    transition: opacity 0.4s;
    position: fixed;
    background-color: var(--bg-color);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.spinner-wrapper.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility 0s .4s;
}

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

/* Core styles */

.spinner {
    --spinner-size: 5;
    --line-color: var(--primary-color);
    --line-alpha: 1;
    --ring-color: #000000;
    --ring-alpha: 0.3;
    --ring-size: 2;

    font-size: calc(var(--spinner-size) * 1em);
    width: 1em;
    height: 1em;
    border-radius: 50%;
}

.spinner .line {
    fill: none;
    stroke: var(--line-color);
    stroke-width: var(--ring-size);
    opacity: var(--line-alpha);
    stroke-linecap: round;
    transform-origin: 50% 50%;
    transform: rotate3d(0, 0, 1, 0deg);
    animation: 2156ms spinner-arc ease-in-out infinite, 1829ms spinner-rotate linear infinite;
}

.spinner .ring {
    fill: none;
    stroke: var(--ring-color);
    stroke-width: var(--ring-size);
    opacity: var(--ring-alpha);
}

@keyframes spinner-rotate {
    to {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

@keyframes spinner-arc {
    from {
        stroke-dasharray: 0 150;
        stroke-dashoffset: 0;
    }
    to {
        stroke-dasharray: 100 150;
        stroke-dashoffset: -140;
    }
}