
$theme: '.ace';
$indeterminate_anim_duration: 1s;

#{$theme}.progress {
  border: 0px none;
  .track {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;

    & > .left {
@extend .__chance_slice__sproutcore_ace_resources_progress_ace_progress_view_track_0_0_1__0_;
-chance-offset: "resources/progress/ace/progress_view_track_0_0_1__0_" 0 0;background-repeat: no-repeat;
position: absolute;
left: 0px; 
top: 0px; 
bottom: 0px; 
width: 1px; 
}
& > .middle {
@extend .__chance_slice__sproutcore_ace_resources_progress_ace_progress_view_track_1_0_1__0_;
-chance-offset: "resources/progress/ace/progress_view_track_1_0_1__0_" 0 0;background-repeat: repeat-x;
position: absolute;
left: 1px; 
top: 0px; 
right: 1px; 
bottom: 0px; 
}
& > .right {
@extend .__chance_slice__sproutcore_ace_resources_progress_ace_progress_view_track__0_1__0_0;
-chance-offset: "resources/progress/ace/progress_view_track__0_1__0_0" 0 0;background-repeat: no-repeat;
position: absolute;
top: 0px; 
right: 0px; 
bottom: 0px; 
width: 1px; 
}
;
  }

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

    /* width set in rendering */
    & > .left {
@extend .__chance_slice__sproutcore_ace_resources_progress_ace_progress_view_content_0_0_1__0_;
-chance-offset: "resources/progress/ace/progress_view_content_0_0_1__0_" 0 0;background-repeat: no-repeat;
position: absolute;
left: 0px; 
top: 0px; 
bottom: 0px; 
width: 1px; 
}
& > .middle {
@extend .__chance_slice__sproutcore_ace_resources_progress_ace_progress_view_content_1_0_1__0_;
-chance-offset: "resources/progress/ace/progress_view_content_1_0_1__0_" 0 0;background-repeat: repeat-x;
position: absolute;
left: 1px; 
top: 0px; 
right: 1px; 
bottom: 0px; 
}
& > .right {
@extend .__chance_slice__sproutcore_ace_resources_progress_ace_progress_view_content__0_1__0_0;
-chance-offset: "resources/progress/ace/progress_view_content__0_1__0_0" 0 0;background-repeat: no-repeat;
position: absolute;
top: 0px; 
right: 0px; 
bottom: 0px; 
width: 1px; 
}
;
  }

  &.indeterminate {

    
    .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 0px;
    }
    100% {
        background-position:42px 0px;
    }
}

@-moz-keyframes _sc_progressview_indeterminate {
    0% {
        background-position:0px 0px;
    }
    100% {
        background-position:42px 0px;
    }
}

@-ms-keyframes _sc_progressview_indeterminate {
    0% {
        background-position:0px 0px;
    }
    100% {
        background-position:42px 0px;
    }
}

@-o-keyframes _sc_progressview_indeterminate {
    0% {
        background-position:0px 0px;
    }
    100% {
        background-position:42px 0px;
    }
}

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