// Progress Indicator
//================================================== //

.progress {
  background: $progress-bg-color;
  border: 1px solid $progress-border-color;
  border-radius: 4px;
  display: block;
  height: 8px;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
  width: 100%;

  .progress-bar {
    @include transition(width 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

    background: $progress-bar-bg-color;
    border-radius: 4px;
    height: 6px;
    left: 0;
    position: absolute;
    top: 0;
  }

  .progress-label {
    display: inline-block;
  }
}

// RTL Styles
html[dir='rtl'] {
  .progress {
    .progress-bar {
      left: auto;
      right: 0;
    }
  }
}