.StepProgress {
  position: relative;
  padding-left: 45px;
  list-style: none;
  
  &::before {
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    width: 10px;
    height: 100%;
    border-left: 2px solid #CCC;
  }
  
  &-item:first-child::before {
    top: 10px;
  }
  
  &-item {
    position: relative;
    counter-increment: list;
    line-height: 1;
    display: flex;
    flex-direction: column;
    height: 32px; /* 55px (2 lines height) - 23px (or spacing) */
    justify-content: center;
    
    &:not(:last-child) {
      padding-bottom: 23px;
    }
    
    &::before {
      display: inline-block;
      content: '';
      position: absolute;
      left: -30px;
      height: 100%;
      width: 10px;
    }
    
    &::after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      left: -45px;
      width: 28px;
      height: 28px;
      border: 2px solid #d1d9e3;
      border-radius: 50%;
      background-color: #d1d9e3;
    }
    
    &.is-done {
      &::before {
        border-left: 2px solid #c99252;
      }
      &::after {
        content: "✔";
        font-size: 14px;
        line-height: 28px;
        color: #FFF;
        text-align: center;
        border: 2px solid #c99252;
        background-color: #c99252;
      }
    }
    
    &.current {
      &::before {
        border-left: 2px solid green;
      }
      
      &::after {
        content: counter(list);
        padding-top: 1px;
        width: 19px;
        height: 18px;
        top: -4px;
        left: -40px;
        font-size: 14px;
        text-align: center;
        color: green;
        border: 2px solid green;
        background-color: white;
      }
    }
  }
  
  strong {
    display: block;
  }
}

.StepProgress-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.StepProgress-actions .xml {
  margin-left: 10px;
}