.Stepper {
  --stepper-color: $contentColor;
  --stepper-color-text: $textColorPrimary;
  --stepper-color-active: var(--color-primary);
  --stepper-color-point: var(--stepper-color);

  $pointSize: $unit * 2.5;
  font-size: $font-size-small;

  .step {
    position: relative;
    text-align: center;
    &.active, &.done {
      .point {
        color: $textColorAccent;
        background: var(--stepper-color-active);
      }
    }
    &.active {
      .step-title {
        color: $textColorAccent;
      }
    }
    &.done > .line {
      background: var(--stepper-color-active);
    }
    .step-title {
      font-size: 120%
    }
  }

  .point {
    position: relative;
    display: block;
    margin: auto;
    width: $pointSize;
    height: $pointSize;
    line-height: $pointSize;
    background: var(--stepper-color-point);
    color: var(--stepper-color-text);
    font-size: $font-size-small;
    border-radius: 50%;
  }

  .line {
    position: absolute;
    width: 100%;
    height: 1px;
    top: $pointSize / 2;
    background: var(--stepper-color-point);
  }
}