.loop {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc((var(--loop-width) / 2 * -1));
    margin-left: calc((var(--loop-width) / 2 * -1));
    width: var(--loop-width);
    height: var(--loop-width);
    rotate: 0deg;
    transition: rotate 0.3s ease-out;
}

/* .loop.on-create {
    animation: 3s ease-out 0s loop-create;
    animation-iteration-count: 1;
} */

.loop.invalid-submit {
    animation: 1s ease-out 0s loop-invalid-submit;
    animation-iteration-count: 1;
}

.loop.historical {
    scale: var(--loop-historical-scale);
    pointer-events: none;
}

@keyframes loop-invalid-submit {
    0% {
        translate: 0vh;
    }
    10% {
        translate: 1vh;
    }
    20% {
        translate: -1vh;
    }
    30% {
        translate: 1vh;
    }
    40% {
        translate: -1vh;
    }
    50% {
        translate: 1vh;
    }
    60% {
        translate: -1vh;
    }
    70% {
        translate: 1vh;
    }
    80% {
        translate: -1vh;
    }
    90% {
        translate: 1vh;
    }
    100% {
        translate: 0vh;
    }
}

/* @keyframes loop-create {
    0% {
        rotate: 180deg;
    }
    100% {
        rotate: 0deg;
    }
} */