.progress {
  --progress-bar-height: 4px;
  --progress-bar-border-width: 4px;
  --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
  height: 4px;
  height: var(--progress-bar-height);
  overflow: hidden;
  margin-top: calc((24px - 4px) / 2);
  margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
  margin-bottom: calc((24px - 4px) / 2);
  margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
  background-color: #c9cbce;
  background-color: var(--color-interactive-secondary);
  border-radius: calc(4px + 4px);
  border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
}
.progress-bar {
  float: left;
  position: relative;
  top: calc(-1 * var(--progress-bar-border-width));
  left: calc(-1 * var(--progress-bar-start-shift));
  height: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
  font-size: 1rem;
  font-size: var(--font-size-16);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  color: #fff;
  text-align: right;
  background-color: #0097c7;
  background-color: var(--color-content-accent);
  border: var(--progress-bar-border-width) solid #ffffff;
  border: var(--progress-bar-border-width) solid var(--color-background-screen);
  border-radius: inherit;
}
[dir="rtl"] .progress-bar {
  float: right;
}
[dir="rtl"] .progress-bar {
  text-align: left;
}
[dir="rtl"] .progress-bar {
  right: calc(-1 * var(--progress-bar-start-shift));
  left: 0;
}
.progress-bar-primary {
  background-color: #37517e;
  background-color: var(--color-content-primary);
}
.progress-bar-success {
  background-color: #008026;
  background-color: var(--color-content-positive);
}
.progress-bar-info {
  background-color: #0097c7;
  background-color: var(--color-content-accent);
}
.progress-bar-warning {
  background-color: #9a6500;
  background-color: var(--color-content-warning);
}
.progress-bar-danger {
  background-color: #cf2929;
  background-color: var(--color-content-negative);
}