<div class="container">
  <ul class="step-progress">
    <li class="complete">Disclosures Signed</li>
    <li class="complete">Submitted to Processing</li>
    <li class="complete">UW Submitted</li>
    <li class="current">Conditional Approval</li>
    <li>Conditions Submitted</li>
    <li>CTC</li>
    <li>Closing Package Sent</li>
    <li>Funding Conditions</li>
    <li>Closed</li>
  </ul>
</div>

/* Add padding to the container to make room for the glow */
.container {
  width: 100%;
  padding: 5px; /* This creates space for the glow */
}

.step-progress {
  list-style: none;
  display: flex; /* Lays out the steps horizontally */
  padding: 0;
  margin: 0;
}

.step-progress li {
  /* Core Styling */
  flex: 1; /* Each step takes up equal space */
  height: 41px;
  color: #fff;
  position: relative;
  font-weight: bold;
  font-size: 11px;

  /* Centering the text */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Changes for text wrapping */
  padding: 15px 25px;
  word-break: break-word;

  /* The clip-path creates the chevron shape */
  clip-path: polygon(0% 0%, calc(100% - 22px) 0%, 100% 50%, calc(100% - 22px) 100%, 0% 100%, 22px 50%);

  /* Default background for incomplete steps */
  background: #676c7c;
}

/* Overlap the items to create the connected look */
.step-progress li:not(:first-child) {
  margin-left: -16px; /* Creates the 3px gap */
}

/* Style for completed steps */
.step-progress li.complete {
  background: linear-gradient(to right, #479fea, #9bebfb);
  color: #000;
}

/* Glow effect for current step */
.step-progress li.current {
  background: linear-gradient(to right, #479fea, #9bebfb);
  color: #000;
  z-index: 10;
  filter: drop-shadow(0 0 20px rgba(112, 194, 245, 0.8))
}

/* Adjust the first step to have a flat left side */
.step-progress li:first-child {
  clip-path: polygon(0% 0%, calc(100% - 22px) 0%, 100% 50%, calc(100% - 22px) 100%, 0% 100%);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

/* Adjust the last step to have a flat right side */
.step-progress li:last-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 22px 50%);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

$('.step-menu li').click(function(){
  $('.current').removeClass('current')
  $('.complete').removeClass('complete')
  $(this).addClass('current')
  $(this).prevAll().addClass('complete')
})