@layer components {
  /* Task Lists (GFM style) */
  .task-list,
  ul:has(input[type="checkbox"]) {
    list-style: none;
    padding-inline-start: 0;
  }

  .task-list-item,
  li:has(input[type="checkbox"]) {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-block-end: 0.25rem;
  }

  /* Prevent extra margins from paragraphs inside task list items */
  .task-list-item p,
  li:has(input[type="checkbox"]) p {
    margin-block: 0;
  }

  /* Checkbox styling */
  .task-list-item-checkbox,
  li input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-block-start: 0.25em;
    flex-shrink: 0;
    
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--color-canvas);
    
    display: grid;
    place-content: center;
    transition: all var(--duration-fast) var(--ease-crisp);
  }

  .task-list-item-checkbox:checked,
  li input[type="checkbox"]:checked {
    background-color: var(--color-link);
    border-color: var(--color-link);
  }

  /* Checkmark */
  .task-list-item-checkbox::before,
  li input[type="checkbox"]::before {
    content: "";
    inline-size: 0.65rem;
    block-size: 0.65rem;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    background-color: var(--color-white);
  }

  .task-list-item-checkbox:checked::before,
  li input[type="checkbox"]:checked::before {
    transform: scale(1);
  }

  /* Dim text and add strikethrough for completed items */
  li:has(input[type="checkbox"]:checked) {
    color: var(--color-ink-light);
    text-decoration: line-through;
    text-decoration-color: var(--color-border-strong);
  }
}