// The code snippets in this file are derived from the Halcyon theme
// - https://github.com/dbarenholz/halcyon-obsidian?tab=readme-ov-file
body {
  --checkbox-color: var(--flexcyon-purple-lilac);
  --checkbox-color-hover: var(--flexcyon-palette-lilac-hover);
  --checkbox-border-color: var(--flexcyon-blue);
  --checkbox-border-color-hover: var(--flexcyon-palette-lilac-hover);
  --flexcyon-ascii-checkboxes-font-size: 1.2rem;

  .checkbox-container {
    background-color: var(--flexcyon-red-salmon);
  }

  .checkbox-container.is-enabled {
    background-color: var(--flexcyon-lime-green);
  }
}

@mixin flexcyon-ascii-checkbox($data-task, $color) {
  input[data-task="#{$data-task}"]:checked,
  li[data-task="#{$data-task}"] > input:checked,
  li[data-task="#{$data-task}"] > p > input:checked {
    background-color: inherit;
    border: none;
    padding-right: 6px;

    &:hover {
      filter: brightness(1.25);
    }
    &::after {
      background-color: inherit;
      content: $data-task;
      color: $color;
      font-size: var(--flexcyon-ascii-checkboxes-font-size);
      font-weight: 900;
      text-align: center;
      -webkit-mask-image: none;
      mask-image: none;
      top: -0.325em;
    }
  }
}

body.flexcyon-flex-max-mode,
body.flexcyon-ascii-checkboxes-enabled {
  @include flexcyon-ascii-checkbox("!", var(--color-purple));
  @include flexcyon-ascii-checkbox(">", var(--color-cyan));

  @include flexcyon-ascii-checkbox("?", var(--color-pink));
  @include flexcyon-ascii-checkbox("#", var(--color-green));
  @include flexcyon-ascii-checkbox(".", var(--color-yellow));
  @include flexcyon-ascii-checkbox("<", var(--color-orange));
  @include flexcyon-ascii-checkbox("$", var(--color-red));

  @include flexcyon-ascii-checkbox("*", var(--color-purple));
  @include flexcyon-ascii-checkbox("'", var(--color-cyan));
  @include flexcyon-ascii-checkbox("@", var(--color-blue));
  @include flexcyon-ascii-checkbox("%", var(--color-pink));
  @include flexcyon-ascii-checkbox("+", var(--color-green));
  @include flexcyon-ascii-checkbox("-", var(--color-yellow));
  @include flexcyon-ascii-checkbox("/", var(--color-orange));
  @include flexcyon-ascii-checkbox("~", var(--color-red));

  input[data-task="?"]:checked::after,
  li[data-task="?"] > input:checked::after,
  li[data-task="?"] > p > input:checked::after,
  input[data-task="!"]:checked::after,
  li[data-task="!"] > input:checked::after,
  li[data-task="!"] > p > input:checked::after {
    top: -0.15em;
  }

  input[data-task="'"]:checked::after,
  li[data-task="'"] > input:checked::after,
  li[data-task="'"] > p > input:checked::after {
    content: "‘";
    font-size: calc(var(--flexcyon-ascii-checkboxes-font-size) + 0.3rem);
    top: -0.175rem;
  }

  input[data-task="#"]:checked::after,
  li[data-task="#"] > input:checked::after,
  li[data-task="#"] > p > input:checked::after,
  input[data-task="$"]:checked::after,
  li[data-task="$"] > input:checked::after,
  li[data-task="$"] > p > input:checked::after,
  input[data-task="/"]:checked::after,
  li[data-task="/"] > input:checked::after,
  li[data-task="/"] > p > input:checked::after,
  input[data-task="<"]:checked::after,
  li[data-task="<"] > input:checked::after,
  li[data-task="<"] > p > input:checked::after,
  input[data-task=">"]:checked::after,
  li[data-task=">"] > input:checked::after,
  li[data-task=">"] > p > input:checked::after {
    transform: scaleY(1.1);
    top: -0.175rem;
  }

  input[data-task="."]:checked::after,
  li[data-task="."] > input:checked::after,
  li[data-task="."] > p > input:checked::after {
    content: "...";
    font-size: calc(var(--flexcyon-ascii-checkboxes-font-size) - 0.2rem);
    letter-spacing: -0.5px;
    top: -0.1rem;
  }

  input[data-task="*"]:checked::after,
  li[data-task="*"] > input:checked::after,
  li[data-task="*"] > p > input:checked::after {
    font-size: calc(var(--flexcyon-ascii-checkboxes-font-size) + 0.75rem);
    top: -0.25rem;
  }

  input[data-task="@"]:checked::after,
  li[data-task="@"] > input:checked::after,
  li[data-task="@"] > p > input:checked::after {
    font-size: calc(var(--flexcyon-ascii-checkboxes-font-size) - 0.1rem);
    top: -0.125rem;
  }

  input[data-task="%"]:checked::after,
  li[data-task="%"] > input:checked::after,
  li[data-task="%"] > p > input:checked::after {
    font-size: calc(var(--flexcyon-ascii-checkboxes-font-size) - 0.2rem);
    top: -0.05rem;
  }

  input[data-task="+"]:checked::after,
  li[data-task="+"] > input:checked::after,
  li[data-task="+"] > p > input:checked::after {
    font-size: calc(var(--flexcyon-ascii-checkboxes-font-size) - 0.05rem);
    top: -0.1rem;
  }

  input[data-task="-"]:checked::after,
  li[data-task="-"] > input:checked::after,
  li[data-task="-"] > p > input:checked::after {
    font-size: calc(var(--flexcyon-ascii-checkboxes-font-size) + 0.2rem);
    top: -0.3rem;
    content: "--";
    margin-left: -7.5%;
    letter-spacing: var(--less-letter-spacing);
  }

  input[data-task='"']:checked,
  li[data-task='"'] > input:checked,
  li[data-task='"'] > p > input:checked {
    background-color: inherit;
    border: none;
    padding-right: 6px;
    &::after {
      content: "“";
      font-weight: 900;
      color: var(--color-green);
      background-color: inherit;
      font-size: calc(var(--flexcyon-ascii-checkboxes-font-size) + 0.3rem);
      text-align: center;
      -webkit-mask-image: none;
      mask-image: none;
    }
  }

  input[data-task="i"]:checked,
  li[data-task="i"] > input:checked,
  li[data-task="i"] > p > input:checked {
    background-color: inherit;
    border: none;
    padding-right: 6px;
    &::after {
      font-weight: 900;
      content: "i";
      color: var(--color-cyan);
      background-color: inherit;
      text-align: center;
      -webkit-mask-image: none;
      mask-image: none;
      border: 1.5px solid var(--color-blue);
      font-size: calc(var(--flexcyon-ascii-checkboxes-font-size) - 0.425rem);
      border-radius: 50%;
      line-height: 1.1;
      padding-top: 10%;
      margin-left: -1.5px;
      top: -0.075rem;
      scale: var(--upsize);
    }
  }
}

