@layer lotek {
  .lt-list {
    box-sizing: border-box;
    margin: 0;
    padding-inline-start: var(--lt-spacing-5);
    /* The bullets and numbers are the browser's own, and are set here because
       a layer declared before `lotek`, such as Tailwind's Preflight in
       `base`, sets `list-style: none` on all lists. Without this rule
       `lotek` said nothing about the bullets, and Preflight won. `revert`
       goes back to the browser's stylesheet, so <ul> gets bullets, <ol>
       numbers, and a nested list circles and squares, as without Tailwind.
       Only the type, because the type is what Preflight takes; a
       `list-style-position` the consumer has set in an earlier layer still
       goes through. The variants below set `none` themselves, with higher
       specificity. */
    list-style-type: revert;
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    line-height: var(--lt-line-height-article);
    color: var(--lt-color-neutral-text-strong);
  }

  .lt-list li + li {
    margin-block-start: var(--lt-list-gap, var(--lt-spacing-1));
  }

  .lt-list .lt-list {
    margin-block-start: var(--lt-list-gap, var(--lt-spacing-1));
  }

  /* Without bullets and indentation, for lists that carry their own
     structure, such as rows of cards. The list stays a list for screen
     readers, except a <ul> in Safari, which can need role="list". See the
     component page. */
  .lt-list[data-variant="plain"] {
    list-style: none;
    padding-inline-start: 0;
  }

  .lt-list[data-variant="divided"] {
    list-style: none;
    padding-inline-start: 0;
  }

  .lt-list[data-variant="divided"] li + li {
    margin-block-start: 0;
    border-block-start: 1px solid var(--lt-color-neutral-border-subtle);
  }

  .lt-list[data-variant="divided"] li {
    padding-block: var(--lt-list-gap, var(--lt-spacing-2));
  }
}