@use "sass:list";
@use "sass:map";
@use "sass:meta";
@use "../variables/borders";
@use "../variables/forms";
@use "../variables/colour";
@use "../variables/features";
@use "../tools/media";

$base-colours: (
  "background",
  // "background-tint",
  "font-base",
  "font-dark",
  "font-light",
  "icon-light",
  "link",
  "link-visited",
  // "focus-outline",
  "keyline",
  "keyline-dark",
  // "input-foreground",
  // "input-background",
  // "input-border",
  // "form-error-border",
  // "form-error-text",
  // "button-text",
  // "button-background",
  // "button-hover-text",
   // "button-hover-background",
);

@function brand-colour($colour, $opacity: 1) {
  @return colour.brand-colour($colour, $opacity);
}

@mixin colour-css-vars($excludes...) {
  @each $name, $value in colour.$colour-palette-default {
    @if not list.index($excludes, $name) {
      --#{$name}: #{$value};
      @if list.index($base-colours, $name) {
        --base-#{$name}: #{$value};
      }
    }
  }
}

@mixin colour-css-vars-dark($excludes...) {
  @each $name, $value in colour.$colour-palette-dark {
    @if not list.index($excludes, $name) {
      --#{$name}: #{$value};
      @if list.index($base-colours, $name) {
        --base-#{$name}: #{$value};
      }
    }
  }
}

@mixin colour-css-vars-high-contrast($excludes...) {
  @each $name, $value in colour.$colour-palette-high-contrast {
    @if not list.index($excludes, $name) {
      --#{$name}: #{$value};
      @if list.index($base-colours, $name) {
        --base-#{$name}: #{$value};
      }
    }
  }
}

@mixin colour-css-vars-high-contrast-dark($excludes...) {
  @each $name, $value in colour.$colour-palette-high-contrast-dark {
    @if not list.index($excludes, $name) {
      --#{$name}: #{$value};
      @if list.index(("keyline", "keyline-dark"), $name) {
        --base-#{$name}: #{$value};
      }
    }
  }
}

@function colour-var($colour) {
  @return var(
    --#{$colour},
    #{map.get(colour.$colour-palette-default, $colour)}
  );
}

@mixin colour-font($colour, $important: false) {
  color: colour-var($colour) if(sass($important): !important; else: null);
}

@mixin colour-background($colour, $important: false) {
  background-color: colour-var($colour)
    if(sass($important): !important; else: null);
}

@mixin colour-background-brand($brandColour, $important: false) {
  background-color: #{brand-colour($brandColour)}
    if(sass($important): !important; else: null);
}

@mixin colour-border(
  $colour,
  $width: "",
  $style: solid,
  $direction: "",
  $important: false
) {
  @if $direction != "" {
    @if $width != "" {
      border-#{$direction}: $width
        colour-var($colour)
        $style
        if(sass($important): !important; else: null);
    } @else {
      border-#{$direction}-color: colour-var($colour)
        if(sass($important): !important; else: null);
    }
  } @else {
    @if $width != "" {
      border: $width
        colour-var($colour)
        $style
        if(sass($important): !important; else: null);
    } @else {
      border-color: var(
          --#{$colour},
          #{map.get(colour.$colour-palette-default, $colour)}
        )
        if(sass($important): !important; else: null);
    }
  }
}

@mixin colour-outline($colour, $width: "", $style: solid, $important: false) {
  @if $width != "" {
    outline: $width
      colour-var($colour)
      $style
      if(sass($important): !important; else: null);
  } @else {
    outline-color: colour-var($colour)
      if(sass($important): !important; else: null);
  }
}

@mixin colour-fill($colour, $important: false) {
  fill: colour-var($colour) if(sass($important): !important; else: null);
}

%colour-input {
  @include colour-font("input-foreground");
  @include colour-background("input-background");
  @include colour-border("input-border", forms.$form-field-border-width);
}

@mixin colour-input() {
  @extend %colour-input;
}

@mixin thick-keyline($direction: "", $veryThick: false) {
  $border-width: borders.$thick-border-width;
  @if $veryThick {
    $border-width: borders.$very-thick-border-width;
  }
  @if $direction != "" {
    @include colour-border("keyline", $border-width, solid, $direction);
  } @else {
    @include colour-border("keyline", $border-width, solid);
  }
}

