//
// Spinner Ball
//
// Displays 3 circles bubbling transparency one after each other.
// For setting bubble color, set own class to element and set background color for sub element.
//
// Example HTML:
//   <div class="spinner-ball my_spinner"><span></span><span></span><span></span></div>
//
// Extend CSS:
//   .my_spinner > span {
//       background-color: blue;
//   }


//
// Animations

@keyframes spinner-ball-bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
    }
    40% {
        transform: scale(1.0);
    }
}

//
// mixin
//
@mixin spinner-ball($color: rgb(0, 0, 0)) {
    width: 100%;
    text-align: center;

    & > span {
        display: inline-block;
        width: 1em;
        height: 1em;
        border-radius: 100%;
        background-color: $color;
        animation: spinner-ball-bouncedelay 1.4s infinite ease-in-out;
        // Prevent first frame from flickering when animation starts
        animation-fill-mode: both;

        &:nth-child(1) {
            animation-delay: -0.32s;
        }

        &:nth-child(2) {
            animation-delay: -0.16s;
        }
    }
}

//
// Spinner
//
.spinner-ball {
    @include spinner-ball($spinner--color);
}