///*------------------------------------*\
//    #OBJECTS-PROGRESS
//\*------------------------------------*/

// // Progress keyframes
// Circular
@include keyframes(lx-progress-circular-rotate) {
    0%       { @include transform(rotate(  0deg)); }
    100%     { @include transform(rotate(360deg)); }
}

@include keyframes(lx-progress-circular-dash) {
    0%      { stroke-dasharray: 1,200; stroke-dashoffset: 0; }
    50%     { stroke-dasharray: 89,200; stroke-dashoffset: -35px; }
    100%    { stroke-dasharray: 89,200; stroke-dashoffset: -124px; }
}

// Linear
@include keyframes(lx-progress-linear-bar1) {
    0%       { @include transform(scaleX( 0.5) translateX(-150%)); }
    37.5%    { @include transform(scaleX(0.75) translateX(   0%)); }
    75%      { @include transform(scaleX( 0.5) translateX( 150%)); }
    100%     { @include transform(scaleX( 0.5) translateX( 150%)); }
}

@include keyframes(lx-progress-linear-bar2) {
    0%       { @include transform(scaleX( 0.5) translateX(-250%)); }
    40%      { @include transform(scaleX( 0.5) translateX(-250%)); }
    55%      { @include transform(scaleX( 0.5) translateX(-150%)); }
    70%      { @include transform(scaleX( 0.5) translateX( -50%)); }
    85%      { @include transform(scaleX(0.25) translateX( 150%)); }
    100%     { @include transform(scaleX(0.25) translateX( 250%)); }
}





// Progress container
.progress-container {}

@each $key, $color in $colors {
    .progress-container--circular.progress-container--#{$key} {
        .progress-circular__path {
            stroke: $color;
        }
    }

    .progress-container--linear.progress-container--#{$key} {
        .progress-linear__background,
        .progress-linear__bar {
            background-color: $color;
        }
    }
}





// Progress circular
.progress-circular {
    position: relative;
    width: 100px;
    margin: 0px auto;

    &:before {
        content: '';
        display: block;
        padding-top: 100%;
    }
}

    // Progress circular: svg
    .progress-circular__svg {
        @include position(absolute, 0 0 0 0);
        @include size(100%);
        margin: auto;
    }

    // Progress ciruclar: g
    .progress-circular__g {
        .progress-container--determinate & {
            @include transform(rotate(-90deg));
        }

        .progress-container--indeterminate & {
            @include animation(lx-progress-circular-rotate 2s linear infinite);
        }
    }

    // Progress circular: path
    .progress-circular__path {
        stroke-dashoffset: 0;

        .progress-container--determinate & {
            @include transition-property(stroke-dasharray);
            @include transition-duration(0.2s);
        }

        .progress-container--indeterminate & {
            stroke-dasharray: 1,200;
            @include animation(lx-progress-circular-dash 1.5s ease-in-out infinite);
        }
    }





// Progress linear
.progress-linear {
    position: relative;
    height: 4px;
    overflow: hidden;
}

    // Progress linear: background
    .progress-linear__background {
        @include position(absolute, 0 0 0 0);
        opacity: 0.4;
    }

    // Progress linear: bar
    .progress-linear__bar {
        .progress-container--indeterminate & {
            @include transform(scale(1) translateX(50%));
        }
    }

    .progress-linear__bar--first {
        .progress-container--determinate & {
            @include size(100% 4px);
            @include position(absolute, 0 null null 0);
            @include transition-property(transform);
            @include transition-duration(0.2s);
            @include transform-origin(0 center);
        }

        .progress-container--indeterminate & {
            @include size(100% 24px);
            @include position(absolute, -($base-spacing-unit * 1.5) null null null);
            @include animation(lx-progress-linear-bar1 2s linear infinite);
        }
    }

    .progress-linear__bar--second {
        @include position(absolute, -($base-spacing-unit * 6) null null null);
        @include size(100% 96px);
        @include animation(lx-progress-linear-bar2 2s linear infinite);

        .progress-container--determinate & {
            display: none;
        }
    }