.gds-progress-bar {
    display: block;
    height: ($unit * 1.5);
    border-radius: $border-radius;
    border: 1px solid $gg-light-2;
    border-bottom-width: $cap-size;

    // Bar
    &:after {
        content: '';
        height: 100%;
        background: $progressBarPrimaryColor;
        border-bottom: $cap-size solid $progressBarPrimaryUnderlineColor;
        border-top-left-radius: $border-radius;
        border-bottom-left-radius: $border-radius;
        position: absolute !important;
        top: 0;
        left: 0;
        @include transition(500);
    }
}

// Different sizes
.gds-progress-bar--lg {
    height: ($unit * 2);
}

.gds-progress-bar--sm {
    height: ($unit * 0.875);
}

.gds-progress-bar--xs {
    height: ($unit * 0.5);
}

// Colored by value
@for $i from 0 through 50 {
    $border-color: mix($gg-gold, $gg-red, $i * 2%);

    .gds-progress-bar--value-colors[data-value='#{$i}']:after {
        background: mix($gg-gold, $gg-red, $i * 2%);
        border-color: mix(black, $border-color, 10%);
    }
}

@for $i from 51 through 100 {
    $inc: (($i - 50) * 2%);
    $border-color: mix($gg-green, $gg-gold, $inc);

    .gds-progress-bar--value-colors[data-value='#{$i}']:after {
        background: mix($gg-green, $gg-gold, $inc);
        border-color: mix(black, $border-color, 10%);
    }
}

.gds-progress-bar--striped-primary:after {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aa%3D%22http%3A%2F%2Fns.adobe.com%2FAdobeSVGViewerExtensions%2F3.0%2F%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2040%2020%22%20style%3D%22enable-background%3Anew%200%200%2040%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bopacity%3A0.1%3Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%2220%2C0%200%2C20%2020%2C20%2040%2C0%20%22%2F%3E%3C%2Fsvg%3E');
}

.gds-progress-bar--secondary:after {
    background: $progressBarSecondaryColor;
    border-bottom: $cap-size solid $progressBarSecondaryUnderlineColor;
}

.gds-progress-bar--striped-secondary:after {
    background-color: $progressBarSecondaryColor;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aa%3D%22http%3A%2F%2Fns.adobe.com%2FAdobeSVGViewerExtensions%2F3.0%2F%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2040%2020%22%20style%3D%22enable-background%3Anew%200%200%2040%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bopacity%3A0.1%3Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%2220%2C0%200%2C20%2020%2C20%2040%2C0%20%22%2F%3E%3C%2Fsvg%3E');
    border-bottom: $cap-size solid $progressBarSecondaryUnderlineColor;
}

// Animated bar (only visible on striped versions)
.gds-progress-bar--animated:after {
    animation: slide-bg 1.5s infinite;
    animation-timing-function: linear;
}

@keyframes slide-bg {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 40px 0;
    }
}

// Change width of bar based on data-value attribute value
@for $i from 0 through 100 {
    .gds-progress-bar[data-value='#{$i}']:after {
        width: $i * 1%;
    }
}

// Round off leading edge when bar is full
.gds-progress-bar[data-value='100']:after {
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
}

// Colored by value
@for $i from 0 through 50 {
    $border-color: mix($gg-gold, $gg-red, $i * 2%);
    $border-color-invert: mix($gg-gold, $gg-green, $i * 2%);

    .gds-progress-bar--value-colors[data-value='#{$i}']:after {
        background: mix($gg-gold, $gg-red, $i * 2%);
        border-color: mix(black, $border-color, 10%);
    }
    .gds-progress-bar--value-colors-invert[data-value='#{$i}']:after {
        background: mix($gg-gold, $gg-green, $i * 2);
        border-color: mix(black, $border-color-invert, 10%);
    }
}

@for $i from 51 through 100 {
    $inc: (($i - 50) * 2);
    $border-color: mix($gg-green, $gg-gold, $inc);
    $border-color-invert: mix($gg-red, $gg-gold, $inc);

    .gds-progress-bar--value-colors[data-value='#{$i}']:after {
        background: mix($gg-green, $gg-gold, $inc);
        border-color: mix(black, $border-color, 10%);
    }
    .gds-progress-bar--value-colors-invert[data-value='#{$i}']:after {
        background: mix($gg-red, $gg-gold, $inc);
        border-color: mix(black, $border-color-invert, 10%);
    }
}