/*** Animated Loading Indicator ***/
.loadingIndicator {
    display: inline-block;
    position: relative;
    text-align: center;
    
    .loadingIndicator-outer {
        align-items: center;
        display: flex;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;

        .loadingIndicator-dots {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            overflow: hidden;
            width: 100%;

            .loadingIndicator-loader-dot {
                animation: loadingIndicator-scale-dot 1.2s ease-out infinite;                
                border-radius: 50%;
                background: $timberwolf;
                height: 26px;
                margin: 0 4px;
                opacity: .75;
                transform: scale(0.5);
                visibility: inherit;
                width: 26px;

                &: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;
                }

            }

        }

    }

    /*Loading Indicator Sizes*/
    &.loading-btn {

        &.loading-sm {

            .loadingIndicator-loader-dot {
                height: 16px;
                width: 16px;
            }

        }

        &.loading-lg {

            .loadingIndicator-loader-dot {
                height: 36px;
                width: 36px;
            }

        }

    }

    &.loading-btn {
        margin: 20px 0;

        /*Loading Indicator Visibility(By Default)*/
        .loadingIndicator-dots {
            visibility: hidden;
        }

        /*Loading Indicator Visibility(On Active)*/
        &.loader-active {
            pointer-events: none;
            width: 100%;

            .loadingIndicator-txt {
                visibility: hidden;
            }

            .loadingIndicator-dots {
                visibility: visible;
            }

        }

    }

}

@keyframes loadingIndicator-scale-dot {

    0% {
        transform: scale(0.5);
    }

    25% {
        transform: scale(1);
    }

    75% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(0.5);
    }

}