// Progress
.progress {
    box-shadow: none;
    position: relative;
    display: block;
    width: 100%;
    height: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
    background-color: #eee;
    .progress-bar {
        box-shadow: none;
        height: 4px;
        border-radius: 0;
        background-color: $primary-color-dark;
    }
    .progress-bar-animated {
        transition: width 2s ease-in-out;
    }
    .indeterminate {
        background-color: #90caf9;
        &:before {
            content: '';
            position: absolute;
            background-color: inherit;
            top: 0;
            left: 0;
            bottom: 0;
            will-change: left, right;
            // Custom bezier
            @include animation(indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite);
        }
        &:after {
            content: '';
            position: absolute;
            background-color: inherit;
            top: 0;
            left: 0;
            bottom: 0;
            will-change: left, right;
            // Custom bezier
            @include animation(indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite);
            @include animation-delay(1.15s);
        }
    }
    @include keyframes(indeterminate) {
        0% {
            left: -35%;
            right: 100%;
        }
        60% {
            left: 100%;
            right: -90%;
        }
        100% {
            left: 100%;
            right: -90%;
        }
    }
    @include keyframes(indeterminate-short) {
        0% {
            left: -200%;
            right: 100%;
        }
        60% {
            left: 107%;
            right: -8%;
        }
        100% {
            left: 107%;
            right: -8%;
        }
    }
}


/*********************
  CIRCLE
**********************/


/*
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */


/**************************/


/* STYLES FOR THE SPINNER */


/**************************/


/*
 * Constants:
 *      STROKEWIDTH = 3px
 *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
 *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
 *      ARCSTARTROT = 216 degrees (how much the start location of the arc
 *                                should rotate each time, 216 gives us a
 *                                5 pointed star shape (it's 360/5 * 3).
 *                                For a 7 pointed star, we might do
 *                                360/7 * 3 = 154.286)
 *      CONTAINERWIDTH = 28px
 *      SHRINK_TIME = 400ms
 */

.preloader-wrapper {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 48px;
    &.small {
        width: 36px;
        height: 36px;
    }
    &.big {
        width: 64px;
        height: 64px;
    }
    &.active {
        /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
        animation: container-rotate 1568ms linear infinite;
    }
    &.crazy{
            animation-duration: 333ms; 
    }
    .spinner-layer {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        /**
         * Patch the gap that appear between the two adjacent div.circle-clipper while the
         * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
         */
        .gap-patch {
            position: absolute;
            top: 0;
            left: 45%;
            width: 10%;
            height: 100%;
            overflow: hidden;
            border-color: inherit;
            .circle {
                width: 1000%;
                left: -450%;
            }
        }

        .circle-clipper {
            display: inline-block;
            position: relative;
            width: 50%;
            height: 100%;
            overflow: hidden;
            border-color: inherit;
            .circle {
                width: 200%;
                height: 100%;
                border-width: 3px;
                /* STROKEWIDTH */
                border-style: solid;
                border-color: inherit;
                border-bottom-color: transparent !important;
                border-radius: 50%;
                animation: none;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
            }
            &.left .circle {
                left: 0;
                border-right-color: transparent !important;
                transform: rotate(129deg);
            }
            &.right .circle {
                left: -100%;
                border-left-color: transparent !important;
                transform: rotate(-129deg);
            }
        }

    }
    .spinner-blue,
    .spinner-blue-only {
        border-color: #4285f4;
    }

    .spinner-red,
    .spinner-red-only {
        border-color: #db4437;
    }

    .spinner-yellow,
    .spinner-yellow-only {
        border-color: #f4b400;
    }

    .spinner-green,
    .spinner-green-only {
        border-color: #0f9d58;
    }
}

@keyframes container-rotate {
    to {
        transform: rotate(360deg)
    }
}


/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 * We write out each animation in full (instead of separating animation-name,
 * animation-duration, etc.) because under the polyfill, Safari does not recognize those
 * specific properties properly, treats them as -webkit-animation, and overrides the
 * other animation rules. See https://github.com/Polymer/platform/issues/53.
 */

.active {
    .spinner-layer {
        &.spinner-blue {
            /* durations: 4 * ARCTIME */
            animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
        }
        &.spinner-red {
        /* durations: 4 * ARCTIME */
            animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
        }
        &.spinner-yellow {
            /* durations: 4 * ARCTIME */
            animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
        }
        &.spinner-green {
            /* durations: 4 * ARCTIME */
            animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
        }
        &.spinner-blue-only,
        &.spinner-red-only,
        &.spinner-yellow-only,
        &.spinner-green-only,
        &.spinner-primary-color-only {
            /* durations: 4 * ARCTIME */
            opacity: 1;
            animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
        }
    }
    .circle-clipper.left .circle {
        /* duration: ARCTIME */
        animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    }
    .circle-clipper.right .circle {
        /* duration: ARCTIME */
        animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
    }
}

@keyframes fill-unfill-rotate {
    12.5% {
        transform: rotate(135deg);
    }
    /* 0.5 * ARCSIZE */
    25% {
        transform: rotate(270deg);
    }
    /* 1   * ARCSIZE */
    37.5% {
        transform: rotate(405deg);
    }
    /* 1.5 * ARCSIZE */
    50% {
        transform: rotate(540deg);
    }
    /* 2   * ARCSIZE */
    62.5% {
        transform: rotate(675deg);
    }
    /* 2.5 * ARCSIZE */
    75% {
        transform: rotate(810deg);
    }
    /* 3   * ARCSIZE */
    87.5% {
        transform: rotate(945deg);
    }
    /* 3.5 * ARCSIZE */
    to {
        transform: rotate(1080deg);
    }
    /* 4   * ARCSIZE */
}

@keyframes blue-fade-in-out {
    from {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    26% {
        opacity: 0;
    }
    89% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes red-fade-in-out {
    from {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0;
    }
}

@keyframes yellow-fade-in-out {
    from {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    76% {
        opacity: 0;
    }
}

@keyframes green-fade-in-out {
    from {
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes left-spin {
    from {
        transform: rotate(130deg);
    }
    50% {
        transform: rotate(-5deg);
    }
    to {
        transform: rotate(130deg);
    }
}

@keyframes right-spin {
    from {
        transform: rotate(-130deg);
    }
    50% {
        transform: rotate(5deg);
    }
    to {
        transform: rotate(-130deg);
    }
}

#spinnerContainer.cooldown {
    /* duration: SHRINK_TIME */
    animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

#mdb-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    /* change if the mask should have another color then white */
    z-index: 9998;
    /* makes sure it stays on top */
    height: 100%;
    width: 100%;
}