@use "true" as *;
@use "../src/utils/accent_color" as *;
@use "../src/utils/mode";

@include test-module("Accent Color Option [mix]") {
  @include mode.ESR;

  @include test("simple") {
    @include assert {
      @include output {
        @include AccentColor {
          body {
            border-color: $accentBorder;
            background-color: $accentColor;
            color: $accentTextColor;
          }
        }
      }
      @include expect {
        body {
          border-color: ActiveBorder;
          background-color: AccentColor;
          color: AccentColorText;
        }
        @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
          body {
            border-color: -moz-accent-color;
            background-color: -moz-accent-color;
            color: -moz-accent-color-foreground;
          }
        }
      }
    }
  }
  @include test("css var") {
    @include assert {
      @include output {
        :root {
          @include AccentColor {
            // Don't use like this!!
            --uc-accent-border: $accentBorder;
            --uc-accent-color: $accentColor;
            --uc-accent-text-color: $accentTextColor;

            // Use like this
            --uc-accent-border: #{$accentBorder};
            --uc-accent-color: #{$accentColor};
            --uc-accent-text-color: #{$accentTextColor};
          }
        }
      }
      @include expect {
        :root {
          --uc-accent-border: $accentBorder;
          --uc-accent-color: $accentColor;
          --uc-accent-text-color: $accentTextColor;
          --uc-accent-border: ActiveBorder;
          --uc-accent-color: AccentColor;
          --uc-accent-text-color: AccentColorText;
        }
        @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
          :root {
            --uc-accent-border: $accentBorder;
            --uc-accent-color: $accentColor;
            --uc-accent-text-color: $accentTextColor;
            --uc-accent-border: -moz-accent-color;
            --uc-accent-color: -moz-accent-color;
            --uc-accent-text-color: -moz-accent-color-foreground;
          }
        }
      }
    }
  }
  @include test("Highlight") {
    @include assert {
      @include output {
        @include AccentColor("Highlight") {
          body {
            border-color: $accentBorder;
            background-color: $accentColor;
            color: $accentTextColor;
          }
        }
      }
      @include expect {
        body {
          border-color: ActiveBorder;
          background-color: AccentColor;
          color: AccentColorText;
        }
        @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
          body {
            border-color: -moz-accent-color;
            background-color: Highlight;
            color: HighlightText;
          }
        }
      }
    }
  }
}
