.block-job-application {
  .job-application-stepper {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;

    .job-application-stepper-step {
      flex: 1 1 0;
      position: relative;
      padding: 0 0.25rem 0 0.25rem;
      text-align: center;
      color: var(--modern-text-color-1);

      .job-application-stepper-step-link {
        display: inline-block;
        text-align: center;
        text-decoration: none;

        .job-application-stepper-step-node {
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
          background-color: var(--modern-blue-1);
          margin: auto;
          border: 0.125rem solid var(--modern-blue-1);
          color: var(--modern-grey1);
          padding-top: 0.125rem;
        }

        .job-application-stepper-step-text {
          padding: 0.25rem;
          word-break: break-word;
          text-align: center;
        }
      }

      .job-application-stepper-step-link:visited {
        color: inherit;
      }

      .job-application-stepper-step-connectors {
        position: absolute;
        display: flex;
        flex-direction: row;
        width: 100%;
        z-index: -1;

        .job-application-stepper-step-connector {
          flex-grow:1;
          background-color: var(--modern-blue-1);
          height: 0.25rem;
          top: 0.875rem;
          position: relative;
        }
      }
    }

    .job-application-stepper-step:first-child .job-application-stepper-step-connectors .inward,
    .job-application-stepper-step:last-child .job-application-stepper-step-connectors .outward {
      opacity: 0;
    }

    .job-application-stepper-step.current {
      .job-application-stepper-step-node {
        background-color: var(--modern-grey1);
      }

      .job-application-stepper-step-connector.outward {
        background-color: var(--modern-lightgrey-1);
      }
    }

    .job-application-stepper-step.incomplete {
      .job-application-stepper-step-node {
        background-color: var(--modern-lightgrey-1);
        border-color: var(--modern-lightgrey-1);
      }

      .job-application-stepper-step-connector {
        background-color: var(--modern-lightgrey-1);
      }
    }
  }
}