/*
Customizar loader através das variaveis abaixo:
*/

:root {
    --loader-width: 60px;
    --loader-height: 60px;
    --loader-color-primary: #e95632;
    --line-width: 2px;
    --animation-duration: 1.5s;
    --loader-initial-scale: 0.1;
}

.loader,
.loader:before,
.loader:after {
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;
}

.loader {
    margin: 8px auto;
}


/* Animations */

@-webkit-keyframes momentum {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-moz-keyframes momentum {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-o-keyframes momentum {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-ms-keyframes momentum {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@keyframes momentum {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

.loader.quantum-spinner {
    --primary-circle-offset: calc(((var(--loader-width, 100px) * 0.2) / 2) - var(--line-width, 4px));
    --secondary-circle-offset: calc(((var(--loader-width, 100px) * 0.4) / 2) - var(--line-width, 4px));
    /*- (var(--line-width,4px) * 2)*/
    position: relative;
    width: var(--loader-width, 100px);
    height: var(--loader-height, 100px);
    transform-origin: center center;
    border-radius: 50%;
    border: var(--line-width, 4px) solid rgba(0, 0, 0, 0);
    border-top-color: var(--loader-color-primary, #33f);
    animation: momentum var(--animation-duration, 1s) linear infinite;
}

.quantum-spinner:before {
    content: "";
    position: absolute;
    transform-origin: center center;
    top: var(--primary-circle-offset, 10px);
    left: var(--primary-circle-offset, 10px);
    width: calc(var(--loader-width, 100px) * 0.8);
    height: calc(var(--loader-height, 100px) * 0.8);
    border-radius: 50%;
    border: var(--line-width, 4px) solid rgba(0, 0, 0, 0);
    border-top-color: var(--loader-color-primary, #33f);
    opacity: 0.7;
    filter: hue-rotate(3eg);
    animation: momentum calc(var(--animation-duration, 1s) * 2) linear infinite;
}

.quantum-spinner:after {
    content: "";
    position: absolute;
    top: var(--secondary-circle-offset, 20px);
    left: var(--secondary-circle-offset, 20px);
    width: calc(var(--loader-width, 100px) * 0.6);
    height: calc(var(--loader-height, 100px) * 0.6);
    border-radius: 50%;
    transform-origin: center center;
    border: var(--line-width, 4px) solid rgba(0, 0, 0, 0);
    border-top-color: var(--loader-color-primary, #33f);
    opacity: 0.4;
    filter: hue-rotate(6eg);
    animation: momentum var(--animation-duration, 1s) linear infinite;
}