.ProgressLine {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: var(--progress-line-height);
  background: var(--color-bg-system);
}

  .ProgressLine::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    background-color: var(--color-bg-link);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }

  .ProgressLine_size_s {
      --progress-line-height: var(--space-3xs);
    }

  .ProgressLine_size_m {
      --progress-line-height: var(--space-2xs);
    }

  .ProgressLine_mode_step {
      display: grid;
      height: auto;
      background: transparent;
      grid-template-columns: repeat(
        var(--progress-line-steps),
        calc(100% / var(--progress-line-steps))
      );
      grid-gap: var(--space-3xs);
    }

  .ProgressLine_mode_determinate::after {
        width: 100%;
        -webkit-transform: scaleX(var(--progress-line-value));
                transform: scaleX(var(--progress-line-value));
        -webkit-transform-origin: left;
                transform-origin: left;
      }

  .ProgressLine_mode_indeterminate::after {
        width: 80%;
        -webkit-transform-origin: left;
                transform-origin: left;
        -webkit-animation: ProgressLineAnimation 3s linear infinite;
                animation: ProgressLineAnimation 3s linear infinite;
      }

  .ProgressLine-Step {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }

  .ProgressLine-Line {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    height: var(--progress-line-height);
    background: var(--color-bg-system);
  }

  .ProgressLine-Line::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: var(--progress-line-height);
      background: var(--color-bg-brand);
      -webkit-transition: width 0.3s linear;
      transition: width 0.3s linear;
      -webkit-transition-delay: var(--progress-line-delay);
              transition-delay: var(--progress-line-delay);
    }

  .ProgressLine-Line_active::after {
      width: 100%;
    }

  .ProgressLine-Label {
    margin-top: var(--space-3xs);
  }

@-webkit-keyframes ProgressLineAnimation {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  100% {
    -webkit-transform: translateX(130%);
            transform: translateX(130%);
  }
}

@keyframes ProgressLineAnimation {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  100% {
    -webkit-transform: translateX(130%);
            transform: translateX(130%);
  }
}