/* stylelint-disable scss/selector-no-union-class-name */

.Progress {
  $this: &;

  &--striped {
    #{$this}-bar {
      background-image: linear-gradient(45deg, hsla(0, 0%, 100%, 0.15) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0.15) 75%, transparent 0, transparent);
      background-size: 1rem 1rem;
    }
  }

  &--animated {
    #{$this}-bar {
      animation: progress-bar-stripes 1s linear infinite;
    }
  }
}

.ProgressGroup {
  .Progress + .Progress {
    margin-left: 8px;
  }
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }

  100% {
    background-position: 0 0;
  }
}