/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../common";

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

.#{$vendor-prefix}loader {
    @include reset-inline-block;
    margin: 0 auto;
    text-align: center;

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

.#{$vendor-prefix}loader-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);
        }
    }

    .#{$vendor-prefix}loader.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; }
            }
        }

        .#{$vendor-prefix}loader-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);
        }
    }

    .#{$vendor-prefix}loader.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);
        }
    }

    .#{$vendor-prefix}loader.bubble-spinner {
        .#{$vendor-prefix}loader-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;
                }
            }
        }
    }
}