@use '../settings/variables' as v;
@use '../settings/mixins' as m;
@use '../settings/functions' as f;

.qpp-c-process-list {
  @include m.unstyled-list;
  font-family: v.$font-rubik;
  font-weight: v.$font-regular;
  line-height: v.$line-height-md;
  counter-reset: qpp-c-process-list;
  padding: f.rem(6px) 0 0 f.rem(18px);
  position: relative;

  @include m.at-media-max(xs) {
    padding: f.rem(4px) 0 0 f.rem(13px);
  }
}

.qpp-c-process-list__item {
  border-left: v.$spacing-4 solid v.$gray-10;
  margin-bottom: 0;
  padding-bottom: v.$spacing-32;
  padding-left: v.$spacing-32;

  @include m.at-media-max(xs) {
    padding-bottom: v.$spacing-24;
    padding-left: v.$spacing-24 - f.rem(1px);
    border-left: f.rem(2px) solid v.$gray-10;
  }

  &:last-child {
    border-left: v.$spacing-4 solid transparent;

    @include m.at-media-max(xs) {
      border-left: f.rem(2px) solid transparent;
    }
  }

  &::before {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 99rem;
    background-color: v.$gray-04;
    border: f.rem(4px) solid v.$gray-10;
    box-shadow: 0 0 0 f.rem(2px) v.$white; // TODO: support on alternate (dark) background?
    color: v.$gray-90;
    content: counter(qpp-c-process-list, decimal);
    counter-increment: qpp-c-process-list;
    display: flex;
    font-family: v.$font-rubik;
    font-size: v.$font-size-18;
    font-weight: v.$font-medium; // v.$font-regular;
    height: v.$spacing-40;
    left: 0;
    line-height: 1;
    margin-top: -0.4rem;
    position: absolute;
    width: v.$spacing-40;

    @include m.at-media-max(xs) {
      font-size: v.$font-size-16;
      height: f.rem(28px);
      width: f.rem(28px);
      border: f.rem(2px) solid v.$gray-10;
      margin-top: f.rem(-2px);
    }
  }

  ul {
    list-style-type: disc;

    li {
      margin-bottom: 0;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  > *:first-child {
    margin-top: 0;
  }

  > *:last-child {
    margin-bottom: 0;
  }

  .qpp-c-process-list__heading {
    font-size: v.$font-size-24;
    line-height: 1.25;
    font-family: v.$font-rubik;
    font-weight: v.$font-medium;
    margin: 0 0 v.$spacing-16 0;

    + * {
      margin-top: 0;
    }

    @include m.at-media-max(xs) {
      margin: 0 0 v.$spacing-12 0;
      font-size: v.$font-size-20;
    }
  }
}