/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

// Based on SpinKit
// http://tobiasahlin.com/spinkit/

@include export("loader") {
    #{$loader-class} {
        @include reset-inline-block;
        margin: 0 auto;
        text-align: center;

        > span {
            display: inline-block;
            margin: 0 2px;
        }
    }

    #{$loader-class-message} {
        margin-top: 1rem;
    }

    //-------------------- Bar Wave --------------------//

    @if $loader-type == "bar-wave" or $loader-type == "all" {
        @keyframes bar-wave {
            0%, 50%, 100% {
                transform: scaleY(1.0);
            }
            25% {
                transform: scaleY(2.0);
            }
        }

        #{$loader-class}.bar-wave {
            > span {
                background: $loader-color;
                height: $loader-bar-height;
                width: $loader-bar-width;
                animation: bar-wave 1.2s infinite ease-in-out;

                @for $i from 2 through $loader-wave-count {
                    &:nth-child(#{$i}) { animation-delay: -#{(1.3 - ($i * 0.1))}s; }
                }
            }

            #{$loader-class-message} {
                margin-top: 1.5rem;
            }
        }
    }

    //-------------------- Bubble Wave --------------------//

    @if $loader-type == "bubble-wave" or $loader-type == "all" {
        @keyframes bubble-wave {
            0%, 80%, 100% {
                transform: scale(0.0);
            }
            30% {
                transform: scale(1.0);
            }
        }

        #{$loader-class}.bubble-wave {
            > span {
                background: $loader-color;
                width: $loader-bubble-size;
                height: $loader-bubble-size;
                border-radius: 100%;
                animation: bubble-wave 1.5s infinite ease-in-out;
                animation-fill-mode: both;

                @for $i from 2 through $loader-wave-count {
                    &:nth-child(#{$i}) { animation-delay: -#{(1.6 - ($i * 0.1))}s; }
                }
            }
        }
    }

    //-------------------- Bubble Spinner --------------------//

    @if $loader-type == "bubble-spinner" or $loader-type == "all" {
        @keyframes bubble-spinner {
            0%, 80%, 100% {
                transform: scale(0.0);
            }
            30% {
                transform: scale(1.3);
            }
        }

        #{$loader-class}.bubble-spinner {
            #{$loader-class-spinner} {
                width: 100px;
                height: 100px;
                position: relative;
                margin: 0 auto;

                > span {
                    background: $loader-color;
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    border-radius: 100%;
                    animation: bubble-spinner 1.6s infinite ease-in-out;
                    animation-fill-mode: both;

                    &:nth-child(1) {
                        top: 0;
                        left: 43px;
                        animation-delay: -1.4s;
                    }

                    &:nth-child(2) {
                        top: 12px;
                        right: 12px;
                        animation-delay: -1.2s;
                    }

                    &:nth-child(3) {
                        top: 43px;
                        right: 0;
                        animation-delay: -1.0s;
                    }

                    &:nth-child(4) {
                        bottom: 12px;
                        right: 12px;
                        animation-delay: -0.8s;
                    }

                    &:nth-child(5) {
                        bottom: 0;
                        left: 43px;
                        animation-delay: -0.6s;
                    }

                    &:nth-child(6) {
                        bottom: 12px;
                        left: 12px;
                        animation-delay: -0.4s;
                    }

                    &:nth-child(7) {
                        top: 43px;
                        left: 0;
                        animation-delay: -0.2s;
                    }

                    &:nth-child(8) {
                        top: 12px;
                        left: 12px;
                        animation-delay: -0.0s;
                    }
                }
            }
        }
    }
}