:root {
  --progress-height: 3rem;
  --progress-color: var(--color-midnight);
  --progress-font-size: 1.4rem;
  --progress-background-color: var(--color-cyan-light);
  --progress-border-color: var(--color-cyan-light);
  --progress-border-width: 1px;
}

.progress {
  border: var(--progress-border-width) solid var(--progress-border-color);
  border-radius: calc(var(--progress-height) / 2);
  overflow: hidden;
  position: relative;
}

.progress__progress {
  background-color: var(--progress-background-color);
  block-size: var(--progress-height);
  text-align: center;
}

.progress__label {
  color: var(--progress-color);
  font-size: var(--progress-font-size);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  list-style: 1;
  position: absolute;
  transform: translate(-50%, -50%);
}