// to-do is native
$icon-incomplete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-loader'%3E%3Cpath d='M12 2v4'/%3E%3Cpath d='m16.2 7.8 2.9-2.9'/%3E%3Cpath d='M18 12h4'/%3E%3Cpath d='m16.2 16.2 2.9 2.9'/%3E%3Cpath d='M12 18v4'/%3E%3Cpath d='m4.9 19.1 2.9-2.9'/%3E%3Cpath d='M2 12h4'/%3E%3Cpath d='m4.9 4.9 2.9 2.9'/%3E%3C/svg%3E");
$icon-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' viewBox='0 -960 960 960' width='20px' fill='%23e8eaed'%3E%3Cpath d='m419-285 291-292-63-64-228 228-111-111-63 64 174 175Zm60.68 226q-86.32 0-163.65-32.6-77.32-32.61-134.57-89.86T91.6-316.03Q59-393.35 59-479.86q0-87.41 32.66-164.28Q124.33-721 181.7-778.58q57.38-57.57 134.41-90.49Q393.15-902 479.34-902q87.55 0 164.83 32.85 77.29 32.85 134.57 90.3 57.29 57.46 90.27 134.52Q902-567.26 902-479.46q0 86.74-32.93 163.55-32.92 76.81-90.49 134.2Q721-124.33 644.13-91.66 567.26-59 479.68-59Z'/%3E%3C/svg%3E");
$icon-canceled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-circle-off'%3E%3Cpath d='m2 2 20 20'/%3E%3Cpath d='M8.35 2.69A10 10 0 0 1 21.3 15.65'/%3E%3Cpath d='M19.08 19.08A10 10 0 1 1 4.92 4.92'/%3E%3C/svg%3E");
$icon-forwarded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18px' viewBox='0 -960 960 960' width='18px' fill='%23e8eaed'%3E%3Cpath d='M762-521 612-671q-16-16-15.5-37.5T613-746q16-15 37.5-15t36.5 15l188 188q8 8 11.5 17t3.5 20q0 11-3.5 20T875-484L687-296q-16 16-37 15.5T613-296q-16-16-16.5-37.5T612-371l150-150Zm-288 53H264q-45 0-77.5 32T154-358v137q0 22-15.5 37.5T101-168q-22 0-37.5-15.5T48-221v-137q0-90 63.5-153T264-574h210l-98-98q-16-16-15.5-38t16.5-37q16-15 37-15t36 15l189 189q8 8 11.5 17t3.5 20q0 11-3.5 20T639-484L451-296q-15 15-36.5 15.5T377-295q-16-15-16.5-37t15.5-38l98-98Z'/%3E%3C/svg%3E");
$icon-scheduled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-calendar'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
$icon-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18px' viewBox='0 -960 960 960' width='18px' fill='%23e8eaed'%3E%3Cpath d='M479.75-218Q504-218 521-234.75q17-16.74 17-41Q538-300 521.25-317q-16.74-17-41-17Q456-334 439-317.25q-17 16.74-17 41Q422-252 438.75-235q16.74 17 41 17Zm.53 154q-85.92 0-161.76-32.52-75.84-32.52-132.66-89.34-56.82-56.82-89.34-132.62Q64-394.28 64-480.46q0-86.44 32.58-162 32.58-75.57 89.5-132.55Q243-832 318.7-864q75.69-32 161.76-32 86.43 0 161.98 32Q718-832 775-775t89 132.81q32 75.81 32 162T864-318.5q-32 75.5-88.99 132.42-56.98 56.92-132.77 89.5Q566.45-64 480.28-64Zm2.68-590q22.58 0 41.81 12.68Q544-628.64 544-606.39 544-586 531.31-569q-12.7 17-29.31 30-26 22-49 47.5T430-433q0 19.67 14.18 32.83Q458.36-387 478.6-387q20.65 0 35.03-13.5Q528-414 533-435q5-23 19.64-40.17 14.63-17.17 31.36-32.77 23-22.06 40-50.75T641-619q0-57-47.5-91.5T485.14-745q-42.05 0-79.59 19-37.55 19-63.71 54.27-9.84 12.81-5.34 28.77Q341-627 354.64-615.2 372-601 393-607.5q21-6.5 36-23.5 11-12 24.35-17.5 13.35-5.5 29.61-5.5Z'/%3E%3C/svg%3E");
$icon-important: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='19px' viewBox='0 -960 960 960' width='19px' fill='%23e8eaed'%3E%3Cpath d='M479.59-96Q439-96 410.5-124.91q-28.5-28.9-28.5-69.5 0-40.59 28.91-69.09 28.9-28.5 69.5-28.5 40.59 0 69.09 28.91 28.5 28.9 28.5 69.5 0 40.59-28.91 69.09-28.9 28.5-69.5 28.5Zm.2-298Q436-394 406-424.17q-30-30.16-30-73.89v-260.22Q376-802 406.21-832t74-30Q524-862 554-831.83q30 30.16 30 73.89v260.22Q584-454 553.79-424t-74 30Z'/%3E%3C/svg%3E");
$icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='19px' viewBox='0 -960 960 960' width='19px' fill='%23e8eaed'%3E%3Cpath d='m480-270-157 94q-15 8-29.5 7t-25.5-9q-11-8-16-22.5t-1-29.5l41-176-139-118q-13-10-15.5-24.5T139-576q4-13 16-22.5t27-10.5l181-16 72-167q7-16 19-23t26-7q14 0 26 7t19 23l72 168 181 15q15 1 27 11t16 23q4 13 1 27t-16 24L668-406l41 176q4 15-1 29.5T692-178q-11 8-25.5 9t-29.5-7l-157-94Z'/%3E%3C/svg%3E");
$icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-quote'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
$icon-location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-map-pin'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
$icon-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-bookmark'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
$icon-information: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-circle-alert'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
$icon-savings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-circle-dollar-sign'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 18V6'/%3E%3C/svg%3E");
$icon-idea: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18px' viewBox='0 -960 960 960' width='18px' fill='%23e8eaed'%3E%3Cpath d='M407.74-240Q378-240 357-261.15 336-282.3 336-312v-67q-57-37.3-88.5-95.65Q216-533 216-600q0-110.31 76.78-187.16 76.78-76.84 187-76.84T667-787.16q77 76.85 77 187.16 0 66.82-31.5 125.41T624-379v67q0 29.7-21.18 50.85Q581.65-240 551.91-240H407.74ZM396-96q-15.3 0-25.65-10.29Q360-116.58 360-131.79t10.35-25.71Q380.7-168 396-168h168q15.3 0 25.65 10.29Q600-147.42 600-132.21t-10.35 25.71Q579.3-96 564-96H396Z'/%3E%3C/svg%3E");
$icon-pro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-thumbs-up'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E");
// icon-cons is pro rotated
$icon-fire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-flame'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
$icon-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-key'%3E%3Cpath d='m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3C/svg%3E");
$icon-win: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-crown'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
$icon-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-circle-chevron-up'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 14 4-4 4 4'/%3E%3C/svg%3E");
// icon-down is up rotated

