// ProgressBar
// 
// Styling of the ProgressBar consists of the following:
// 
// 1. the base progress bar
//    .dijitProgressBar - sets margins for the progress bar
//
// 2. the empty bar
//    .dijitProgressBarEmpty  - sets background img and color for bar or parts of bar that are not finished yet
//    Also sets border color for whole bar
//
// 3. tile mode
//    .dijitProgressBarTile
//    inner container for finished portion when in 'tile' (image) mode 
//  
// 4. full bar mode
//    .dijitProgressBarFull
//    adds border to right side of the filled portion of bar
//
// 5. text for label of  bar
//    .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. 
//  
// 6. indeterminate mode
//    .dijitProgressBarIndeterminate .dijitProgressBarTile 
//    sets animated gif for the progress bar in 'indeterminate' mode
//
// Bar animations
// -------------------------
@include keyframes(progress-bar-stripes) {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

.#{$theme-name} {
  .dijitProgressBar {
    border: 0;
    overflow: hidden;
    height: $line-height-computed;
    margin-bottom: $line-height-computed;
    background-color: $progress-bg;
    @include box-shadow-empty-bar;
  }
  .dijitProgressBarTile {
    @include gradient-striped;
    background-color: transparent;
    background-size: 40px 40px;
    @include animation(progress-bar-stripes 2s linear infinite);
  }
  .dijitProgressBarFull {
    float: left;
    width: 0%;
    height: 100%;
    background-color: $progress-bar-bg;
    @include box-shadow-progress-bar;
    @include transition(width .6s ease);
  }
  .dijitProgressBarLabel {
    color: $progress-bar-color;
    line-height: $line-height-base;
  }
  // Alternate progress bars
  // --------------------------------------------------
  .dijitProgressBar {
    // Success appears as green
    &.progress-bar-success .dijitProgressBarFull {
      @include dijit-progress-bar-variant($progress-bar-success-bg);
    }
    // Info appears as light blue
    &.progress-bar-info .dijitProgressBarFull {
      @include dijit-progress-bar-variant($progress-bar-info-bg);
    }
    // Warning appears as orange
    &.progress-bar-warning .dijitProgressBarFull {
      @include dijit-progress-bar-variant($progress-bar-warning-bg);
    }
    // Danger appears as red
    &.progress-bar-danger .dijitProgressBarFull {
      @include dijit-progress-bar-variant($progress-bar-danger-bg);
    }
  }
}

