// PROGRESS BARS
// -------------


// ANIMATIONS
// ----------

// Webkit
@-webkit-keyframes progress-bar-stripes
  from
    background-position: 40px 0
  to
    background-position: 0 0

// Firefox
@-moz-keyframes progress-bar-stripes
  from
    background-position: 40px 0
  to
    background-position: 0 0

// IE9
@-ms-keyframes progress-bar-stripes
  from
    background-position: 40px 0
  to
    background-position: 0 0
    
// Opera
@-o-keyframes progress-bar-stripes
  from
    background-position: 40px 0
  to
    background-position: 0 0

// Spec
@keyframes progress-bar-stripes
  from
    background-position: 40px 0
  to
    background-position: 0 0



// THE BARS
// --------

// Outer container
.progress
  overflow: hidden
  height: 18px
  margin-bottom: 18px
  +gradient-vertical(#f5f5f5, #f9f9f9)
  +box-shadow(inset 0 1px 2px rgba(0,0,0,.1))
  +border-radius(4px)

// Bar of progress
.progress .bar
  width: 0%
  height: 18px
  color: $white
  font-size: 12px
  text-align: center
  text-shadow: 0 -1px 0 rgba(0,0,0,.25)
  +gradient-vertical(#149bdf, #0480be)
  +box-shadow(inset 0 -1px 0 rgba(0,0,0,.15))
  +box-sizing(border-box)
  +transition(width .6s ease)

// Striped bars
.progress-striped .bar
  +gradient-striped(#149bdf)
  +background-size(40px 40px)

// Call animation for the active one
.progress.active .bar
  -webkit-animation: progress-bar-stripes 2s linear infinite
  -moz-animation: progress-bar-stripes 2s linear infinite
  -ms-animation: progress-bar-stripes 2s linear infinite
  -o-animation: progress-bar-stripes 2s linear infinite
  animation: progress-bar-stripes 2s linear infinite



// COLORS
// ------

// Danger (red)
.progress-danger .bar
  +gradient-vertical(#ee5f5b, #c43c35)
  
.progress-danger.progress-striped .bar
  +gradient-striped(#ee5f5b)

// Success (green)
.progress-success .bar
  +gradient-vertical(#62c462, #57a957)

.progress-success.progress-striped .bar
  +gradient-striped(#62c462)

// Info (teal)
.progress-info .bar
  +gradient-vertical(#5bc0de, #339bb9)

.progress-info.progress-striped .bar
  +gradient-striped(#5bc0de)
  
// Warning (orange)
.progress-warning .bar
  +gradient-vertical(lighten($orange, 15%), $orange)
  
.progress-warning.progress-striped .bar
  +gradient-striped(lighten($orange, 15%))