/*
 * Styles for rich text editor content.
 *
 * This file is registered on the RTE data types, which loads it into the editor
 * iframe so the result is visible while editing. CCMaster.cshtml links it for
 * the front end.
 *
 * Deliberately NO Umbraco style-name marker comments in here. Umbraco turns
 * every rule carrying one into a Styles-dropdown entry, but it can only build
 * an "inline" or a "block" format out of the selector: "ul.checklist--ash"
 * becomes a block format on "ul", which TinyMCE satisfies by WRAPPING the list
 * in a second <ul> - stacking another wrapper on every re-pick - instead of
 * putting the class on the list. Worse, as soon as a stylesheet yields any
 * format at all, Umbraco discards the style_formats from appsettings, which
 * would take the Headings, Lines and Circles entries down with it.
 *
 * So the dropdown entries live in appsettings.json instead, under
 * Umbraco:CMS:RichTextEditor:CustomConfig:style_formats, where they can be
 * declared with a "selector" of ul and a class "attributes" entry. That sets
 * the class on the existing <ul>, and re-picking a colour replaces it rather
 * than adding a second one.
 *
 * Nothing here matches a list an editor has not explicitly marked, so existing
 * rich text lists across the site keep rendering exactly as they do today.
 */

ul.checklist--darkgreen {
    --check-bg: #2a4a40;
}

ul.checklist--ash {
    --check-bg: #95aba1;
}

ul.checklist--brown {
    --check-bg: #a48580;
}

ul[class*="checklist--"] {
    list-style: none;
    padding-left: 0;
}

/* Child, not descendant: a nested sub-list keeps its normal bullets. */
ul[class*="checklist--"] > li {
    position: relative;
    list-style: none;
    padding-left: 36px;
    margin-bottom: 12px;
}

ul[class*="checklist--"] > li:last-child {
    margin-bottom: 0;
}

/* The circle. */
ul[class*="checklist--"] > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--check-bg, #95aba1);
}

/* The checkmark: two borders of an empty box, rotated. Same trick as the
   custom checkbox in main.scss. */
ul[class*="checklist--"] > li::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 6px;
    width: 6px;
    height: 10px;
    border: solid var(--check-fg, #ffffff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}