@use "system/breakpoints";
@use "system/colors";
@use "system/typography";
@use "system/spacing";

.ods-step-by-step {
  list-style: none;
  counter-reset: orderedlist;

  &__item {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;

    position: relative;

    &:not(:last-child) {
      @extend %ods-padding-bottom-4, %ods-padding-bottom-6-breakpoint-large;
    }

    &::before {
      @extend %ods-margin-right-1;
      @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
      @extend %ods-text--weight-medium;

      counter-increment: orderedlist;
      content: counter(orderedlist);
      position: absolute;
      left: 0;
      top: 0;
      display: inline-block;
      width: 2em;
      height: 2em;
      padding-top: 0.15em;
      text-align: center;
      border: 2px solid colors.$blue-dark;
      border-radius: 100%;
    }

    &::after {
      content: "";
      position: absolute;
      left: 0.95em;
      top: 2em;
      bottom: 0;
      border-left: 2px solid colors.$blue-dark;
    }
  }

  &__heading {
    @extend %ods-text--size-juliett, %ods-text--size-india-breakpoint-large;
    @extend %ods-text--weight-medium;

    position: relative;
    top: 0.15em;
    margin-left: 2.75rem;
    @include breakpoints.large {
        margin-left: 3rem;
      }
  }

  &__text {
    @extend %ods-margin-top-3, %ods-margin-top-4-breakpoint-large;
    @extend %ods-text--weight-light;

    margin-left: 2.75rem;
    @include breakpoints.large {
        margin-left: 3rem;
      }
  }
}