.progress-steps {
  /* Hide 'JOIN US' on mobile */
  h6 {
    display: none;
    padding-bottom: 0;
    letter-spacing: 1px;
  }

  ul {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    list-style: none !important;
  }
}

li.progress-step {
  flex: 0 1 33%;
  margin-top: 0;
  text-align: center;
  position: relative;

  &:first-child {
    .progress-line {
      display: none;
    }
  }

  &.progress-step--done {
    .progress-text {
      color: black;
    }
    .progress-circle {
      background-color: $primary;
      border-color: $primary;
    }
  }

  &.progress-step--current {
    .progress-text {
      color: black;
      font-weight:bold;
    }

    .progress-circle {
      background-color: $primary-focus;
      border-color: $primary;
    }
  }

  &.progress-step--next {
    .progress-circle {
      border-color: $gray;
    }

    .progress-line {
      background-color: $gray;
    }
  }

  div {
    align-items: center;
    display: flex;
    flex-direction: column;
  }
}

.progress-circle {
  background-color: white;
  border-style: solid;
  border-width: 2px;
  border-radius: 100%;
  flex: 0 0 20px;
  height: 20px;
  margin-bottom: 0.5rem;
  position: relative;
  width: 20px;
  z-index: 1;
}

.progress-line {
  background-color: $primary;
  height: 2px;
  position: absolute;
  right: calc(50% + 9px);
  top: 9px;
  width: 100%;
  z-index: 0;
}

.progress-steps__secure {
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  div {
    display: flex;
    gap: 0.5rem;
  }
  p {
    margin-bottom: 0.25rem;
  }
  br {
    display: none;
  }
}

@include media-breakpoint-up(md) {
  .progress-steps {
    align-self: flex-start;
    position: sticky;
    top: 50px;

    h6 {
      display: block;
      margin-bottom: 1.25rem;
      text-transform: uppercase;
    }

    ul {
      display: block;
    }
  }

  li.progress-step {
    margin-top: 1rem;

    div {
      flex-direction: row;
    }
  }

  .progress-text {
    white-space: nowrap;
  }

  .progress-circle {
    margin-bottom: 0;
    margin-right: 0.75rem;
  }
  
  .progress-line {
    background-color: $primary;
    bottom: 22px;
    height: 100%;
    left: 9px;
    top: calc(4px - 100%);
    width: 2px;
  }

  .progress-steps__secure {
    flex-direction: column;

    p {
      margin-bottom: 0;
    }
    br {
      display: inline;
    }
  }
}