@mixin thick-keyline-dark($direction: "", $veryThick: false) {
  $border-width: borders.$thick-border-width;
  @if $veryThick {
    $border-width: borders.$very-thick-border-width;
  }
  @if $direction != "" {
    @include colour-border("keyline-dark", $border-width, solid, $direction);
  } @else {
    @include colour-border("keyline-dark", $border-width, solid);
  }
}

@mixin thick-keyline-accent($direction: "", $veryThick: false) {
  $border-width: borders.$thick-border-width;
  @if $veryThick {
    $border-width: borders.$very-thick-border-width;
  }
  @if $direction != "" {
    @include colour-border("accent-border", $border-width, solid, $direction);
  } @else {
    @include colour-border("accent-border", $border-width, solid);
  }
}

@mixin thick-keyline-error($direction: "", $veryThick: false) {
  $border-width: borders.$thick-border-width;
  @if $veryThick {
    $border-width: borders.$very-thick-border-width;
  }
  @if $direction != "" {
    @include colour-border(
      "form-error-border",
      $border-width,
      solid,
      $direction
    );
  } @else {
    @include colour-border("form-error-border", $border-width, solid);
  }
}

@mixin thick-keyline-brand($direction: "", $brandColour, $veryThick: false) {
  $border-width: borders.$thick-border-width;
  @if $veryThick {
    $border-width: borders.$very-thick-border-width;
  }
  @if $direction != "" {
    border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;
  } @else {
    border: $border-width #{brand-colour($brandColour)} solid;
  }
}

@mixin thick-keyline-transparent($direction: "", $veryThick: false) {
  $border-width: borders.$thick-border-width;
  @if $veryThick {
    $border-width: borders.$very-thick-border-width;
  }
  @if $direction != "" {
    border-#{$direction}: $border-width transparent solid;
  } @else {
    border: $border-width transparent solid;
  }
}

// Use light theme colours (except for "form-error-border")
%always-light {
  // @include colour-css-vars("form-error-border", "focus-outline");
  @include colour-css-vars;

  @media (prefers-contrast: more) {
    // @include colour-css-vars-high-contrast(
    //   "form-error-border",
    //   "focus-outline"
    // );
    @include colour-css-vars-high-contrast;
  }
}

@mixin always-light {
  @extend %always-light;
}

%contrast {
  --background: var(--contrast-background);
  --font-base: var(--contrast-font-base);
  --font-dark: var(--contrast-font-dark);
  --font-light: var(--contrast-font-light);
  --icon-light: var(--contrast-icon-light);
  --link: var(--contrast-link);
  --link-visited: var(--contrast-link-visited);
  --keyline: var(--contrast-keyline);
  --keyline-dark: var(--contrast-keyline-dark);
  --button-text: var(--contrast-button-text);
  --button-background: var(--contrast-button-background);
  --button-hover-text: var(--contrast-button-hover-text);
  --button-hover-background: var(--contrast-button-hover-background);
  --accent-border: var(--accent-border-bright);

  @include colour-background("background");

  @include colour-font("font-base");
}

@mixin contrast {
  @extend %contrast;
}

%contrast-on-mobile {
  @include media.on-mobile {
    --background: var(--contrast-background);
    --font-base: var(--contrast-font-base);
    --font-dark: var(--contrast-font-dark);
    --font-light: var(--contrast-font-light);
    --icon-light: var(--contrast-icon-light);
    --link: var(--contrast-link);
    --link-visited: var(--contrast-link-visited);
    --keyline: var(--contrast-keyline);
    --keyline-dark: var(--contrast-keyline-dark);
    --button-text: var(--contrast-button-text);
    --button-background: var(--contrast-button-background);
    --button-hover-text: var(--contrast-button-hover-text);
    --button-hover-background: var(--contrast-button-hover-background);
    --accent-border: var(--accent-border-bright);

    @include colour-background("background");

    @include colour-font("font-base");
  }
}

@mixin contrast-on-mobile {
  @extend %contrast-on-mobile;
}

%base {
  @each $name, $value in $base-colours {
    --#{$name}: var(--base-#{$value});
  }

  @include colour-background("background");

  @include colour-font("font-base");
}

