.checkpoint-connect-wrap {
  padding-bottom: 4px;
  @apply relative;
}
.checkpoint-done {
  @apply flex;

  h2 {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    @apply border-b border-solid border-primary-main bg-primary-main;
  }

  header {
    @apply text-heading-s ml-md;

    p {
      margin-top: 4px;
      @apply text-heading-s text-text-secondary;
    }
  }
}

.checkpoint {
  @apply flex;

  h2 {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    --text-opacity: 1;
    @apply border-b border-solid border-border bg-border;
  }

  header {
    @apply text-heading-s ml-md;

    p {
      margin-top: 4px;
      @apply text-heading-s text-text-secondary;
    }
  }
}

.checkpoint-connect {
  margin-left: 12px;
  margin-top: 22px;
  @apply absolute top-0 left-0 h-full border-l border-solid border-border;
}

.checkpoint-comments-wrap {
  max-width: 560px;
  padding: 4px;
  margin-top: 4px;
  @apply bg-grey-mid p-sm mt-sm;

  h4{
    @apply text-text-primary text-heading-s;
  }

  p{
    @apply text-text-secondary text-body-s-dt;
  }
}