/* ------------------------------------------------------------ */
/* Docs checklist - palette                                      */
/* ------------------------------------------------------------ */

.docs-content {
    --zato-checklist-box-border: rgba(26, 31, 54, 0.35);
    --zato-checklist-box-background: #ffffff;
    --zato-checklist-box-done-background: #1a7f37;
    --zato-checklist-box-done-check: #ffffff;
}

/* ------------------------------------------------------------ */
/* Docs checklist - items                                        */
/* ------------------------------------------------------------ */

div.docs-content .task-list-item {
    list-style-type: none;
    margin-left: -1.2rem;
    padding-bottom: 0.6rem;
}

div.docs-content .task-list-control {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: text-bottom;
    cursor: pointer;
}

div.docs-content .task-list-control input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

div.docs-content .task-list-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--zato-checklist-box-border);
    border-radius: 4px;
    background: var(--zato-checklist-box-background);
}

/* A checked-off item gets a filled box with a check mark. */

div.docs-content .task-list-control input[type="checkbox"]:checked + .task-list-indicator {
    border-color: var(--zato-checklist-box-done-background);
    background: var(--zato-checklist-box-done-background);
}

div.docs-content .task-list-control input[type="checkbox"]:checked + .task-list-indicator::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid var(--zato-checklist-box-done-check);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}