@require "variables"

@keyframes loaderBefore {
    from {
        left: 50%;
    }

    to {
        left: 49%;
    }
}

@keyframes loaderAfter {
    from {
        left: 50%;
    }

    to {
        left: 51%;
    }
}

.b-async-pending {
    position: relative;
}

.b-async-pending::before,
.b-async-pending::after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -5px;
    left: 50%;
    margin-left: -5px;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background: Async-backgroundColor-pending;
}

.b-async-pending::before {
    animation: loaderBefore 0.7s ease-in-out alternate infinite;
}

.b-async-pending::after {
    animation: loaderAfter 0.7s ease-in-out alternate infinite;
}