.steps {
  padding: 0;
  margin: 0;
  list-style: none;
  color: $brand-gray;

  li {
    position: relative;
    display: inline-block;
    margin: 0 25px;
    width: 40px;
    height: 40px;
    line-height: 35px;
    text-align: center;
    background: $brand-gray-lt;
    border-radius: 50%;
    border: 3px solid $brand-gray;
  }

  li > a {
    color: $brand-gray-dk;
    z-index: 1;
    text-decoration: none;
  }

  li::after {
    content: '';
    position: absolute;
    top: 15px;
    width: 100px;
    height: 3px;
    background: $brand-gray;
    z-index: -1;
  }

  li:first-child {
    margin-left: 0;
  }

  li:last-child {
    margin-right: 0;
  }

  li:last-child::after {
    display: none;
  }

  .complete {
    line-height: 40px;
  }
  
  .complete,
  .complete::after {
    background: $brand-emerald;
  }

  .complete > a {
    color: $brand-white;
  }

  .active,
  .active::after {
    background: $brand-sky-dk;
  }

  .active > a {
    color: $brand-white;
  }
}