<div *ngIf="!mobile" class="logo" [routerLink]="['/', tripId]" [queryParams]="{edit: true}"></div>
<ol *ngIf="!mobile">
   <!-- [ngClass]="[selectedStep === 3 ? 'activated' : '', selectedStep > 3 ? 'complete' : '']" -->
   <!-- <li [ngClass]="[selectedStep === 1 ? 'current' : '']">First night</li> -->
   <li [ngClass]="[selectedStep === 1 ? 'current' : '']"><a href="trip/{{tripID}}/activities">Activity</a></li>
   <li [ngClass]="[selectedStep === 2 ? 'current' : '']">Events</li>
   <li [ngClass]="[selectedStep === 3 ? 'current' : '']">Accomodation</li>
   <li [ngClass]="[selectedStep === 4 ? 'current' : '']"><a href =  "trip/{{tripID}}/itinerary">Itinerary</a></li>
   <li [ngClass]="[selectedStep === 5 ? 'current' : '']"><a href = "trip/{{tripID}}/summary">Send request</a></li>
</ol>

./wizard.component.scss

@import 'variables';

$number-of-steps: 7;

$line-width: 2px;
$bullet-size: 2em;

$background-color: $secondary-background-color;
$foreground-color: $primary-button-color;;

$active-background-color: $primary-button-color;
$active-foreground-color: white;

:host {
   min-width: 700px;
   margin-top: -5px;
}

ol {
   // background-color: black
   overflow: hidden;
   counter-reset: wizard;


}

li {
   position: relative;
   float: left;
   width: 100% / $number-of-steps;
   text-align: center;
   color: $active-background-color;
   font-size: 10pt;

   &::marker {
      color: transparent;
   }
}

a { color: $active-background-color;}

.current~li {
   color: $foreground-color;
}

li:before {
   counter-increment: wizard;
   content: counter(wizard);
   display: block;
   color: $active-foreground-color;
   background-color: $active-background-color;
   border: $line-width solid $active-background-color;
   text-align: center;
   width: $bullet-size;
   height: $bullet-size;
   line-height: $bullet-size;
   border-radius: $bullet-size;
   position: relative;
   left: 50%;
   margin-bottom: calc($bullet-size / 2);
   margin-left: calc($bullet-size * -0.5);
   z-index: 1;

   .current~& {
      background-color: $background-color;
      color: $foreground-color;
      border-color: $foreground-color;
   }
}

li+li {
   &:after {
      content: "";
      display: block;
      width: 100%;
      background-color: $active-background-color;
      height: $line-width;
      position: absolute;
      left: -50%;
      top: calc($bullet-size / 2);
      z-index: 0;
   }
}

.current~li:after {
   background-color: $foreground-color;
}

.logo {
   position: absolute;
   top: 0;
   right: 10px;
   width: 146px;
   height: 56px;
   margin: 16.75px;
   background-image: url("../../assets/logo.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: left top;
   cursor: pointer;
}