/*----------------------------------------------------------------*/
/*  Loading
/*----------------------------------------------------------------*/

@import "mixins";
@import "variables";

@mixin loading {
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: rgba(255,255,255,0.8);
    @include transition(opacity linear $loading-fade-duration);
}

@mixin loading-container {
    .loading-container {
        text-align: center;
        position: relative;

        #e-letter-logo, md-progress-circular {
            position: absolute;
            top: 50%;
            left: 50%;
        }

        #e-letter-logo {
            width: $loading-logo-size;
            height: $loading-logo-size;
            // Center image
            margin-left: -(($loading-logo-size / 2) + 1);
            margin-top: -($loading-logo-size / 2);
        }

        md-progress-circular {
            $colors-animation: loading-colors ($loading-colors-animation-duration*4) ease-in-out infinite;
            // Center image
            margin-left: -30px;
            margin-top: -30px;

            svg path {
                -webkit-animation: $colors-animation;
                -moz-animation: $colors-animation;
                -o-animation: $colors-animation;
                animation: $colors-animation;
            }
        }

        .loading-message {
            margin-top: 110px;
            margin-bottom: 0;
            font-size: 1.2em;
        }
    }
    // Colors
    $spinner-colors: #4285F4, #DE3E35, #F7C223, #1B9A59, #4285F4;

    @keyframes loading-colors {
        0% {
            stroke: nth($spinner-colors, 1);
        }

        25% {
            stroke: nth($spinner-colors, 2);
        }

        50% {
            stroke: nth($spinner-colors, 3);
        }

        75% {
            stroke: nth($spinner-colors, 4);
        }

        100% {
            stroke: nth($spinner-colors, 5);
        }
    }
}