@use "sass:list";
@use "sass:selector";
$font-main: "Lato", sans-serif;

@mixin theme($isDark) {
  $root-selectors: ();
  /* Satisfy both vitepress (docs) and funkwhale (front) convention */
  /* Also note the strong (triple) force which satisfies the CSS gods very much (enough) */
  $root-element: ":is(body.theme-dark, html.dark>body:not(.theme-light)), .force-dark-theme.force-dark-theme.force-dark-theme";

  @if $isDark == false {
    $root-element: ":is(body.theme-light, html:not(.dark)>body:not(.theme-dark)), .force-light-theme.force-light-theme.force-light-theme";
  }

  // If we call `@include dark-theme {}` at the root of the file
  @if & == null {
    $root-selectors: list.append($root-selectors, $root-element);
  } @else {
    // For every selector in selector list
    @each $selector in & {
      // If it is `html`, we add a root rule
      @if #{$selector} == ":root" or #{$selector} == "html" {
        $root-selectors: list.append($root-selectors, $root-element, comma);
        // If it's any other rule, we append it to the root rule
      } @else {
        $root-selectors: list.append($root-selectors, "#{selector.nest($root-element, $selector)}", comma);
      }
    }

    // @debug $root-selectors;
    @at-root #{$root-selectors} {
      @content
    }
  }
}

@mixin light-theme {
  @include theme(false) {
    @content
  }
}

@mixin dark-theme {
  @include theme(true) {
    @content
  }
}