/* Relative position outer button to allow positioning inside */
.LoadingIndicator {
    position: relative;
}

/* Dots container implements only showing whole dots */
.LoadingIndicator-dots {
    box-sizing: content-box;
    display: flex;
    flex-wrap: wrap;
    height: 36px;
    justify-content: center;
    margin: 24px 0 24px 0;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
}

/* Dots container smaller size */
.LoadingIndicator-dots-small {
    height: 12px;
    margin: 0;
    padding: 0;
}

/* Outer container helps with vertical alignment of dots */
.LoadingIndicator-outer {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    visibility: visible;
    width: 100%;
}

/* Pulsating dots! */
.LoadingIndicator-loader-dot {
    animation: LoadingIndicator-scale-dot 1.2s ease-out infinite;
    background: #9b9b9b;
    border-radius: 50%;
    height: 36px;
    margin: 0 4px;
    opacity: .75;
    transform: scale(.5);
    visibility: inherit;
    width: 36px;
    &:nth-of-type(2) {
        animation-delay: .2s;
    }
    &:nth-of-type(3) {
        animation-delay: .3s;
    }
    &:nth-of-type(4) {
        animation-delay: .4s;
    }
    &:nth-of-type(5) {
        animation-delay: .5s;
    }
}

/* Smaller dots! */
.LoadingIndicator-loader-dot-small {
    height: 12px;
    margin: 0 2px;
    width: 12px;
}

/* Animation frames for pulsating dots */
@keyframes LoadingIndicator-scale-dot {
    0% {
        transform: scale(.5);
    }
    25% {
        transform: scale(1);
    }
    75% {
        transform: scale(.5);
    }
    100% {
        transform: scale(.5);
    }
}

/* Styles for when the loading indicator should be fullscreen */
.LoadingIndicator.LoadingIndicator-fullscreen {
    background-color: black;
    bottom: 0;
    left: 0;
    opacity: .5;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100000;

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

    .LoadingIndicator-loader-dot {
        background: #f2f2f2;
    }
}