$incomplete: #000;
$completed: #FFCF00;
$current: lighten(#005695, 15%);
$pulse-length: 1s;

ul.breadcrumbs {
  list-style: none;
  display: flex; /* Use flexbox for the list */
  justify-content: space-between; /* Distribute space evenly */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */

  & li {
    flex: 1; /* Allow all li elements to grow equally */
    margin: 0; /* Remove margin for consistent spacing */

    & a {
      cursor: pointer;
      display: flex; /* Use flex to center contents */
      align-items: center; /* Center items vertically */
      justify-content: center; /* Center items horizontally */
      background-color: $incomplete;
      color: white;
      line-height: 40px; /* Optional: Use if needed for height */
      padding: 0 10px 0 10px; /* Adjust padding as needed */
      position: relative; /* Required for pseudo-elements */
      box-shadow: 0px 0px 10px $incomplete;
      text-decoration: none; /* Remove underline from links */

      &:after,
      &:before {
        display: block;
        position: absolute;
        content: "";
        background-color: $incomplete;
      }

      &:after {
        right: -15px;
        height: 28.5px;
        width: 28.5px;
        top: 4px;
        z-index: 5;
        transform: rotate(45deg);
        border-right: 3px white solid;
        border-top: 3px white solid;
        border-radius: 3px;
      }

      &:before {
        right: 3px;
        width: 30px;
        height: 40px;
        z-index: 6;
      }

      & .number {
        border-radius: 50%;
        display: inline-block;
        background-color: white;
        color: black;
        width: 20px;
        text-align: center;
        margin-right: 5px; /* Space between number and text */
        line-height: 20px; /* Set line-height for alignment */
      }

      & .breadcrumb-text {
        display: inline-block; /* Ensure this is inline */
        max-width: 60px; /* Adjust max width as needed */
        white-space: nowrap; /* Prevent text from wrapping */
        overflow: hidden; /* Hide overflow text */
        text-overflow: ellipsis; /* Add ellipsis for overflow */
      }

      &.completed {
        background-color: $completed;
        color: black;
        box-shadow: 0px 0px 10px $completed;

        &:after,
        &:before {
          background-color: $completed;
        }
      }

      &.current {
        background-color: $current;
        animation-duration: $pulse-length;
        animation-name: pulse, glowPulse;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        box-shadow: 0px 0px 10px $current;

        &:after,
        &:before {
          background-color: $current;
          animation-duration: $pulse-length;
          animation-name: pulse;
          animation-direction: alternate;
          animation-iteration-count: infinite;
        }

        &:after {
          animation-name: pulse;
        }
      }
    }

    &:first-child a {
      padding: 0 35px;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    &:last-child a {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;

      &:after {
        display: none;
      }
    }
  }
}

@keyframes pulse {
  from {
    background-color: $incomplete;
  }

  to {
    background-color: $current;
  }
}

@keyframes glowPulse {
  from {
    box-shadow: 0px 0px 10px $incomplete;
  }

  to {
    box-shadow: 0px 0px 10px $current;
  }
}