.progressbarContainer {
  label {
    display: block;
    font-weight: bold;
  }

  section {
    display: flex;
    gap: 0.75rem;
    align-items: center;

    aside {
      flex: 0 0 2rem;
      font-size: var(--font-size-sm);
    }
  }

  &:global(.small) {
    margin-bottom: 1rem;
  }

  &:global(.large) {
    margin-bottom: 2rem;
  }
}

.progressbarOuter {
  flex: 1 1 auto;
  height: 0.5rem;
  background-color: var(--color-hover);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  gap: 1px;
}

.progressbarInner {
  height: 100%;
}

:global(.default) {
  background-color: var(--progress-bar-default);
}

:global(.errors-and-warnings) {
  background-color: var(--progress-bar-errors-and-warnings);
}

:global(.unfinished) {
  background-color: var(--progress-bar-unfinished);
}

:global(.in-progress) {
  background-color: var(--progress-bar-in-progress);
}

:global(.first-entry-finished) {
  background-color: var(--progress-bar-first-entry-finished);
}

:global(.definitive) {
  background-color: var(--progress-bar-definitive);
}

:global(.not-started) {
  background-color: var(--progress-bar-not-started);
}
