$indeterminate_anim_duration: 1s;

$theme.progress {

border: 0 none;
.track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  @include slices("progress_view_track.png", $left: 1, $right: 1);
}

.content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  /* width set in rendering */
  @include slices("progress_view_content.png", $left: 1, $right: 1);
}

&.indeterminate {

  /* Because the middle image is so wide, it adds a lot of wasted space if part
    of the repeating sprite, so include it separately. */
  .content {
    .middle {
      background: sc_static("progress_view_indeterminate_content.png") repeat-x;
        -webkit-animation-name: _sc_progressview_indeterminate;
        -webkit-animation-duration:$indeterminate_anim_duration;
        -webkit-animation-direction: normal;
        -webkit-animation-timing-function:linear;
        -webkit-animation-play-state:paused;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: _sc_progressview_indeterminate;
        -moz-animation-duration:$indeterminate_anim_duration;
        -moz-animation-direction: normal;
        -moz-animation-timing-function:linear;
        -moz-animation-play-state:paused;
        -moz-animation-iteration-count: infinite;
        -ms-animation-name: _sc_progressview_indeterminate;
        -ms-animation-duration:$indeterminate_anim_duration;
        -ms-animation-direction: normal;
        -ms-animation-timing-function:linear;
        -ms-animation-play-state:paused;
        -ms-animation-iteration-count: infinite;
        -o-animation-name: _sc_progressview_indeterminate;
        -o-animation-duration:$indeterminate_anim_duration;
        -o-animation-direction: normal;
        -o-animation-timing-function:linear;
        -o-animation-play-state:paused;
        -o-animation-iteration-count: infinite;
        animation-name: _sc_progressview_indeterminate;
        animation-duration:$indeterminate_anim_duration;
        animation-direction: normal;
        animation-timing-function:linear;
        animation-play-state:paused;
        animation-iteration-count: infinite;
    }
  }

  &.running {
    .content {
      .middle {
          -webkit-animation-play-state:running;
          -moz-animation-play-state:running;
          -ms-animation-play-state:running;
          -o-animation-play-state:running;
          animation-play-state:running;
      }
    }
  }
}

&.disabled {
  opacity: .5;
}

}

@-webkit-keyframes _sc_progressview_indeterminate {

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

}

@-moz-keyframes _sc_progressview_indeterminate {

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

}

@-ms-keyframes _sc_progressview_indeterminate {

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

}

@-o-keyframes _sc_progressview_indeterminate {

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

}

@keyframes _sc_progressview_indeterminate {

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

}