$maximum: 16;

.plugin-cm-show-whitespace-settings {
  .plugin-cm-show-whitespace-disabled {
    opacity: 0.6;

    .checkbox-container {
      cursor: not-allowed;
      // this is *not* an adequate way to disable an input but it's all we can do right now
      pointer-events: none;
    }
  }
}

body.plugin-cm-show-whitespace {

  /* feel free to override these characters if you want */
  --spaceChar: '·';
  --trailingSpaceChar: '·';
  --singleSpaceChar: var(--spaceChar);
  --tabChar: '→';
  --newlineChar: '¬';
  --strictLineBreakChar: var(--newlineChar);

  &.plugin-cm-show-whitespace-hide-space {
    --spaceChar: '';
  }
  &.plugin-cm-show-whitespace-hide-tab {
    --tabChar: '';
  }
  &.plugin-cm-show-whitespace-hide-newline {
    --newlineChar: '';
  }
  &.plugin-cm-show-whitespace-hide-single-space {
    --singleSpaceChar: '';
  }
  &.plugin-cm-show-whitespace-hide-trailing-space {
    --trailingSpaceChar: '';
  }
  &.plugin-cm-show-whitespace-show-strict-line-break {
    --strictLineBreakChar: '↲';
  }

  // general styling
  .cm-whitespace::before,
  .cm-tab::before,
  .CodeMirror-code>div>pre>span>:last-child:after,
  .CodeMirror-line>span>:last-child::after,
  [class*=cm-trailing-space]+[class*=cm-trailing-space]:last-child::after {
    pointer-events: none;
    color: var(--text-faint);
    font-weight: normal;
    opacity: 0.5;
  }
  
  // char replacements
  [class*=cm-trailing-space]::before {
    content: var(--trailingSpaceChar);
  }
  
  .cm-tab::before {
    content: var(--tabChar);
  }

  .CodeMirror-code>div>pre>span>:last-child:after,
  .CodeMirror-line>span>:last-child::after {
    content: var(--newlineChar);
    position: unset;
  }

  [class*=cm-trailing-space]+[class*=cm-trailing-space]:last-child::after {
    content: var(--strictLineBreakChar);
    position: unset;
  }

  // general fixes
  .cm-whitespace::before,
  .cm-tab::before {
    position: absolute;
  }
  .cm-s-obsidian span.cm-inline-code.cm-whitespace::before {
    line-height: 2em; // <- Why? I don't know. Don't like it, but it works.
  }

  .CodeMirror-code > div:last-child > pre > span::after,
  .CodeMirror-code > pre:last-child > span::after {
    display: none;
  }


  .CodeMirror .cm-whitespace-1:not([class*="cm-trailing-space-"])::before {
    // specify this before the loop to allow styling single spaces differently
    content: var(--singleSpaceChar);
  }
  $spaceChar: var(--spaceChar);
  $spaceChars: $spaceChar + ' ' + $spaceChar;
  @for $i from 2 through $maximum {
    .CodeMirror .cm-whitespace-#{$i}:not([class*="cm-trailing-space-"])::before {
      content: #{$spaceChars};
      $spaceChars: $spaceChars + ' ' + $spaceChar;
    }
  }

  .CodeMirror .cm-whitespace-1:last-of-type::before {
    // for some reason a single trailing space doesn't get the `cm-trailing-space` class
    content: var(--trailingSpaceChar);
  }
}