body {
  --checkbox-radius: 100%;
  --checkbox-quote-color: var(--gray-400);
  --checkbox-color-hover: var(--color-accent);
}
.theme-dark {
  --checkbox-color: var(--sea-green-500);
  --checklist-done-color: var(--sea-green-500);
  --checklist-orange-color: var(--orange-400);
  --checklist-green-color: var(--green-400);
  --checklist-red-color: var(--red-400);
  --checklist-yellow-color: var(--yellow-500);
}
.theme-light {
  --checkbox-color: var(--sea-green-300);
  --checklist-done-color: var(--sea-green-300);
  --checklist-orange-color: var(--orange-200);
  --checklist-green-color: var(--green-300);
  --checklist-red-color: var(--red-300);
  --checklist-yellow-color: color-mix(
    in oklch,
    var(--yellow-100),
    var(--orange-200) 20%
  );
}

@mixin task-checkbox-base {
  &:checked {
    --checkbox-marker-color: transparent;
    border-color: transparent;
    border-radius: 0;
    background-image: none;
    background-color: currentColor;
    -webkit-mask-position: 50% 50%;
  }
}

@mixin slash-task($letter) {
  .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="#{$letter}"],
  .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="#{$letter}"],
  ul > li.task-list-item[data-task="#{$letter}"],
  ul > li.task-list-item[data-task="#{$letter}"] {
    text-decoration: var(--checklist-done-decoration);
    --checklist-done-color: var(--gray-300);
  }
}

