//////////////////////////////
// !THEME / COMPONENTS / LISTS
//////////////////////////////


.unl .dcf-main-content ol,
.unl .dcf-main-content ul {
  list-style: none; // Hide default numbers and bullets in lists
}


.unl .dcf-main-content ol:not(.dcf-list-bare) {
  counter-reset: li; // Reset the ordered list items counter for custom styling
}


.unl .dcf-main-content li::before {
  display: inline-block;
}


.unl .dcf-main-content ol > li {
  counter-increment: li; // Count the number of ordered list items
}


.unl .dcf-main-content ol > li::before {
  content: counter(li); // Replace the default ordered list numbers with custom styled numbers
  direction: rtl; // [1]
  @include font-sans;
  @include txt-2xs;
  margin-left: -2em; // [2]
  margin-right: 1em; // [2]
  text-align: right; // [1]
  width: 1em; // [2]
}
// [1] Ensure that numbers align right and longer numbers overflow to the left
// [2] Margin-left + (margin-right + width) = 0


.unl .dcf-main-content ul:not(.dcf-list-bare) > li::before {
  background-color: currentcolor;
  border-radius: 50%;
  content: '';
  height: .25em; // [1]
  margin-left: -#{ms(0)}em; // [2]
  margin-right: .75em; // [2]
  position: relative; // [3]
  top: 50%; // [3]
  transform: translateY(-50%); // [3]
  width: .25em; // [1], [2]
}
// [1] The height should equal the width to create a circle (bullet) shape.
// [2] Margin-left + (margin-right + width) = 0
// [3] Vertically center the bullet