@import '../../global';

.loader {
    width: 100%;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    &_indicator {
        @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: $opacity-md;
            }

            100% {
                opacity: 1;
            }
        }

        margin: 0px $push-sm;

        height: 10px;
        width: 10px;
        border-radius: 100%;

        animation: pulse 1s ease infinite;

        @for $i from 1 through 3 {
            &:nth-child(#{$i}) {
                animation-delay: $i * (1s / 6);
            }
        }
    }

    &__primary {
        .loader_indicator {
            background-color: color('primary');
        }
    }

    &__light {
        .loader_indicator {
            background-color: color('white');
        }
    }

    &__dark {
        .loader_indicator {
            background-color: color('black');
        }
    }
}