$cagov-regulatory-outline-margin: var(--s-2, 24px);

ol.cagov-regulatory-outline {
  &,
  & ol {
    counter-reset: section;
    list-style-type: none;
    margin-left: $cagov-regulatory-outline-margin;
    padding-left: $cagov-regulatory-outline-margin;

    li {
      counter-increment: section;
      list-style-type: none;
      margin: calc($cagov-regulatory-outline-margin * 0.5) 0;
      padding: 0;
      position: relative;

      &::before {
        background-color: transparent;
        content: '(' counter(section, lower-alpha) ') ';
        width: calc($cagov-regulatory-outline-margin * 3);
        margin-left: calc($cagov-regulatory-outline-margin * -1);
        padding-right: calc($cagov-regulatory-outline-margin * 0.5);
        display: inline-block;
        position: absolute;
        left: calc($cagov-regulatory-outline-margin * -2);
        white-space: nowrap;
        text-align: right;
      }
    }

    ol li {
      &:before {
        content: '(' counter(section, decimal) ') ';
      }

      ol li {
        &:before {
          content: '(' counter(section, upper-alpha) ') ';
        }

        ol li:before {
          content: '(' counter(section, lower-roman) ') ';
        }
      }
    }
  }
}
