.root {
  display: list-item;
  margin-left: 1.1em;
  margin-bottom: 0.5em;
  list-style-position: outside;
}

.root > * {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.bullet {
  composes: root;
  list-style-type: disc;
  padding-left: 0.2em;
}

.number {
  composes: root;
  list-style-type: none;
  counter-increment: listItem;

  @nest &:before {
    margin-right: 0.9em;
    content: counter(listItem) ". ";
  }

  @nest & + :not(.number) {
    counter-reset: listItem
  }
}

.roman {
  composes: root;
  list-style-type: upper-roman;
}

.root {
  display: list-item;
  margin-left: 1.1em;
  margin-bottom: 0.5em;
  list-style-position: outside;
}

.root > * {
  display: inline-flex;;
  margin: 0;
  padding: 0;
}

.bullet {
  composes: root;
  list-style-type: none;
}

.bullet > * {
  @nest &:before {
    content: '\2022';
    font-weight: bold;
    margin-right: 1em;
  }
}

.number {
  composes: root;
  list-style-type: none;
  counter-increment: listItem;
  @nest & + :not(.number) {
    counter-reset: listItem
  }
}

.number > * {
  @nest &:before {
    margin-right: 1em;
    content: counter(listItem) ".";
  }
}

.roman {
  composes: root;
  list-style-type: upper-roman;
}

Tweak list CSS to take style into account
[form-builder] Slate: Tweak list CSS to take style into account
