@import "compass/css3/transition";
@import "compass/css3/animation";
@import "compass/css3/transform";

// Copied from https://github.com/tomgenoni/ouroboros
// But with the class names changed
// File: https://raw.github.com/tomgenoni/ouroboros/master/sass/_ui-spinner.scss

// # CSS Spinner
// Optional 6 parameters for mixin 'ui-spinner'.
// Defaults are as follows.

$default-hole-color: transparent;
$default-size: 46px;
$default-bkg-color-light: #ddd;
$default-bkg-color-dark: #3c76ca;
$default-opacity: .8;
$default-duration: 3s;

// Need to remove the units to do some math.
@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

// Mixin for the ui-spinner. Paramters use defaults from above if none passed in.
@mixin ui-spinner(
    $hole-color: $default-hole-color,
    $size: $default-size,
    $bkg-color-light: $default-bkg-color-light,
    $bkg-color-dark: $default-bkg-color-dark,
    $opacity: $default-opacity,
    $duration: $default-duration
    ) {
    .messenger-spinner {
        width: $size;
        height: $size;
        background: $bkg-color-light;

        .messenger-spinner-side .messenger-spinner-fill {
            background: $bkg-color-dark;
            @include animation-duration($duration * 2);
            opacity: $opacity;
        }

        // This is the 'hole' that creates the ring. It's size is determined by the
        // size of the spinner.
        &:after {
            $hole-size: round((strip-units($size)*.8)) + px;
            $hole-position: round((strip-units($size)*.1)) + px;
            content: "";
            background: $hole-color;
            position: absolute;
            width: $hole-size;
            height: $hole-size;
            border-radius: 50%;
            top: $hole-position;
            left: $hole-position;
            display: block;
        }
    }
}

// Keyframes for each browser that flip the boxes around.

@-webkit-keyframes ui-spinner-rotate-right {
    0% {    -webkit-transform: rotate(0deg); }
    25% {   -webkit-transform: rotate(180deg); }
    50% {   -webkit-transform: rotate(180deg); }
    75% {   -webkit-transform: rotate(360deg); }
    100% {  -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes ui-spinner-rotate-left {
    0% {    -webkit-transform: rotate(0deg); }
    25% {   -webkit-transform: rotate(0deg); }
    50% {   -webkit-transform: rotate(180deg); }
    75% {   -webkit-transform: rotate(180deg); }
    100% {  -webkit-transform: rotate(360deg); }
}

@-moz-keyframes ui-spinner-rotate-right {
    0% {    -moz-transform: rotate(0deg); }
    25% {   -moz-transform: rotate(180deg); }
    50% {   -moz-transform: rotate(180deg); }
    75% {   -moz-transform: rotate(360deg); }
    100% {  -moz-transform: rotate(360deg); }
}

@-moz-keyframes ui-spinner-rotate-left {
    0% {    -moz-transform: rotate(0deg); }
    25% {   -moz-transform: rotate(0deg); }
    50% {   -moz-transform: rotate(180deg); }
    75% {   -moz-transform: rotate(180deg); }
    100% {  -moz-transform: rotate(360deg); }
}

@keyframes ui-spinner-rotate-right {
    0% {    transform: rotate(0deg); }
    25% {   transform: rotate(180deg); }
    50% {   transform: rotate(180deg); }
    75% {   transform: rotate(360deg); }
    100% {  transform: rotate(360deg); }
}

@keyframes ui-spinner-rotate-left {
    0% {    transform: rotate(0deg); }
    25% {   transform: rotate(0deg); }
    50% {   transform: rotate(180deg); }
    75% {   transform: rotate(180deg); }
    100% {  transform: rotate(360deg); }
}


// The basic CSS for the spinner. Each '.side' takes turns spinning
// to reveal the left/right side filling or emptying.
// The damn thing is so complicated I barely understand it anymore.

.messenger-spinner {
    position: relative;
    border-radius: 100%;

    ul.messenger.messenger-spinner-active .messenger-spinner & {
        display: block;
    }

    .messenger-spinner-side {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;

       .messenger-spinner-fill {
            border-radius: 999px;
            position: absolute;
            width: 100%;
            height: 100%;
            @include animation-iteration-count(infinite);
            @include animation-timing-function(linear);
        }
    }

    .messenger-spinner-side-left {
        left: 0;

        .messenger-spinner-fill {
            left: 100%;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            @include animation-name(ui-spinner-rotate-left);
            @include transform-origin(0 50%);
        }
    }

    .messenger-spinner-side-right {
        left: 50%;

        .messenger-spinner-fill {
            left: -100%;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            @include animation-name(ui-spinner-rotate-right);
            @include transform-origin(100% 50%);
        }
    }
}