.ui-checklist { margin: 0; padding: 0; list-style: none; font: 15px/1.5 var(--ui-font); color: var(--ui-fg); }
.ui-checklist li { display: flex; align-items: flex-start; gap: 10px; margin: .4em 0; overflow-wrap: anywhere; }
.ui-checklist-icon { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; margin-top: .08em;
  border-radius: 50%; }
.ui-checklist-icon svg { width: .8em; height: .8em; }
.ui-checklist-done .ui-checklist-icon { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-checklist-todo .ui-checklist-icon { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-checklist-empty .ui-checklist-todo .ui-checklist-icon { background: none; border: 1.5px solid var(--ui-strong); color: transparent; }
.ui-checklist-empty .ui-checklist-todo { color: var(--ui-muted); }
.ui-checklist-strike .ui-checklist-done .ui-checklist-text { text-decoration: line-through; color: var(--ui-muted); }
.ui-checklist-summary { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ui-muted); }
.ui-checklist-sm { font-size: 13px; }
.ui-checklist-lg { font-size: 17px; }