/* Bulleted, numbered and non-interactive checklist variants */
@layer horeca.components {
  .horeca-blog-list {
    margin: var(--horeca-space-4) auto var(--horeca-space-5);
    max-width: var(--horeca-reading-width);
    padding-left: 1.4em;
  }

  .horeca-blog-list li {
    margin-bottom: 0.65em;
    padding-left: 0.35em;
  }

  .horeca-blog-list li::marker {
    color: var(--horeca-red);
    font-weight: 700;
  }

  .horeca-blog-list li > :first-child { margin-top: 0; }
  .horeca-blog-list li > :last-child { margin-bottom: 0; }

  .horeca-blog-list.is-checklist {
    list-style: none;
    padding-left: 0;
  }

  .horeca-blog-list.is-checklist li {
    border-bottom: 1px solid var(--horeca-line);
    padding: 0.55rem 0 0.7rem 1.8rem;
    position: relative;
  }

  .horeca-blog-list.is-checklist li::before {
    color: var(--horeca-success);
    content: "✓";
    font-weight: 700;
    left: 0;
    position: absolute;
    top: 0.55rem;
  }

  @media (max-width: 48rem) {
    .horeca-blog-list {
      margin: var(--horeca-space-3) auto var(--horeca-space-4);
      padding-left: 1.2em;
    }

    .horeca-blog-list li {
      margin-bottom: 0.55em;
      padding-left: 0.2em;
    }

    .horeca-blog-list.is-checklist { padding-left: 0; }
    .horeca-blog-list.is-checklist li { padding-left: 1.65rem; }
  }
}