@keyframes loading-indicator-scale-dot {
    0% {
        transform: scale(0.5);
    }

    25% {
        transform: scale(1);
    }

    75% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(0.5);
    }
}

@keyframes loading-indicator-fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.LoadingIndicator {
    opacity: 0;
    position: relative;
    animation: loading-indicator-fadein 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    min-height: 120px;
    width: 100%;

    &-outer {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        left: 0;
        position: absolute;
        visibility: visible;
        width: 100%;
    }

    &-dots {
        box-sizing: content-box;
        display: flex;
        flex-wrap: wrap;
        height: 40px;
        justify-content: center;
        margin: 24px 0;
        overflow: hidden;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%;
    }

    &-dot {
        animation: loading-indicator-scale-dot 1.2s ease-out infinite;
        background: var(--gray-500);
        border-radius: 50%;
        height: 36px;
        margin: 0 4px;
        opacity: 0.75;
        transform: scale(0.5);
        visibility: inherit;
        width: 36px;

        &:nth-of-type(2) {
            animation-delay: 0.2s;
        }

        &:nth-of-type(3) {
            animation-delay: 0.3s;
        }

        &:nth-of-type(4) {
            animation-delay: 0.4s;
        }

        &:nth-of-type(5) {
            animation-delay: 0.5s;
        }
    }

    &-title {
        opacity: 0;
        animation: loading-indicator-fadein 2s;
        animation-delay: 8s;
        animation-fill-mode: forwards;
    }

    &.small {
        min-height: 60px;

        .LoadingIndicator-dots {
            height: 24px;
            margin: 0;
            padding: 0;
        }

        .LoadingIndicator-dot {
            height: 12px;
            margin: 0 2px;
            width: 12px;
        }

        .LoadingIndicator-title {
            font-size: 11px;
        }
    }

    &.fullscreen {
        background-color: var(--black);
        bottom: 0;
        left: 0;
        opacity: 0.5;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 100000;

        .LoadingIndicator-dots {
            position: absolute;
            top: 200px;
        }

        .LoadingIndicator-dot {
            background: var(--grey-100);
        }
    }
}