/*
 * Custom "task" admonition/callout.
 *
 * `mkdocs-callouts` converts `> [!TASK]` into a Material admonition with the
 * class `task`. Material ships styling for the standard types (note, warning,
 * danger, tip, ...) but not `task`, so we define its colour + icon here.
 *
 * Verify after the first build: the generated markup is
 *   <div class="admonition task"> ... </div>   (or <details class="task"> for folded `> [!TASK]-`)
 * If the class differs, update the selectors below to match.
 */

:root {
  /* Checklist / clipboard-check icon (Material Design Icons "clipboard-check-outline"). */
  --md-admonition-icon--task: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 17 6 13l1.41-1.42L10 14.17l6.59-6.59L18 9m1-6h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-7 0a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1"/></svg>');
}

.md-typeset .admonition.task,
.md-typeset details.task {
  border-color: #7c4dff; /* deep purple */
}

.md-typeset .task > .admonition-title,
.md-typeset .task > summary {
  background-color: rgba(124, 77, 255, 0.1);
}

.md-typeset .task > .admonition-title::before,
.md-typeset .task > summary::before {
  background-color: #7c4dff;
  -webkit-mask-image: var(--md-admonition-icon--task);
          mask-image: var(--md-admonition-icon--task);
}