<div class="richText">
  <ul>
    <li>Ipsum voluptas cupiditate.</li>
    <li>Adipisicing impedit accusantium!</li>
    <li>
      Amet laudantium nulla.
      <ul>
        <li>Etiam euismod nunc id felis suscipit sodales sed in quam odio proin tempus ultricies orci, sed ultricies leo.</li>
        <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque finibus, odio id cursus porta, neque odio imperdiet purus, at tempor lorem lacus ut massa.</li>
        <li>Amet laudantium nulla.</li>
      </ul>
    </li>
    <li>Amet laudantium nulla.</li>
  </ul>
  
  <ol>
    <li>Ipsum voluptas cupiditate.</li>
    <li>Adipisicing impedit accusantium!</li>
    <li>
      Lorem minus sit corporis ut fugit?
      <ol>
        <li>Elit neque quia inventore</li>
        <li>Consectetur alias a eius.</li>
        <li>Lorem vero nam ab</li>
      </ol>
    </li>
    
    <li>Amet laudantium nulla.</li>
  </ol>
</div>


<ul class="list">
  <li>
    Dolor nulla a illum veniam cumque Quod repudiandae atque tempore deleniti ut beatae culpa. Molestias distinctio sit necessitatibus tenetur aliquam fuga. Ducimus aliquam commodi eum autem atque? Fuga sequi nesciunt
  </li>
  <li>Ipsum velit delectus explicabo eum voluptatem. Debitis</li>
  <li>Lorem aspernatur hic eos dignissimos tempore quia!</li>
</ul>

<ol class="list">
  <li>Adipisicing quaerat nemo</li>
  <li>Dolor sit optio?</li>
  <li>Dolor dolor dolorem.</li>
  <li>Amet quas aliquam</li>
</ol>

<dl class="list">
  <dt>
    Amet iure.
  </dt>
  <dd>
    Ipsum id sequi molestiae doloribus sequi Deserunt quos modi quos saepe voluptate eum vel esse Neque excepturi ratione id modi quo. Suscipit blanditiis officia quod saepe vero Mollitia dolorum magni.
  </dd>
  <dt>
    Adipisicing a nesciunt.
  </dt>
  <dd>
    Amet rem cumque quo asperiores saepe, saepe! Quod natus eveniet dolore ducimus at nisi beatae Iste rerum placeat id laboriosam officia. Corrupti tempora ad hic magni laudantium Cum voluptates aut
  </dd>
  <dt>
    Amet minus corrupti
  </dt>
  <dd>
    Dolor distinctio repellendus aliquid sint necessitatibus. Minus quidem tempora obcaecati provident molestias, odio. Iusto itaque magni facere quos unde Eaque qui quis voluptas nobis minima? Doloribus facere inventore natus fugit.
  </dd>
  <dt>
    Elit commodi voluptatibus.
  </dt>
  <dd>
    Dolor voluptatibus et praesentium aliquam debitis vitae. Saepe nihil enim dicta doloremque expedita. Id consequuntur modi maxime omnis delectus Cum omnis voluptatum molestias eius incidunt? Consequuntur eaque non animi dolore.
  </dd>
  <dt>
    Dolor nulla inventore.
  </dt>
  <dd>
    Ipsum ullam facilis similique labore quis Molestiae modi ratione tenetur cumque aspernatur aliquid Nemo culpa velit corrupti excepturi illum Repellendus voluptates similique fugiat dolorum rem iusto Tenetur animi voluptatibus similique!
  </dd>
  <dt>
    Amet in labore?
  </dt>
  <dd>
    Amet eum explicabo provident pariatur magni cumque. Laborum eius ab totam exercitationem dicta. Nostrum minima sint praesentium nobis blanditiis. Fugiat commodi illo nihil reiciendis ab Voluptas in consequatur ea earum.

    <dl class="list">
      <dt>
        Amet voluptatibus inventore
      </dt>
      <dd>
        Ipsum tenetur nemo omnis rerum modi fugiat aut, voluptas. Dolores minus sunt adipisci suscipit voluptas Tempore ullam explicabo quos facilis soluta recusandae Explicabo velit earum rem consequatur itaque exercitationem. Amet
      </dd>
    </dl>
    
  </dd>
</dl>

ul,
ol {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

.list {
  --list-line-height: 1.125;
  line-height: var(--list-line-height);
  margin-bottom: 1rem;
  padding-left: 3rem;

  > li {
    margin-bottom: 1em;
  }

  &:where(ul) {
    > li::before {
      position: absolute;
      background: var(--accent-color);
      border-radius: 1em;
      content: '';
      display: inline grid;
      height: .5em;
      width: 1em;
      translate: -1.5em calc(.5em * (var(--list-line-height) - .5));
    }

  }

  ul, ol {
    margin-top: 1rem;
    padding-left: 3rem;
  }

  &:where(ul ul) {
    & > li::before {
      height: .25em;
      translate: -1.5em calc(.5em * (var(--list-line-height) - .25));
      background: var(--accent-color-200);
    }
  }

  &:where(ol) {
    list-style: decimal;

    > li::marker {
      font-weight: bold;
      color: var(--accent-color);
    }
  }

  &:where(ol ol) {
    list-style: lower-alpha;
  }

  dt {
    margin-left: -1.5em;
    font-weight: bold;
    color: var(--accent-color);
  }

  dd {
    margin: 0 0 1em;
  }
}