ul[data-type="taskList"] {
    list-style: none;
    padding: 0;

    p {
        margin: 0;
    }

    li {
        display: flex;

        > label {
            /* Box exactly one text-line tall and center the checkbox in it, so the
               checkbox lines up with the first line of the item's text. This tracks
               the editor line-height (--mantine-line-height-xl) instead of a magic
               padding-top that drifts from the real line box. */
            flex: 0 0 auto;
            margin-right: 0.5rem;
            height: calc(var(--mantine-line-height-xl, 1.65) * 1em);
            display: inline-flex;
            align-items: center;
            user-select: none;
        }

        > div {
            flex: 1 1 auto;
        }

        ul li,
        ol li {
            display: list-item;
        }

        ul[data-type="taskList"] > li {
            display: flex;
        }
    }
}

ul[data-type="taskList"] li > label input[type="checkbox"] {
    width: 1em;
    height: 1em;
    cursor: pointer;
}

