.onboarding-section,
.external-section {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;

  .back-arrow {
    position: absolute;
    left: 0;
    top: 0;
  }

  .next,
  .button-wrapper {
    margin-top: auto;
  }

  .step-container {
    position: relative;
    transition: min-height 0.3s ease;
  }

  .sticky {
    position: -webkit-sticky;
    position: sticky;
    bottom: 32px;
  }

  .section-step {
    width: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;

    &.yes-or-no {
      .onboarding-page-title {
        margin-bottom: 0;
      }
    }
  }

  .form,
  form {
    margin-bottom: 32px;
  }

  .form-component {
    margin-bottom: 16px;
  }

  .v-provider {
    &.last {
      .form-component {
        margin-bottom: 32px;
      }
    }
  }
}

.mobile-identification-page {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;

  .back-arrow {
    position: absolute;
    left: 0;
    top: 0;
  }

  #croppie {
    margin-bottom: auto;
  }

  .camera-button {
    margin-top: auto;
  }

  .subtitle {
    width: 100%;
    text-align: center;
    color: var(--text-color-secondary);
  }
}

@include desktop-1440max() {
  .onboarding-section {
    .form, form {
      margin-bottom: 24px;
    }
  }
}

@include desktop-1280max() {
  .onboarding-section {
    .section-step {
      &.yes-or-no {
        .space-button {
          margin-top: 24px;
        }
      }
    }

    .form, form {
      margin-bottom: 4px;
    }
  }
}

@include screen-lg() {
  .onboarding-section {
    .form-component {
      margin-bottom: 24px;
    }

    .v-provider {
      &.last {
        .form-component {
          margin-bottom: 48px;
        }
      }
    }
  }
}
