ul,
ol {
  margin: var(--list-margin);
  padding: var(--list-padding);
  font-family: var(--list-font-family);
  font-weight: var(--list-font-weight);
  font-size: var(--list-font-size);
  color: var(--list-color);
  line-height: var(--list-line-height);

  & li {
    margin: var(--list-item-margin);
    padding: var(--list-item-padding);

    & ul,
    & ol {
      margin: var(--child-list-margin);
      padding: var(--child-list-padding);

      /* Override margin removed for first child items in reset.css */
      &:first-child {
        margin: var(--child-list-margin);
      }

      & li {
        margin: var(--child-list-item-margin);
        padding: var(--child-list-item-padding);
      }
    }
  }
}

ul {
  list-style: var(--unordered-list-icon);

  & li {
    & ul {
      list-style: var(--unordered-child-list-icon);
    }
  }
}

ol {
  & li {
  }
}

.list-unstyled {
  list-style: none;

  & li {
    margin-left: 0;
  }
}

.list-inline {
  & li {
    display: inline-block;
  }
}

ul,
ol {
  margin: var(--list-margin);
  padding: var(--list-padding);
  font-family: var(--list-font-family);
  font-weight: var(--list-font-weight);
  font-size: var(--list-font-size);
  color: var(--list-color);
  line-height: var(--list-line-height);

  & li {
    margin: var(--list-item-margin);
    padding: var(--list-item-padding);

    & > ul,
    & > ol {
      margin: var(--child-list-margin);
      padding: var(--child-list-padding);

      /* Override margin removed for first child items in reset.css */
      &:first-child {
        margin: var(--child-list-margin);
      }

      & li {
        margin: var(--child-list-item-margin);
        padding: var(--child-list-item-padding);
      }
    }
  }
}

ul {
  list-style: var(--unordered-list-icon);

  & li {
    & ul {
      list-style: var(--unordered-child-list-icon);
    }
  }
}

ol {
  & li {
  }
}

.list-unstyled {
  list-style: none;

  & li {
    margin-left: 0;
  }
}

.list-inline {
  & li {
    display: inline-block;
  }
}

Fix direct child `<ul>` / `<ol>` of `<li>` recieving styles to avoid nested markup inheriting styles
Fix direct child `<ul>` / `<ol>` of `<li>` recieving styles to avoid nested markup inheriting styles
