/* A bar filled to the people understood out of those assigned, with a tick at the people expected
   by today. It is drawn from the three counts, --understood, --expected and --assignees, and
   coloured by the status tone. */
.pace-bar {
  background-color: var(--color-border);
  block-size: 8px;
  border-radius: var(--rounded-full);
  position: relative;
}

.pace-bar__fill {
  background-color: var(--status-tone);
  block-size: 100%;
  border-radius: inherit;
  inline-size: calc(var(--understood) / var(--assignees) * 100%);
}

.pace-bar__tick {
  background-color: var(--color-text);
  block-size: 16px;
  inline-size: 2px;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--expected) / var(--assignees) * 100%);
  position: absolute;
  translate: -50% -50%;
}