/**
 * @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" {
    @include keyframes(bar-wave) {
        0%, 50%, 100% {
            @include transform(scaleY(1.0));
        }
        25% {
            @include transform(scaleY(2.0));
        }
    }

    .#{$vendor-prefix}loader.bar-wave {
        > span {
            background: $loader-color;
            height: $loader-bar-height;
            width: $loader-bar-width;
            @include animation(bar-wave 1.2s infinite ease-in-out);

            @for $i from 2 through $loader-wave-count {
                &:nth-child(#{$i}) { @include 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" {
    @include keyframes(bubble-wave) {
        0%, 80%, 100% {
            @include transform(scale(0.0));
        }
        30% {
            @include transform(scale(1.0));
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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