$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;
    }
}