@import 'base';

.progress-indicator {
  @mixin size($radius) {
    height: 2*$radius;
    padding-left: $radius;
    border-radius: $radius;
  }

  %indicator {
    white-space: nowrap;
    transition: width 0.2s;
    transition-timing-function: ease-out;
    display: flex;
    align-items: center;
  }

  width: 100%;
  display: flex;
  justify-content: center;

  &__bar {
    flex: 1;
    @extend %indicator;
    @include size(12px);
    position: relative;
    background-color: color(black, pale);
    color: color(black, light);
    max-width: 500px;
    margin-bottom: 20px;
    overflow: hidden;

    &-filler {
      height: inherit;
      padding: inherit;
      position: absolute;
      background-color: color(primary);
      color: color(white);
      overflow: hidden;
      top: 0;
      left: 0;
      bottom: 0;
    }
  }

  &.progress-indicator_small {
    .progress-indicator__bar {
      @include size(8px);
      font-size: 10px;
    }
  }
}