@charset "UTF-8";

@mixin list() {
  div[data-task] > label.task-list-label,
  ul > li.task-list-item,
  ul > li.task-list-item > p  {
    color: var(--text-normal);
    font-weight: unset;
    text-decoration: unset;

    > input.task-list-item-checkbox[type=checkbox]:not(:checked) {
      background-color: unset;
      background: unset;
    }
  }

  @include custom-task-text("x", var(--checkbox-checked), "✓", var(--font-normal), none, var(--text-normal), var(--font-text));
  @include custom-task-text("-", var(--checkbox-cancelled), "-", var(--font-normal), line-through, var(--text-faint));
  @include custom-task-text(">", var(--checkbox-deferred), ">", var(--font-normal), none);
  @include custom-task-text("b", var(--checkbox-deferred), "🧱", var(--font-normal), none);
  @include custom-task-text("R", var(--checkbox-review), "👀", var(--font-normal), none, var(--text-normal), var(--font-text));
  @include custom-task-text("r", var(--checkbox-review), "👀", var(--font-normal), none, var(--text-normal), var(--font-text));
  @include custom-task-text("?", var(--checkbox-question), "?", var(--font-normal), none);
  @include custom-task-text("!", var(--checkbox-important), "!", var(--font-extrabold), none);
  @include custom-task-background("/", var(--checkbox-in-progress), "linear-gradient(135deg, transparent 50%, var(--checkbox-in-progress) 50%)");
}

@mixin custom-task-background(
  $character,
  $rgb-color,
  $background,
  $font-weight: var(--font-normal),
  $text-decoration: none,
  $li-fg: var(--text-normal)
) {
  div[data-task="#{$character}"],
  li.task-list-item[data-task="#{$character}"],
  li.task-list-item[data-task="#{$character}"] > p {
    color: $li-fg;
    font-weight: $font-weight;
    text-decoration: $text-decoration;
  }
  div[data-task="#{$character}"] > label.task-list-label,
  li.task-list-item[data-task="#{$character}"],
  li.task-list-item[data-task="#{$character}"] > p,
  .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="#{$character}"] {
    --checkbox-color: #{$rgb-color};
    --checkbox-border-color: #{$rgb-color};
    --checkbox-marker-color: transparent;
    --checklist-done-decoration: #{$text-decoration};
  }

  input[data-task="#{$character}"]:checked,
  li[data-task="#{$character}"] > input[type=checkbox]:checked,
  li[data-task="#{$character}"] > p > input[type=checkbox]:checked {
    background: #{$background};

    &:after {
      transform: none;
      -webkit-mask-image: none;
      background: unset;
      content: ' ';
    }
  }
}

@mixin custom-task-text(
  $character,
  $rgb-color,
  $emoji,
  $font-weight,
  $text-decoration,
  $li-fg: var(--text-normal),
  $font-family: var(--font-monospace)
) {
  div[data-task="#{$character}"],
  li.task-list-item[data-task="#{$character}"],
  li.task-list-item[data-task="#{$character}"] > p {
    color: $li-fg;
    font-weight: $font-weight;
    text-decoration: $text-decoration;
  }
  div[data-task="#{$character}"] > label.task-list-label,
  li.task-list-item[data-task="#{$character}"],
  li.task-list-item[data-task="#{$character}"] > p,
  .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="#{$character}"] {
    --checkbox-color: #{$rgb-color};
    --checkbox-border-color: #{$rgb-color};
    --checkbox-marker-color: transparent;
    --checklist-done-decoration: #{$text-decoration};
  }

  input[type=checkbox][data-task="#{$character}"]:checked,
  li[data-task="#{$character}"] > input[type=checkbox]:checked,
  li[data-task="#{$character}"] > p > input[type=checkbox]:checked {
    background-color: unset;
    background: unset;

    &::after {
      transform: none;
      -webkit-mask-image: none;
      background: unset;
      position: absolute;
      text-align: center;
      font-weight: $font-weight;
      font-size: calc(var(--checkbox-size) - 2px);
      font-family: #{$font-family};
      line-height: var(--checkbox-size);
      left: 50%;
      margin-left: calc(-1 * (var(--checkbox-size) / 2));
      color: var(--checkbox-color);
      content: '#{$emoji}';
      display: block;
    }
  }
}