@mixin task-type($letter, $color, $icon, $rotate: 0, $decorate: false) {
  .tasks-callout .task-list-item.plugin-tasks-list-item {
    &[data-task="#{$letter}"] {
      background-color: color-mix(in srgb, $color, var(--gray-50) 85%);
      border: color-mix(in srgb, $color, var(--gray-50) 50%) 1px solid;
    }
  }
  .tasks-highlight .task-list-item.plugin-tasks-list-item {
    &[data-task="#{$letter}"] {
      background-color: color-mix(in srgb, $color, var(--gray-50) 85%);
    }
  }
  input[data-task="#{$letter}"],
  li[data-task="#{$letter}"] > input,
  li[data-task="#{$letter}"] > p > input {
    @include task-checkbox-base;

    &:checked {
      color: $color;
      -webkit-mask-image: $icon;
      transform: rotate(#{$rotate}deg);
    }
  }

  @if $decorate {
    .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="#{$letter}"],
    .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="#{$letter}"],
    ul > li.task-list-item[data-task="#{$letter}"],
    ul > li.task-list-item[data-task="#{$letter}"] {
      text-decoration: var(--checklist-done-decoration);
      --checklist-done-color: var(--gray-300);
      color: var(--checklist-done-color) !important;
    }
  }
}

input[type="checkbox"]:checked:hover {
  background-color: var(--gray-600);
}

@mixin task-type-done() {
  input[data-task="x"][type="checkbox"]:checked,
  input[data-task="X"][type="checkbox"]:checked {
    background-color: transparent;
    border-color: transparent;

    &:after {
      @include task-checkbox-base;
      color: var(--checklist-done-color);
      background-color: currentColor;
      -webkit-mask-size: 23px;
      -webkit-mask-image: $icon-done;
    }
  }
  .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"],
  .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"],
  ul > li.task-list-item[data-task="x"],
  ul > li.task-list-item[data-task="X"] {
    text-decoration: var(--checklist-done-decoration);
    color: var(--gray-300);
  }
}

@mixin task-type-quote() {
  input[data-task=\"],
  li[data-task=\"] > input,
  li[data-task=\"] > p > input {
    @include task-checkbox-base;

    &:checked {
      color: var(--checkbox-quote-color);
      -webkit-mask-image: $icon-quote;
      transform: scaleY(0.9);
    }
  }
}

body {
  .theme-dark {
    --checkbox-quote-color: var(--gray-400);
  }
  .theme-light {
    --checkbox-quote-color: var(--red-300);
  }
  // To-do is native
  @include task-type("/", var(--gray-400), $icon-incomplete);
  @include task-type-done();
  @include task-type("-", var(--gray-400), $icon-canceled, 0, true);
  @include task-type(">", var(--blue-400), $icon-forwarded);
  @include task-type("<", var(--gray-400), $icon-scheduled);
  @include task-type("?", var(--checklist-orange-color), $icon-question);
  @include task-type("!", var(--checklist-red-color), $icon-important);
  @include task-type("*", var(--checklist-yellow-color), $icon-star);
  @include task-type-quote();
  @include task-type("l", var(--checklist-red-color), $icon-location);
  @include task-type("b", var(--blue-400), $icon-bookmark);
  @include task-type("i", var(--blue-400), $icon-information);
  @include task-type("S", var(--checklist-green-color), $icon-savings);
  @include task-type("I", var(--checklist-yellow-color), $icon-idea);
  @include task-type("p", var(--checklist-green-color), $icon-pro);
  @include task-type("c", var(--checklist-red-color), $icon-pro, 180);
  @include task-type("f", var(--checklist-orange-color), $icon-fire);
  @include task-type("k", var(--checklist-orange-color), $icon-key);
  @include task-type("w", var(--checklist-yellow-color), $icon-win);
  @include task-type("u", var(--checklist-green-color), $icon-up);
  @include task-type("d", var(--checklist-red-color), $icon-up, 180);
}

.task-list-item {
  display: flex;
  > * {
    height: fit-content;
  }
}
