//
// Spinner Line
//
// Displays 5 vertical lines which periodically are stretching.
//
// Example HTML:
//   <div class="spinner-line">
//       <div></div><div></div><div></div><div></div><div></div>
//   </div>
//


//
// Animations
@keyframes spinner-line {
    0%,
    40%,
    100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
    }
}

//
// mixin
//
@mixin spinner-line($color: $spinner--color) {
    width: 3.3rem;
    height: 3.3rem;
    text-align: center;
    font-size: 1rem;

    div {
        background-color: $color;
        height: 100%;
        width: .25rem;
        margin-right: .125rem;
        display: inline-block;
        animation: spinner-line 1.2s infinite ease-in-out;

        &:nth-child(2) {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }
        &:nth-child(3) {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }
        &:nth-child(4) {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }
        &:nth-child(5) {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }
    }
}

//
// Spinner
//
.spinner-line {
    @include spinner-line();
}