// styles in this file affect the process list field used on Step by Step paragraphs(?)
.field--name-field-steps {
  max-width: 70rem;

  ol.process-steps {
    counter-reset: process-counter;
    list-style-position: outside;
    margin: 0 0 0 1.25em;
    padding-left: 1.94em;

    > li {
      border-left: 8px solid var(--va-blue-dark);
      counter-increment: process-counter;
      line-height: 1.5;
      list-style: none;
      margin: 0 !important;
      padding: 0 0 2em 2em;

      p {
        margin-top: 0;
      }

      &::before {
        background: var(--va-blue-dark);
        border: 4px solid var(--va-white);
        border-radius: 4em;
        color: var(--va-white);
        content: counter(process-counter);
        display: block;
        float: left;
        font-size: 1.3em;
        font-weight: 700;
        margin-left: -2.7em;
        position: relative;
        text-align: center;
        top: -0.2em;
        width: 1.6em;
      }

      &:last-child {
        border-left: 8px solid transparent;

        &::before {
          border: 4px solid var(--va-white);
        }
      }
    }
  }
}
