/*doc
---
title: Progress Bars
name: progress
category: Components - Progress Bars
---

A simple progress bar. Current percentage has to applied as inline style (width: xx%)

```htmlexample
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
        20%
    </div>
</div>
```

*/

.progress {
  overflow: hidden;
  height: 20px;
  margin-bottom: 20px;
  background-color: $c-gray-11;
  border-radius: 3px;
  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}

.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: $fs-small;
  line-height: 20px;
  color: $c-white;
  text-align: center;
  background-color: $c-blue-27;
  @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  @include transition(width 0.6s ease);
}

.progress-wrapper {
  padding: 20px;
  .progress {
    margin-bottom: 0;
  }
}
