/* Progress bar */

.progress {
  margin-bottom: 20px;
  height: 15px;
  overflow: visible;
  background: #e2e7eb;
  .box-shadow(none);
  .border-radius(15px);

  & .progress-bar {
    .border-radius(15px);
    position: relative;

    & .progress-number {
      position: absolute;
      right: 0;
      bottom: 100%;
      background: #333;
      padding: 2px 6px 1px;
      margin-bottom: 5px;
      display: block;
      line-height: 16px;
      .border-radius(4px);

      &:before {
        content: '';
        position: absolute;
        left: 50%;
        margin-left: -5px;
        bottom: -10px;
        border: 5px solid transparent;
        border-top-color: #333;
      }
    }
  }
  &.progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
  }
}
.progress-xs {
  height: 5px;

  & .progress-bar {
    line-height: 5px;
  }
}
.progress-sm {
  height: 10px;

  & .progress-bar {
    line-height: 10px;
  }
}
.progress-lg {
  height: 30px;
  & .progress-bar {
    line-height: 30px;
  }
}
.progress-bar {
  background: #348fe2;
  .box-shadow(none);

  &.progress-bar-success {
    background-color: @green;
  }
  &.progress-bar-info {
    background-color: @aqua;
  }
  &.progress-bar-warning {
    background-color: @orange;
  }
  &.progress-bar-danger {
    background-color: @red;
  }
  &.progress-bar-inverse {
    background-color: @black;
  }
  &.progress-bar-purple {
    background-color: @purple;
  }
}