@mixin base {
  @extend %base;
}

%tint {
  --background: var(--background-tint);

  @include colour-background("background");
}

@mixin tint {
  @extend %tint;
}

%accent {
  --background: var(--accent-background);
  --font-base: var(--accent-font-base);
  --font-dark: var(--accent-font-dark);
  --font-light: var(--accent-font-light);
  --icon-light: var(--accent-icon-light);
  --link: var(--accent-link);
  --link-visited: var(--accent-link);
  --keyline: var(--accent-keyline);
  --keyline-dark: var(--accent-keyline-dark);
  --accent-border: var(--accent-font-dark);
  --button-text: var(--accent-button-text);
  --button-background: var(--accent-button-background);
  --button-hover-text: var(--accent-button-hover-text);
  --button-hover-background: var(--accent-button-hover-background);

  @include colour-background("background");

  @include colour-font("font-base");
}

@mixin accent {
  @extend %accent;
}

%accent-light {
  --background: var(--accent-background-light);
  --font-base: #{map.get(colour.$colour-palette-default, "font-base")};
  --font-dark: #{map.get(colour.$colour-palette-default, "font-dark")};
  --font-light: #{map.get(colour.$colour-palette-default, "font-light")};
  --icon-light: #{map.get(colour.$colour-palette-default, "icon-light")};
  --keyline: #{map.get(colour.$colour-palette-default, "keyline")};
  --keyline-dark: #{map.get(colour.$colour-palette-default, "keyline-dark")};
  --button-text: #{map.get(colour.$colour-palette-default, "button-text")};
  --button-background: #{map.get(
      colour.$colour-palette-default,
      "button-background"
    )};
  --button-hover-text: #{map.get(
      colour.$colour-palette-default,
      "button-hover-text"
    )};
  --button-hover-background: #{map.get(
      colour.$colour-palette-default,
      "button-hover-background"
    )};
  --accent-border: var(--accent-background);

  @include colour-background("background");
  @include colour-font("font-base");

  .tna-template--system-theme & {
    @media (prefers-color-scheme: dark) {
      // --link: #{map.get(colour.$colour-palette-default, "link")};
      // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};

      --background: var(--accent-background);
      --font-base: var(--accent-font-base);
      --font-dark: var(--accent-font-dark);
      --font-light: var(--accent-font-light);
      --icon-light: var(--accent-icon-light);
      --link: var(--accent-link);
      --link-visited: var(--accent-link);
      --keyline: var(--accent-keyline);
      --keyline-dark: var(--accent-keyline-dark);
      --accent-border: var(--accent-font-dark);
      --button-text: var(--accent-button-text);
      --button-background: var(--accent-button-background);
      --button-hover-text: var(--accent-button-hover-text);
      --button-hover-background: var(--accent-button-hover-background);
    }
  }

  .tna-template--dark-theme & {
    // --link: #{map.get(colour.$colour-palette-default, "link")};
    // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};

    --background: var(--accent-background);
    --font-base: var(--accent-font-base);
    --font-dark: var(--accent-font-dark);
    --font-light: var(--accent-font-light);
    --icon-light: var(--accent-icon-light);
    --link: var(--accent-link);
    --link-visited: var(--accent-link);
    --keyline: var(--accent-keyline);
    --keyline-dark: var(--accent-keyline-dark);
    --accent-border: var(--accent-font-dark);
    --button-text: var(--accent-button-text);
    --button-background: var(--accent-button-background);
    --button-hover-text: var(--accent-button-hover-text);
    --button-hover-background: var(--accent-button-hover-background);
  }
}

@mixin accent-light {
  @extend %accent-light;
}

%yellow-accent {
  --accent-background: #{colour.brand-colour("yellow")} !important;
  --accent-background-light: #{colour.brand-colour("cream")} !important;
  --accent-border: #{colour.brand-colour("yellow")} !important;
  --accent-border-bright: #{colour.brand-colour("yellow")} !important;
  --accent-font-base: #{colour.brand-colour("black")} !important;
  --accent-font-dark: #{colour.brand-colour("black")} !important;
  --accent-font-light: #{colour.brand-colour("black", 0.7)} !important;
  --accent-icon-light: #{colour.brand-colour("black", 0.7)} !important;
  --accent-link: #{colour.brand-colour("black")} !important;
  --accent-link-visited: #{colour.brand-colour("black")} !important;
  --accent-keyline: #{colour.brand-colour("black", 0.5)} !important;
  --accent-keyline-dark: #{colour.brand-colour("black", 0.8)} !important;
  --button-accented-text: #{colour.brand-colour("black")} !important;
  --button-accented-background: #{colour.brand-colour("yellow")} !important;
}

