.ls-stepper {
  $root: &;

  &__steps-axis {
    width: 100%;
    margin-bottom: 4 * $sp;
    display: flex;
    align-items: center;
  }

  &__steps-axis-step {

    &:not(:last-of-type) {
      flex-grow: 1;
      display: flex;
      align-items: center;

      #{$root}__step-axis-step-line {
        margin: 0 2 * $sp;
        border-top: set-border();
        flex-grow: 1;
      }
    }

  }

  &__step {
    display: flex;
    align-items: stretch;
    margin-bottom: 2 * $sp;

    &:not(:last-of-type) {
      #{$root}__step-line {
        border-left: set-border();
      }
    }
  }

  &__step-side {
    margin-right: 4 * $sp;
    display: flex;
    flex-direction: column;
  }

  &__step-icon {
    color: $color-white;
    background-color: $color-disabled;
    padding: 2 * $sp;
    height: 2rem;
    width: 2rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    &--active {
      background-color: $color-primary;
    }

    &--complete {
      background-color: $color-success;
    }
  }

  &__step-line {
    margin-left: 1rem;
    flex-grow: 1;
    margin-top: 2 * $sp;
  }

  &__step-main {
    flex-grow: 1;
  }

  &__step-header {
    width: 100%;
    margin-bottom: 4 * $sp;
    display: flex;
  }

  &__step-titles {
    flex-grow: 1;
    margin-right: 2 * $sp;
  }

  &__step-title {
    font-size: 2rem;
    color: $color-text;
    margin-bottom: $sp;
    font-weight: bold;
  }

  &__step-subtitle {
    font-size: 1.5rem;
    color: $color-text-2;
  }

  &__step-content {
    margin-bottom: 2 * $sp;
  }
}