.list--nested,
.list--unordered,
.list--ordered {
  counter-reset: listitem;
}

.list__item {
  font-weight: 400;
  color: $body-color;
  list-style-type: none;
  counter-increment: listitem;
  margin-left: $spacing-xs;
  padding-left: $spacing-xs;
  position: relative;
}

.list__item:before {
  position: absolute;
  left: -#{$spacing-xs};
}

.list--nested {
  margin-bottom: $spacing-2xs;
  margin-left: $spacing-xl;
}

.list--unordered > .list__item:before,
.list--ordered > .list__item:before {
  display: inline-block;
  margin-right: $spacing-xs;
  margin-bottom: $spacing-2xs;
}

.list--unordered
  .list--nested
  > .list__item:before,
.list--ordered
  .list--nested
  > .list__item:before {
  margin-right: $spacing-xs;
  display: inline-block;
}

.list--unordered > .list__item:before {
  content: '\002013';
}

.list--unordered
  ul.list--nested
  > .list__item:before {
  content: '\0025AA';
}

.list--unordered
  ol.list--nested
  > .list__item:before {
  content: counter(listitem, lower-alpha) '.';
}

.list--ordered > .list__item:before {
  content: counter(listitem) '.';
}

.list--ordered ol.list--nested {
  counter-reset: ol-counter;
}

.list--ordered
  ol.list--nested
  > .list__item {
  counter-increment: ol-counter;
}

.list--ordered
  ol.list--nested
  > .list__item:before {
  content: counter(ol-counter, lower-alpha) '.';
  width: 0.6rem;
}

.list--ordered
  ul.list--nested
  > .list__item:before {
  content: '\0025AA';
}