@import "../_base.scss"
@import "./spinner.scss"

.loading {
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    &__spinner {
        height: 5%;
        aspect-ratio: $logo-aspect-ratio;

        position: absolute;

        $logo-center-pos: calc(50% + ($background-height / 2) - ($logo-height / 2));

        @media (0px < height <= calc($background-height * 5)) {
            top: $logo-center-pos;
        }
        @media (calc($background-height * 5) < height <= calc($background-height * 6)) {
            top: calc($logo-center-pos + ($background-height * 1));
        }
        @media (calc($background-height * 6) < height <= calc($background-height * 8)) {
            top: calc($logo-center-pos + ($background-height * 2));
        }
        @media (calc($background-height * 8) < height <= calc($background-height * 10)) {
            top: calc($logo-center-pos + ($background-height * 3));
        }
        @media (calc($background-height * 10) < height <= calc($background-height * 12)) {
            top: calc($logo-center-pos + ($background-height * 4));
        }
        @media (calc($background-height * 12) < height <= calc($background-height * 14)) {
            top: calc($logo-center-pos + ($background-height * 5));
        }
        @media (calc($background-height * 14) < height <= calc($background-height * 16)) {
            top: calc($logo-center-pos + ($background-height * 6));
        }
        @media (calc($background-height * 16) < height <= calc($background-height * 18)) {
            top: calc($logo-center-pos + ($background-height * 7));
        }
        @media (calc($background-height * 18) < height <= calc($background-height * 20)) {
            top: calc($logo-center-pos + ($background-height * 8));
        }
        @media (calc($background-height * 20) < height <= calc($background-height * 22)) {
            top: calc($logo-center-pos + ($background-height * 9));
        }
        @media (calc($background-height * 22) < height <= calc($background-height * 24)) {
            top: calc($logo-center-pos + ($background-height * 10));
        }
        @media (calc($background-height * 24) < height <= calc($background-height * 26)) {
            top: calc($logo-center-pos + ($background-height * 11));
        }
        @media (calc($background-height * 26) < height <= calc($background-height * 28)) {
            top: calc($logo-center-pos + ($background-height * 12));
        }
        @media (calc($background-height * 28) < height <= calc($background-height * 30)) {
            top: calc($logo-center-pos + ($background-height * 13));
        }
        @media (calc($background-height * 30) < height <= calc($background-height * 32)) {
            top: calc($logo-center-pos + ($background-height * 14));
        }
        @media (calc($background-height * 32) < height <= calc($background-height * 34)) {
            top: calc($logo-center-pos + ($background-height * 15));
        }
        @media (calc($background-height * 34) < height <= calc($background-height * 36)) {
            top: calc($logo-center-pos + ($background-height * 16));
        }
        @media (calc($background-height * 36) < height <= calc($background-height * 38)) {
            top: calc($logo-center-pos + ($background-height * 17));
        }
        @media (calc($background-height * 38) < height <= calc($background-height * 40)) {
            top: calc($logo-center-pos + ($background-height * 18));
        }

        background-color: get-color(greyscale, 0);
    }
}