:host {
  --component-color: var(--color-ti-primary-blue);
  --inactive-color: var(--color-ti-border-grey-dark);
}

.progress-bar-container {
  display: flex;
  width: 100%;
  align-items: center;
}

.circle {
  width: 18px;
  height: 18px;
  border-radius: 50px;
}

.circle.inactive {
  background-color: var(--inactive-color);
}

.circle.completed {
  background-color: var(--component-color);
}

.circle.active {
  border: 1px solid var(--component-color);
  background-color: transparent;
}

.inner-circle {
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background-color: var(--component-color);
}

.line {
  height: 1px;
  width: 8%;
}

.line.inactive {
  border-bottom: 2px dashed var(--inactive-color);
}

.line.active {
  border-bottom: 2px dashed var(--component-color);
}

.line.completed {
  border-bottom: 1px solid var(--component-color);
}

.no-pointer-event {
  pointer-events: none;
}

.check-icon {
  width: 12px;
  color: var(--color-ti-primary-white);
}