@mixin flexcyon-clip-path-checkbox($data-task, $color, $clip-path) {
  input[data-task="#{$data-task}"]:checked,
  li[data-task="#{$data-task}"] > input:checked,
  li[data-task="#{$data-task}"] > p > input:checked {
    background-color: $color;
    border: none;
    font-weight: 900;
    padding-right: 6px;
    clip-path: $clip-path;
    &::after {
      display: none;
    }
  }
}

body.flexcyon-flex-max-mode,
body.flexcyon-clip-path-checkboxes-enabled {
  @include flexcyon-clip-path-checkbox(
    "s",
    var(--color-purple),
    polygon(
      50% 0%,
      61% 35%,
      98% 35%,
      68% 57%,
      79% 91%,
      50% 70%,
      21% 91%,
      32% 57%,
      2% 35%,
      39% 35%
    )
  );
  @include flexcyon-clip-path-checkbox("c", var(--color-cyan), circle());
  @include flexcyon-clip-path-checkbox(
    "h",
    var(--color-blue),
    polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
  );
  @include flexcyon-clip-path-checkbox(
    "m",
    var(--color-pink),
    polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)
  );
  @include flexcyon-clip-path-checkbox(
    "t",
    var(--color-green),
    polygon(50% 0%, 100% 100%, 0% 100%)
  );
  @include flexcyon-clip-path-checkbox("r", var(--color-yellow), rect());
  @include flexcyon-clip-path-checkbox(
    "d",
    var(--color-orange),
    polygon(25% 0%, 75% 0%, 100% 25%, 50% 90%, 0% 25%)
  );
  @include flexcyon-clip-path-checkbox(
    "l",
    var(--color-red),
    polygon(
      30% 0%,
      50% 15%,
      70% 0%,
      90% 10%,
      100% 35%,
      80% 70%,
      50% 100%,
      20% 70%,
      0% 35%,
      10% 10%
    )
  );
}

@mixin nth-bullet-point($color-map: ()) {
  $max-index: 0;
  @each $index, $color in $color-map {
    $max-index: max($max-index, $index);
  }
  $interval: $max-index + 1;

  @each $index, $color in $color-map {
    .HyperMD-list-line:nth-of-type(#{$interval}n + #{$index})
      .list-bullet::after,
    ul :nth-of-type(#{$interval}n + #{$index}) .list-bullet::after {
      --list-marker-color: var(--color-#{$color});
    }
  }
}

body.flexcyon-rainbow-bullet-points {
  @include nth-bullet-point(
    (
      0: purple,
      1: cyan,
      2: blue,
      3: pink,
      4: green,
      5: yellow,
      6: orange,
      7: red,
    )
  );
}
