// PROCESS LIST
$theme-process-list-counter-content-padding: calc(
  (#{units($theme-process-list-counter-size)} / 2) - #{units(0.5)}
);
$theme-process-list-counter-line-x-position: calc(
  (
    (#{units($theme-process-list-counter-size)} / 2) -
      (#{units($theme-process-list-connector-width)} / 2)
  )
);

@include override-prose {
  .usa-process-list {
    @include typeset($theme-process-list-font-family);
    @include unstyled-list;
    counter-reset: usa-numbered-list;
    padding: 20px 0 0 $theme-process-list-counter-line-x-position;
    position: relative;

    // Use increased specificity to override unstyled-list()
    & > .usa-process-list__item {
      @include u-measure(5);
    }
  }

  .usa-process-list__item {
    border-left: units($theme-process-list-connector-width) solid
      color($theme-process-list-connector-color);
    font-size: size(
      $theme-process-list-font-family,
      $theme-process-list-font-size
    );
    margin-bottom: 0;
    padding-bottom: units(4);
    padding-left: calc(#{$theme-process-list-counter-content-padding} * 2);
  }
}

.usa-process-list__item {
  &:last-child {
    border-left: units($theme-process-list-connector-width) solid transparent;
  }

  &::before {
    @include u-flex("row", "align-center", "justify-center");
    $half-of-font-size: -0.4rem;
    @include u-circle($theme-process-list-counter-size);
    background-color: color($theme-process-list-counter-background-color);
    border: units($theme-process-list-counter-border-width) solid
      color($theme-process-list-counter-border-color);
    box-shadow: 0 0 0 units($theme-process-list-counter-gap-width)
      color($theme-process-list-counter-gap-color);
    color: color($theme-process-list-counter-text-color);
    content: counter(usa-numbered-list, decimal);
    counter-increment: usa-numbered-list;
    display: flex;
    font-family: family($theme-process-list-counter-font-family);
    font-size: size(
      $theme-process-list-counter-font-family,
      $theme-process-list-counter-font-size
    );
    font-weight: font-weight("bold");
    height: units($theme-process-list-counter-size);
    left: 0;
    line-height: lh($theme-process-list-counter-font-family, 1);
    margin-top: $half-of-font-size;
    position: absolute;
    width: units($theme-process-list-counter-size);
  }

  ul {
    list-style-type: disc;

    li {
      margin-bottom: units(0.5);

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

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

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

.usa-process-list__heading {
  @include typeset(
    $theme-process-list-heading-font-family,
    $theme-process-list-heading-font-size,
    2
  );
  color: color($theme-process-list-heading-color);
  font-family: family($theme-process-list-heading-font-family);
  font-weight: font-weight("bold");
  margin: 0;

  & + * {
    margin-top: units(0.5);
  }
}