.Progress {
  block-size: 4px;
  position: relative;
  overflow: hidden;
  background-color: var(--color-background-accent-light);
  border-radius: var(--border-radius-2xs);
}

  .Progress:focus-visible {
    outline: 0;
    box-shadow: var(--shadow-outline-focused);
  }

  .Progress_with-indicator {
    block-size: 24px;
  }

  .Progress_fullWidth {
    inline-size: 100%;
  }

  .Progress-Value {
    display: flex;
    justify-content: center;
    align-content: center;
    block-size: inherit;
    background-color: var(--color-background-accent-default);
    border-start-end-radius: 2px;
    border-end-end-radius: 2px;
    inline-size: var(--progress-value);
    will-change: inset-inline-start, inline-size;
  }

  .Progress-Value:not(.Progress-Value_indeterminate) {
      transition: inline-size var(--transition-default);
    }

  .Progress-Value_indeterminate {
      position: absolute;
      border-start-start-radius: 2px;
      border-end-start-radius: 2px;
      animation: indeterminate 4s ease-in-out;
      animation-iteration-count: infinite;
    }

  .Progress-Label {
    display: flex;
    align-items: center;
    color: var(--color-content-base-accent-on);
  }

@keyframes indeterminate {
  0% {
    inset-inline-start: -20%;
  }

  50% {
    inset-inline-start: 100%;
  }

  100% {
    inset-inline-start: -20%;
  }
}