.loading-dots-container {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100vw;
    pointer-events: none;
    height: 100vh;
    background-color: rgba(17, 17, 17, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
body.theme-light .loading-dots-container {
    background-color: rgba(255, 255, 255, 1);
}

.loading-dots-container.disappear {
    animation: loadingFadeOut 400ms ease-in forwards;
}

.loading-dots {
    opacity: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    transition: transform 400ms ease-in, opacity 0.25s linear;
    animation: loadingFadeIn 1s ease-in forwards;
}

.loading-dots-container.disappear .loading-dots {
    transform: scale(2);
}

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

.dot {
    border-radius: 16px;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.dot-1 {
    background-color: rgb(145 81 255);
    animation: dotTransform 1.5s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    z-index: 1001;
}

.dot-2 {
    background-color: rgb(7 195 216);
    animation: dotTransformReverse 1.5s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    z-index: 1000;
}

@keyframes dotTransform {
    0% {
        transform: translateX(20px);
        z-index: 1001;
    }
    50% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(20px);
        z-index: 1000;
    }
}

@keyframes dotTransformReverse {
    0% {
        transform: translateX(-20px);
        z-index: 1000;
    }
    50% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-20px);
        z-index: 1001;
    }
}

@keyframes loadingFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes loadingFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.hide-loader #aura-loading-content {
    display: none;
}