/* Open-item marker: styles the `!!! todo` admonition used to flag unverified or unfinished content. */

:root {
  --todo-marker-color: #d500f9;
  --todo-marker-tint: rgba(213, 0, 249, 0.1);

  /* Fallback icon: a wrench, for "still being worked on". Only used if
   * theme.icon.admonition.todo is not set. */
  --md-admonition-icon--todo-fallback: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>');
}

/* Body: magenta border on all four sides, heavier on the left so it reads as a flag
 * down the side of the page rather than just another tinted box. */
.md-typeset .admonition.todo,
.md-typeset details.todo {
  border-color: var(--todo-marker-color);
  border-left-width: 6px;
}

/* Title bar */
.md-typeset .todo > .admonition-title,
.md-typeset .todo > summary {
  background-color: var(--todo-marker-tint);
  border-color: var(--todo-marker-color);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Icon */
.md-typeset .todo > .admonition-title::before,
.md-typeset .todo > summary::before {
  background-color: var(--todo-marker-color);
  -webkit-mask-image: var(--md-admonition-icon--todo, var(--md-admonition-icon--todo-fallback));
          mask-image: var(--md-admonition-icon--todo, var(--md-admonition-icon--todo-fallback));
}

/* Dark mode: the tint is transparent so it tracks the slate surface, but the border
 * needs lifting or it disappears against the darker background. */
[data-md-color-scheme="slate"] .md-typeset .admonition.todo,
[data-md-color-scheme="slate"] .md-typeset details.todo {
  border-color: #ea80fc;
}

[data-md-color-scheme="slate"] .md-typeset .todo > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .todo > summary::before {
  background-color: #ea80fc;
}