@mixin yellow-accent {
  @extend %yellow-accent;
}

%accent-lighter-text {
  --accent-font-base: #{colour.brand-colour("white")} !important;
  --accent-font-dark: #{colour.brand-colour("white")} !important;
  --accent-font-light: #{colour.brand-colour("white", 0.7)} !important;
  --accent-icon-light: #{colour.brand-colour("white", 0.7)} !important;
  --accent-link: #{colour.brand-colour("white")} !important;
  --accent-link-visited: #{colour.brand-colour("white")} !important;
  --accent-keyline: #{colour.brand-colour("white", 0.5)} !important;
  --accent-keyline-dark: #{colour.brand-colour("white", 0.8)} !important;
  --button-accented-text: #{colour.brand-colour("white")} !important;
}

%black-accent {
  --accent-background: #{colour.brand-colour("black")} !important;
  --accent-background-light: #{colour.brand-colour("light-grey")} !important;
  --accent-border: #{colour.brand-colour("black")} !important;
  --accent-border-bright: #{colour.brand-colour("grey")} !important;
  --button-accented-text: #{colour.brand-colour("black")} !important;
  --button-accented-background: #{colour.brand-colour("grey")} !important;
}

@mixin black-accent {
  @extend %accent-lighter-text;
  @extend %black-accent;
}

%pink-accent {
  --accent-background: #{colour.brand-colour("maroon")} !important;
  --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
  --accent-border: #{colour.brand-colour("maroon")} !important;
  --accent-border-bright: #{colour.brand-colour("pink")} !important;
  --button-accented-background: #{colour.brand-colour("maroon")} !important;
}

@mixin pink-accent {
  @extend %accent-lighter-text;
  @extend %pink-accent;
}

%orange-accent {
  --accent-background: #{colour.brand-colour("chestnut")} !important;
  --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
  --accent-border: #{colour.brand-colour("chestnut")} !important;
  --accent-border-bright: #{colour.brand-colour("orange")} !important;
  --button-accented-background: #{colour.brand-colour("chestnut")} !important;
}

@mixin orange-accent {
  @extend %accent-lighter-text;
  @extend %orange-accent;
}

%green-accent {
  --accent-background: #{colour.brand-colour("forest")} !important;
  --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
  --accent-border: #{colour.brand-colour("forest")} !important;
  --accent-border-bright: #{colour.brand-colour("green")} !important;
  --button-accented-background: #{colour.brand-colour("forest")} !important;
}

@mixin green-accent {
  @extend %accent-lighter-text;
  @extend %green-accent;
}

%blue-accent {
  --accent-background: #{colour.brand-colour("navy")} !important;
  --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
  --accent-border: #{colour.brand-colour("navy")} !important;
  --accent-border-bright: #{colour.brand-colour("blue")} !important;
  --button-accented-background: #{colour.brand-colour("navy")} !important;
}

@mixin blue-accent {
  @extend %accent-lighter-text;
  @extend %blue-accent;
}

@mixin on-high-contrast {
  @media (prefers-contrast: more) {
    @content;
  }
}

@mixin on-forced-colours {
  @media (forced-colors: active) {
    @content;
  }
}

@mixin on-high-contrast-and-forced-colours {
  @include on-forced-colours {
    @content;
  }

  @include on-high-contrast {
    @content;
  }
}

%image-loader-background {
  background: linear-gradient(
    -45deg,
    rgb(0 0 0 / 25%),
    rgb(255 255 255 / 25%),
    rgb(0 0 0 / 25%)
  );
  background-size: 500% 500%;
  background-position: 0 50%;

  animation: image-loader-background ease-in-out 1.2s infinite;

  @media (prefers-reduced-motion) {
    animation: none !important;
  }
}

@mixin image-loader-background {
  @if features.$image-loader-animations {
    @extend %image-loader-background;
  }
}