/* The progress indicator used in tasks and file items for AJAX */

.cuar-progress {
  display: block;

  .indeterminate {
    display: block;
    width: 20px;
    height: 20px;
    background: url('../img/loading-indicator.gif') no-repeat;
  }

  .determinate {
    background-color: #a7cfa5;
    width: 50%;
    height: 6px;
  }
}

/* @deprecated A horizontal progress indicator as used in projects.
 You should be using the `.cuar-progress .determinate` class!
 */

.cuar-horizontal-progress {
  border: 1px solid #efefef;
  background: #fafafa;
  height: 15px;

  &>div {
    display: block;
    height: 100%;
    width: 0;
    background: #87CEEB;
    text-indent: -9999px;
  }

  &>.caption {
    color: #999;
  }
}

.wp-list-table .cuar-horizontal-progress {
  margin-top: 5px;
  text-align: center;
}