//
//Progress
//

.progress {
  border-radius: .25rem;
  overflow: hidden;
  background-color: rgba(0, 0, 0, .065);

  &[value]::-webkit-progress-bar {
    background-color: rgba(0, 0, 0, .065)
  }

  //.progress-bar
  &-bar {
    display: inline-block;
    float: left;
    height: 100%;
    border-radius: .25rem;
    background-color: #0074d9;
    font-size: .8em;
    -webkit-transition: width .6s ease;
    transition: width .6s ease;
    text-align: center;

    &-striped, .progress-striped & {
      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
    }

    &.active, .progress.active & {
      -webkit-animation: progress-bar-stripes 2s linear infinite;
      -o-animation: progress-bar-stripes 2s linear infinite;
      animation: progress-bar-stripes 2s linear infinite
    }

    &-stripes {
      @include generate-keyframes(&) {
        from {
          background-position: 40px 0
        }

        to {
          background-position: 0 0
        }
      }
    }
  }

  &-xxs {
    height: 4px
  }

  &-xs {
    height: 8px
  }

  &-sm {
    height: 12px;
    font-size: .8em
  }

}