// ============================================================
//          Progress Bar Styling                                  
// ------------------------------------------------------------*/

+route(style,theme,child)
  .progress-bar
    height: 20px
    overflow: hidden
    +relative
    z-index: 99
    background-color: #f7f7f7
    +box-shadow(inset 0 1px 3px rgba(0,0,0,0.2))
  %progress-bar-inner
    height: 20px
    +box-shadow(inset 0 1px 3px rgba(0,0,0,0.2))
    width: 0

  .progress-bar-stripped
    +background(linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent))

  .progress-bar_primary
    @extend %progress-bar-inner
    background-color: $c-primary
  .progress-bar_secondary
    @extend %progress-bar-inner
    background-color: $c-secondary
  .progress-bar_third
    @extend %progress-bar-inner
    background-color: $c-third
  .progress-bar_alert
    @extend %progress-bar-inner
    background-color: $c-alert
  .progress-bar_success
    @extend %progress-bar-inner
    background-color: $c-success
  .progress-bar_gray
    @extend %progress-bar-inner
    background-color: $c-gray
  .progress-bar_warning
    @extend %progress-bar-inner
    background-color: $c-warning
  %progress-bar_supersmall
    // height: 2px
    overflow: hidden
    +relative
    z-index: 99
  .progress-bar_supersmall-bright
    @extend %progress-bar_supersmall
    > div
      background-color: #f7f7f7
      height: 2px
      width: 0

  .progress-bar_supersmall-dark
    @extend %progress-bar_supersmall
    > div
      background-color: #f7f7f7
      height: 2px
      width: 0