flood/client/source/sass/objects/_progress-bar.scss

.progress-bar {
  height: 3px;
  position: relative;
  transition: opacity 0.25s;
  z-index: 1;

  .is-selected.is-stopped & {
    opacity: 0.5;
  }

  &:after {
    background: $progress-bar--background;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    z-index: 0;
    top: 1px;
    transition: background 0.25s;
    width: 100%;

    .is-selected & {
      background: $progress-bar--background--selected;
    }

    .is-selected.is-stopped & {
      background: $progress-bar--background--selected--stopped;
    }
  }

  &__fill {
    background: $progress-bar--fill;
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: background 0.25s, width 0.25s;
    z-index: 1;

    .is-completed & {
      background: $progress-bar--fill--completed;
    }

    .is-seeding & {
      background: $progress-bar--fill--completed;
    }

    .is-stopped & {
      background: $progress-bar--fill--stopped;
    }

    .is-selected & {
      background: $progress-bar--fill--selected;
    }
  }
}