:root {
  --indicator-size: 3em; /* ~ 42 px */
  --indicator-border-radius: 99px;
  --setup-border-color: var(--color-border);
}

.SetupSteps {
  margin-top: 4rem;
}

.SetupNav {
  border-bottom: 1px solid var(--color-border);
}

.Setup-brandWordMark {
  font-size: 1.688rem;
}

.SetupStep {
  margin-bottom: 1.714rem;
  border: 1px solid var(--color-border);
  flex: 1;
}

.SetupStep.SetupStep--active {
  color: var(--color-brand);
}

.SetupStep.SetupStep--completed {
  color: var(--color-accent1);
}

.SetupStep.SetupStep--todo {
  color: var(--color-brand);
  background-color: var(--color-bg-medium);
  border-style: dashed;
}

.SetupStep-indicator {
  left: calc((var(--indicator-size) / 2) * -1);
  width: var(--indicator-size);
  height: var(--indicator-size);
  border-radius: var(--indicator-border-radius);
  border-color: var(--color-border);
  font-weight: bold;
  line-height: 1;
  background-color: var(--color-bg-white);
  margin-top: -3px;
}

.SetupStep-check {
  color: var(--color-text-white);
  display: none;
}

.SetupStep-title {
  color: currentColor; /* use the color of the parent to power the header text */
}

.SetupStep.SetupStep--active .SetupStep-indicator {
  color: var(--color-brand);
}

.SetupStep.SetupStep--completed .SetupStep-indicator {
  border-color: var(--color-accent1);
  background-color: var(--color-accent1);
}

.SetupStep.SetupStep--completed .SetupStep-check {
  display: block;
}

.SetupStep.SetupStep--completed .SetupStep-number {
  display: none;
}

.SetupCompleted {
  text-align: center;
}

.SetupCompleted .SetupStep-title {
  font-size: 2rem;
  line-height: 2rem;
}

.SetupHelp {
  color: var(--color-text-medium);
}
