/* Table of Contents
==================================================
# Variables
# Keyframes
# Progress
# Colors
# Animations */

/* # Variables
================================================== */
$colors: (
  dark-black: $color-dark-black,
  black: $color-black,
  light-black: $color-light-black,
  dark-gray: $color-dark-gray,
  gray: $color-gray,
  light-gray: $color-light-gray,
  dark-haze: $color-dark-haze,
  haze: $color-haze,
  light-haze: $color-light-haze,
  white: $color-white,
  lime: $color-lime,
  green: $color-green,
  teal: $color-teal,
  blue: $color-blue,
  indigo: $color-indigo,
  purple: $color-purple,
  pink: $color-pink,
  red: $color-red,
  orange: $color-orange,
  yellow: $color-yellow,
  primary: $color-primary,
  secondary: $color-secondary,
  tertiary: $color-tertiary
);

/* # Keyframes
================================================== */
@-webkit-keyframes progress-bar-stripes {
  from { background-position: 40px 0; }
  to { background-position: 0 0; }
}
@keyframes progress-bar-stripes {
  from { background-position: 40px 0; }
  to { background-position: 0 0; }
}

/* # Progress
================================================== */
.progress {
  background: $color-white;
  border-radius: 500px;
  height: 25px;
  overflow: hidden;
}
.progress > .bar {
  background: $color-primary;
  box-sizing: border-box;
  color: $color-white;
  float: left;
  font-size: 13px;
  height: 100%;
  @include transition(width 0.6s ease);
  text-align: center;
  width: 0;
}
.progress-mini { height: 8px; }

/* # Colors
================================================== */
@each $name, $color in $colors {
  .progress > .bar-#{$name} { background: $color; }
}
.progress-dark { background: $color-light-black; }
.progress-light { background: $color-light-haze; }

/* # Animations
================================================== */
.progress > .bar-striped {
  background-image: -webkit-linear-gradient(45deg, transparentize($color-white, 0.85) 25%, $color-transparent 25%, $color-transparent 50%, transparentize($color-white, 0.85) 50%, transparentize($color-white, 0.85) 75%, $color-transparent 75%, $color-transparent);
  background-image:     -ms-linear-gradient(45deg, transparentize($color-white, 0.85) 25%, $color-transparent 25%, $color-transparent 50%, transparentize($color-white, 0.85) 50%, transparentize($color-white, 0.85) 75%, $color-transparent 75%, $color-transparent);
  background-image:         linear-gradient(45deg, transparentize($color-white, 0.85) 25%, $color-transparent 25%, $color-transparent 50%, transparentize($color-white, 0.85) 50%, transparentize($color-white, 0.85) 75%, $color-transparent 75%, $color-transparent);
  @include background-size(40px 40px);
  @include transition(width 0.6s ease);
}
.progress > .bar-striped.active { @include animation(progress-bar-stripes 2s linear infinite); }