@import "color-functions";

//check if $color-brands map contains the specified default brand color, if it does, then move that color to the top of the map, to make sure, the default brand colors comes first in the compiled css file, to avois specificity issue with :root selector
@if map-has-key($color-brands, $color-default-brand) {
  $default-theme: ($color-default-brand: map-get($color-brands, $color-default-brand));
  $secondary-themes: map-remove($color-brands, $color-default-brand);
  $color-brands: map-merge($default-theme, $secondary-themes);
}
@else {
  @error "\"" + $color-default-brand + "\" is not a defined brand color. If your remove colors or overwrite the map $color-brands in a settings file for a project, make sure to also define $color-default-brand in that file to a brand-color defined in $color-brands of the given file";
}

//get utility color from the $color-utillities map in atom-settings
@function color-utillity($name) {
  $color: map-get($color-utillities, $name);
  @return $color;
}

//get neutral color from the $color-neutrals map in atom-settings
@function color-neutral($name) {
  $color: map-get($color-neutrals, $name);
  @return $color;
}

//get a color that has a minumim contrast ratio to the color specified as input. The minimum contrast ratio must also be specified as input. The new color is found be mixin either black or white into the color specified as input, which make the resulting color either darker or lighter.
@function get-contrast-color($color, $min-ratio, $direction: null, $mix-color: null, $contrasting-color: null) {
  $adjusted-color: null;
  $percentage: 0;
  $ratio: 0;

  @if $direction == "darker" {
    $mix-color: #000000;
  }
  @else if $direction == "lighter" {
    $mix-color: #ffffff;
  }

  @if $contrasting-color == null {
    $contrasting-color: $color;
  }

  $increment: 10;
  @while $ratio <= $min-ratio and $percentage < 100 {
    $adjusted-color: mix($mix-color, $color, $percentage * 1%);
    $ratio: contrast-ratio($contrasting-color, $adjusted-color);
    @if $ratio <= $min-ratio or $increment < .1 {
      $percentage: $percentage + $increment;
    }
    @else {
      $percentage: $percentage - $increment;
      $ratio: 0;
      $increment: math.div($increment, 10);
    }
  }

  @return $adjusted-color;
}

//check if color is legiable on background. If not mix in black or white until it is. If color is already legiable, return the color as is.
@function get-legiable-color($color, $background, $min-ratio: null) {
  $direction: null;
  $contrast-ratio: contrast-ratio($color, $background);

  @if $min-ratio == null {
    $min-ratio: $color-foreground-min-ratio;
  }

  @if $contrast-ratio >= $min-ratio {
    @return $color;
  }
  @else if lightness($color) > lightness($background) {
    $direction: "lighter";
  }
  @else {
    $direction: "darker";
  }

  $adjusted-color: get-contrast-color($color, $min-ratio, $direction, $contrasting-color: $background);

  @return $adjusted-color;
}

//find a color that has a contrast ratio inbetween the foreground and background color specified as input.
@function get-color-inbetween($foreground, $background, $ratio-threshold: null, $name: null) {
  $contrast-ratio: contrast-ratio($background, $foreground);
  $min-ratio: (math.div($contrast-ratio - 1, 2)) + 1;

  @if $ratio-threshold != null {
    @if $ratio-threshold < $min-ratio {
      $min-ratio: $ratio-threshold;
    }
  }

  $adjusted-color: get-contrast-color($background, $min-ratio, $mix-color: $foreground);

  @return $adjusted-color;
}

//check if the contrast ratio between two colors is above the minimum contrast ratio specified in $color-foreground-min-ratio
@function check-contrast($color1, $color2) {
  @if contrast-ratio($color1, $color2) > $color-foreground-min-ratio {
    @return true;
  }
  @else {
    @return false;
  }
}

//get the hex code of a color in a theme in the $color-themes map
@function get-hexcode($theme, $name) {
  $map: null;
  @if map_has_key($color-themes, $theme) {
    $map: map_get($color-themes, $theme);
  }
  @else {
    @error "get.-hexcode(): \"#{$theme}\" is a not defined color-theme";
  }

  $color: null;
  @if map_has_key($map, $name) {
    $color: map_get($map, $name);
  }
  @else {
    @error "get.-hexcode(): \"#{$name}\" is not a defined color in theme: \"#{$theme}\"";
  }

  @return $color;
}

//add a color to a theme in the $color-themes map
@function add-color-to-theme($theme, $name, $hex) {
  $map: map_get($color-themes, $theme);
  $map: map_merge($map, ($name: $hex));
  @return map_merge($color-themes, ($theme: $map));
}

//check if either a light or dark forground color is best suited for the background color specified as input. If nor the light or the  dark color is suitable, the color with the highest contrast ratio returned and a warning is thrown.
@function calc-foreground-color($background-color, $theme, $prefer: "dark") {

  $foreground-color: null;

  $dark: color-neutral("foreground");
  $light: color-neutral("background");

  $contrast-to-dark: contrast-ratio($dark, $background-color);
  $contrast-to-light: contrast-ratio($light, $background-color);

  @if $contrast-to-dark < $color-foreground-min-ratio and $contrast-to-light < $color-foreground-min-ratio {
    $warn-msg: null;
    @if $contrast-to-dark > $contrast-to-light {
      $foreground-color: $dark;
      $warn-msg: $contrast-to-dark ;
    }
    @else {
      $foreground-color: $light;
      $warn-msg: $contrast-to-light;
    }
    @warn "No suitable foreground-color for background-color: #{$background-color} in theme: #{$theme}, picking heighest possible with contrast-ratio #{$warn-msg}";
  }
  @else if $prefer == "dark" and $contrast-to-dark > $color-foreground-min-ratio {
    $foreground-color: $dark;
  }
  @else if $prefer == "dark" and $contrast-to-light > $color-foreground-min-ratio {
    $foreground-color: $light;
  }
  @else if $prefer == "light" and $contrast-to-light > $color-foreground-min-ratio {
    $foreground-color: $light;
  }
  @else if $prefer == "light" and $contrast-to-dark > $color-foreground-min-ratio {
    $foreground-color: $dark;
  }

  @return $foreground-color;
}



//define map with map for each color theme
$color-themes: map-remove((x:x), x); //acording to google, this is the best way to init an empty map: https://stackoverflow.com/questions/52560440/how-can-an-empty-map-be-created-in-sass
@each $name, $color in $color-brands {
  $map: ("style": "normal", "theme": $color,);
  $color-themes: map_merge($color-themes, ($name: $map));

  $map: ("style": "dark", "theme": $color,);
  $color-themes: map_merge($color-themes, ("dark-#{$name}": $map));
}

//define colors in map for each theme
@each $theme-name, $colors in $color-themes {
  //the style of the theme. Normal uses the neutral background-color, dark themes uses a dark version of the theme color as the background
  $style: map_get($colors, "style");

  //theme color
  $theme: map_get($colors, "theme");

  //background color
  $background: null;
  @if $style == "normal" {
    $background: color-neutral("background");
  }
  @else if $style == "dark" {
    @if contrast-ratio(#000000, $theme) > 8 {
      $background: get-contrast-color($theme, 5.5, $direction: "darker");
    }
    @else {
      $background: get-color-inbetween(#000000, $theme);
    }
  }
  $color-themes: add-color-to-theme($theme-name, "background", $background);
  $color-themes: add-color-to-theme($theme-name, "background-cards-secondary", $background);

  //secondary background-color
  $background-secondary: null;
  @if $style == "normal" {
    $background-secondary: color-neutral("background-secondary");
  }
  @else if $style == "dark" {
    $background-contrast-ratio: contrast-ratio(color-neutral("background-secondary"), color-neutral("background"));
    $background-secondary: get-contrast-color($background, $background-contrast-ratio, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "background-secondary", $background-secondary);
  $color-themes: add-color-to-theme($theme-name, "background-cards", $background-secondary);

  //background color for input elements
  $background-input: null;
  @if $style == "normal" {
    $background-input: color-neutral("background");
  }
  @else if $style == "dark" {
    $background-input: get-contrast-color($background, 1.1, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "background-input", $background-input);

  //background color for interactive elements (used for buttons, select, checkboxes, radio-buttons)
  $interactive: null;
  @if $style == "normal" {
    $interactive: color-neutral("interactive");
  }
  @else if $style == "dark" {
    $background-contrast-ratio: contrast-ratio(color-neutral("interactive"), color-neutral("background"));
    $interactive: get-contrast-color($background, $background-contrast-ratio, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "interactive", $interactive);

  //default text color
  $foreground: null;
  @if $style == "normal" {
    $foreground: color-neutral("foreground");
  }
  @else if $style == "dark" {
    $foreground: color-neutral("background"); //TODO bør kunne sættes ved hjælp af calc-foreground-color()
  }
  $color-themes: add-color-to-theme($theme-name, "foreground", $foreground);

  //secondary text color
  $foreground-secondary: null;
  @if $style == "normal" {
    $foreground-secondary: color-neutral("foreground-secondary");
  }
  @else if $style == "dark" {
    $foreground-secondary: get-contrast-color($background, $color-foreground-min-ratio, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "foreground-secondary", $foreground-secondary);

  //a version of theme color for text on background
  $foreground-theme: get-legiable-color($theme, $background, 5.4);
  $color-themes: add-color-to-theme($theme-name, "foreground-theme", $foreground-theme);

  //text color for disabled elementers
  $foreground-disabled: null;
  @if $style == "normal" {
    $foreground-disabled: color-neutral("foreground-disabled");
  }
  @else if $style == "dark" {
    $contrast-ratio: contrast-ratio(color-neutral("background"), color-neutral("foreground-disabled"));
    $foreground-disabled: get-contrast-color($background, $contrast-ratio, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "foreground-disabled", $foreground-disabled);

  //forground color for brading elements like logos and site-names
  $foreground-branding: null;
  @if $style == "normal" {
    $foreground-branding: $foreground-theme;
  }
  @else if $style == "dark" {
    $foreground-branding: $foreground;
  }
  $color-themes: add-color-to-theme($theme-name, "foreground-branding", $foreground-branding);

  //border color
  $border: null;
  @if $style == "normal" {
    $border: color-neutral("border");
  }
  @else if $style == "dark" {
    $contrast-ratio: contrast-ratio(color-neutral("background"), color-neutral("border"));
    $border: get-contrast-color($background, $contrast-ratio, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "border", $border);

  //theme border color, a themed border color
  $border-theme: null;
  @if $style == "normal" {
    $border-theme: $theme;
  }
  @else if $style == "dark" {
    $border-theme: $foreground-theme;
  }
  $color-themes: add-color-to-theme($theme-name, "border-theme", $border-theme);

  //text-link border color, a themed border color that is distinguislable from both forground and background colors
  $border-text-link: null;
  $border-text-link-min-ratio: 3.3;
  @if $style == "normal" {
    $border-text-link: get-legiable-color($theme, $foreground, $min-ratio: $border-text-link-min-ratio);
    $contrast-ratio-background: contrast-ratio($background, $border-text-link);
    @if $contrast-ratio-background < $border-text-link-min-ratio {
      $border-text-link: get-legiable-color($theme, $background, $min-ratio: $border-text-link-min-ratio);
    }
  }
  @else if $style == "dark" {
    $border-text-link: $foreground-theme;
  }
  $color-themes: add-color-to-theme($theme-name, "border-text-link", $border-text-link);

  //color used for text on element with theme color background
  $theme-foreground: calc-foreground-color($theme, $theme-name, $prefer: "light");
  $color-themes: add-color-to-theme($theme-name, "theme-foreground", $theme-foreground);

  //a lighter versioner of the theme color
  $theme-secondary: get-color-inbetween($theme, $background, $ratio-threshold: 2.5);
  $color-themes: add-color-to-theme($theme-name, "theme-secondary", $theme-secondary);

  //color used for text on element with secondary theme color background
  $theme-secondary-foreground: calc-foreground-color($theme-secondary, $theme-name, $prefer: "light");
  $color-themes: add-color-to-theme($theme-name, "theme-secondary-foreground", $theme-secondary-foreground);

  //color used for secondary text on element with secondary theme color background
  $theme-secondary-foreground-secondary: null;
  @if $style == "normal" {
    $theme-secondary-foreground-secondary: get-contrast-color($theme-secondary, $color-foreground-min-ratio, $direction: "darker");
  }
  @else if $style == "dark" {
    $theme-secondary-foreground-secondary: get-contrast-color($theme-secondary, $color-foreground-min-ratio, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "theme-secondary-foreground-secondary", $theme-secondary-foreground-secondary);


  //color for box-shadows
  $shadow: null;
  @if $style == "normal" {
    $shadow: rgba(color-neutral("shadow"), $shadow-opacity);
  }
  @else if $style == "dark" {
    $shadow: rgba(color-neutral("shadow"), $shadow-opacity-dark-mode);
  }
  $color-themes: add-color-to-theme($theme-name, "shadow", $shadow);

  //color for overlays
  $overlay: null;
  @if $style == "normal" {
    @if contrast-ratio(#000000, $theme) > 8 {
      $overlay: get-contrast-color($theme, 5.5, $direction: "darker");
    }
    @else {
      $overlay: get-color-inbetween(#000000, $theme);
    }
    $overlay: rgba($overlay, $overlay-opacity);
  }
  @else if $style == "dark" {
    $overlay: rgba($background, $overlay-opacity-dark-mode);
  }
  $color-themes: add-color-to-theme($theme-name, "overlay", $overlay);


  //HOVERS

  //hover color for elements with background color theme
  $theme-hover: null;
  @if $style == "normal" {
    $theme-hover: get-contrast-color($theme, 1.2, $direction: "darker");
  }
  @else if $style == "dark" {
    $theme-hover: get-contrast-color($theme, 1.2, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "theme-hover", $theme-hover);

  $theme-secondary-hover: null;
  @if $style == "normal" {
    $theme-secondary-hover: get-contrast-color($theme-secondary, 1.1, $direction: "lighter");
  }
  @else if $style == "dark" {
    $theme-secondary-hover: get-contrast-color($theme-secondary, 1.1, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "theme-secondary-hover", $theme-secondary-hover);

  //hover color for elements with foreground color
  $foreground-hover: null;
  @if $style == "normal" {
    $foreground-hover: get-contrast-color($foreground, 3, $direction: "lighter");
  }
  @else if $style == "dark" {
    //$foreground-hover: get-contrast-color($foreground, 1.8, $direction: "darker");
    $foreground-hover: get-color-inbetween($background, $foreground, $ratio-threshold: 1.6);
  }
  $color-themes: add-color-to-theme($theme-name, "foreground-hover", $foreground-hover);

  //hover color for elements with secondary foreground color
  $foreground-secondary-hover: null;
  @if $style == "normal" {
    $foreground-secondary-hover: get-contrast-color($foreground-secondary, 1.9, $direction: "darker");
  }
  @else if $style == "dark" {
    $foreground-secondary-hover: get-contrast-color($foreground-secondary, 1.4, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "foreground-secondary-hover", $foreground-secondary-hover);

  //hover color for elements with foreground theme color
  $foreground-theme-hover: null;
  @if $style == "normal" {
    $foreground-theme-hover: get-contrast-color($foreground-theme, 1.6, $direction: "lighter");
  }
  @else if $style == "dark" {
    $foreground-theme-hover: get-contrast-color($foreground-theme, 1.6, $direction: "darker");
  }
  $color-themes: add-color-to-theme($theme-name, "foreground-theme-hover", $foreground-theme-hover);


  //hover color for elements with foreground branding color
  $foreground-branding-hover: null;
  @if $style == "normal" {
    $foreground-branding-hover: get-color-inbetween($foreground, $foreground-branding, $ratio-threshold: 1.6);
  }
  @else if $style == "dark" {
    $foreground-branding-hover: get-color-inbetween($background, $foreground-branding, $ratio-threshold: 1.6);
  }
  $color-themes: add-color-to-theme($theme-name, "foreground-branding-hover", $foreground-branding-hover);


  //hover color for elements with background color
  $background-hover: null;
  @if $style == "normal" {
    $background-hover: get-contrast-color($background, 1.07, $direction: "darker");
  }
  @else if $style == "dark" {
    $background-hover: get-contrast-color($background, 1.1, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "background-hover", $background-hover);
  $color-themes: add-color-to-theme($theme-name, "background-cards-secondary-hover", $background-hover);


  //hover color for elements with background-secondary color
  $background-secondary-hover: null;
  @if $style == "normal" {
    $background-secondary-hover: get-contrast-color($background-secondary, 1.07, $direction: "darker");
  }
  @else if $style == "dark" {
    $background-secondary-hover: get-contrast-color($background-secondary, 1.2, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "background-secondary-hover", $background-secondary-hover);
  $color-themes: add-color-to-theme($theme-name, "background-cards-hover", $background-secondary-hover);

  //hover color for interactive elements
  $interactive-hover: null;
  @if $style == "normal" {
    $interactive-hover: get-contrast-color($interactive, 1.2, $direction: "darker");
  }
  @else if $style == "dark" {
    $interactive-hover: get-contrast-color($interactive, 1.2, $direction: "lighter");
  }

  $color-themes: add-color-to-theme($theme-name, "interactive-hover", $interactive-hover);


  //UTILITY colors
  $utility-foreground: color-neutral("foreground");
  $color-themes: add-color-to-theme($theme-name, "utility-foreground", $utility-foreground);

  $utility-interactive: color-neutral("background");
  $color-themes: add-color-to-theme($theme-name, "utility-interactive", $utility-interactive);

  $utility-interactive-foreground-secondary: color-neutral("foreground-secondary");
  $color-themes: add-color-to-theme($theme-name, "utility-interactive-foreground-secondary", $utility-interactive-foreground-secondary);

  $utility-interactive-foreground-disabled: color-neutral("foreground-disabled");
  $color-themes: add-color-to-theme($theme-name, "utility-interactive-foreground-disabled", $utility-interactive-foreground-disabled);

  $utility-shadow: rgba(color-neutral("shadow"), $shadow-opacity);
  $color-themes: add-color-to-theme($theme-name, "utility-shadow", $utility-shadow);

  $utility-interactive-hover: get-contrast-color($utility-interactive, 1.1, $direction: "darker");;
  $color-themes: add-color-to-theme($theme-name, "utility-interactive-hover", $utility-interactive-hover);

  $utility-confirm: color-utillity("confirm");
  $color-themes: add-color-to-theme($theme-name, "utility-confirm", $utility-confirm);

  $utility-confirm-background: get-legiable-color($utility-confirm, $utility-foreground, $min-ratio: 11);
  $color-themes: add-color-to-theme($theme-name, "utility-confirm-background", $utility-confirm-background);

  $utility-confirm-hover: null;
  @if $style == "normal" {
    $utility-confirm-hover: get-contrast-color($utility-confirm, 1.2, $direction: "darker");
  }
  @else if $style == "dark" {
    $utility-confirm-hover: get-contrast-color($utility-confirm, 1.2, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "utility-confirm-hover", $utility-confirm-hover);

  $utility-confirm-background-hover: null;
  @if $style == "normal" {
    $utility-confirm-background-hover: get-contrast-color($utility-confirm-background, 1.1, $direction: "darker");
  }
  @else if $style == "dark" {
    $utility-confirm-background-hover: get-contrast-color($utility-confirm-background, 1.1, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "utility-confirm-background-hover", $utility-confirm-background-hover);

  $utility-confirm-foreground-secondary: get-contrast-color($utility-confirm-background, $color-foreground-min-ratio, $direction: "darker");
  $color-themes: add-color-to-theme($theme-name, "utility-confirm-foreground-secondary", $utility-confirm-foreground-secondary);

  $utility-attention: color-utillity("attention");
  $color-themes: add-color-to-theme($theme-name, "utility-attention", $utility-attention);

  $utility-attention-background: get-legiable-color($utility-attention, $utility-foreground, $min-ratio: 14);
  $color-themes: add-color-to-theme($theme-name, "utility-attention-background", $utility-attention-background);

  $utility-attention-hover: null;
  @if $style == "normal" {
    $utility-attention-hover: get-contrast-color($utility-attention, 1.2, $direction: "darker");
  }
  @else if $style == "dark" {
    $utility-attention-hover: get-contrast-color($utility-attention, 1.2, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "utility-attention-hover", $utility-attention-hover);

  $utility-attention-foreground-secondary: get-contrast-color($utility-attention-background, $color-foreground-min-ratio, $direction: "darker");
  $color-themes: add-color-to-theme($theme-name, "utility-attention-foreground-secondary", $utility-attention-foreground-secondary);

  $utility-warning: color-utillity("warning");
  $color-themes: add-color-to-theme($theme-name, "utility-warning", $utility-warning);

  $utility-warning-background: get-legiable-color($utility-warning, $utility-foreground, $min-ratio: 9);
  $color-themes: add-color-to-theme($theme-name, "utility-warning-background", $utility-warning-background);

  $utility-warning-hover: null;
  @if $style == "normal" {
    $utility-warning-hover: get-contrast-color($utility-warning, 1.2, $direction: "darker");
  }
  @else if $style == "dark" {
    $utility-warning-hover: get-contrast-color($utility-warning, 1.2, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "utility-warning-hover", $utility-warning-hover);

  $utility-warning-background-hover: null;
  @if $style == "normal" {
    $utility-warning-background-hover: get-contrast-color($utility-warning-background, 1.1, $direction: "darker");
  }
  @else if $style == "dark" {
    $utility-warning-background-hover: get-contrast-color($utility-warning-background, 1.1, $direction: "lighter");
  }
  $color-themes: add-color-to-theme($theme-name, "utility-warning-background-hover", $utility-warning-background-hover);

  $utility-warning-foreground-secondary: get-contrast-color($utility-warning-background, $color-foreground-min-ratio, $direction: "darker");
  $color-themes: add-color-to-theme($theme-name, "utility-warning-foreground-secondary", $utility-warning-foreground-secondary);

  $utility-focus: color-utillity("focus");
  $color-themes: add-color-to-theme($theme-name, "utility-focus", $utility-focus);
}


@mixin set-theme-colors($theme-map) {
  @each $color-name, $color in $theme-map {
    @if $color-name != "style" {
      --color-#{$color-name}: #{$color};
    }
  }
}


@mixin define-color-variables() {
  @each $theme-name, $color in $color-brands {

    $theme-normal: map_get($color-themes, $theme-name);
    $theme-dark: map_get($color-themes, "dark-#{$theme-name}");


    $selector-theme-normal: 
    ".theme--#{$theme-name}," +
    ".theme--#{$theme-name}.theme--normal," +
    "*[class^=\"theme--\"] .theme--#{$theme-name}.theme--normal," +
    ".theme--dark .theme--#{$theme-name}.theme--normal," +
    ".theme--dark .theme--normal .theme--#{$theme-name}," +
    ".theme--#{$theme-name} .theme--normal";
  

    $selector-theme-dark: 
    ".theme--dark .theme--" + $theme-name + "," +
    ".theme--" + $theme-name + ".theme--dark," +
    "*[class^=\"theme--\"] .theme--" + $theme-name + ".theme--dark," +
    ".theme--normal .theme--" + $theme-name + ".theme--dark," +
    ".theme--normal .theme--" + $theme-name + " .theme--dark," +
    ".theme--dark .theme--" + $theme-name + ".theme--dark," +
    ".theme--" + $theme-name + " .theme--dark";

    @if $theme-name == $color-default-brand {
      :root,
      :root .theme--normal,
      #{$selector-theme-normal} {
        @include set-theme-colors($theme-normal);
      }

      :root .theme--dark,
      #{$selector-theme-dark} {
        @include set-theme-colors($theme-dark);
      }
    }
    @else {
      #{$selector-theme-normal} {
        @include set-theme-colors($theme-normal);
      }

      #{$selector-theme-dark} {
        @include set-theme-colors($theme-dark);
      }
    }
  }

  @include set-theme-backgrounds();
}


@mixin set-theme-backgrounds() {
  @each $theme-name, $color in $color-brands {
    .theme--#{$theme-name} {
      color: color("foreground");
      background-color: color("background");
    }
  }

  .theme--normal,
  .theme--dark {
    color: color("foreground");
    background-color: color("background");
  }

  .theme--background-secondary {
    @include set-colors("background-secondary", $rewrite-css-vars: true);
  }

  .theme--background-transparent {
    color: color("foreground");
    background-color: transparent;
  }

  $background-cards-selector: ".theme--background-cards";
  #{$background-cards-selector},
  .theme--normal#{$background-cards-selector},
  .theme--dark#{$background-cards-selector},
  .theme--dark #{$background-cards-selector}  {
    --color-background: #{color("background-cards")};
    --color-background-hover: #{color("background-cards-hover")};
    --color-background-secondary: #{color("background-cards-secondary")};
    --color-background-secondary-hover: #{color("background-cards-secondary-hover")};
    background-color: color("background");
  }
}


@function color($name) {
  $map: map_get($color-themes, $color-default-brand);
  @if type-of($map) != map {
    @error 'map is not a map';
  }
  @else if map_has_key($map, $name) {
    @return var(--color-#{$name});
  }
  @else {
    @error 'Color-themes contain no color-variable with name: ' + $name;
  }
}

@mixin set-colors($background, $rewrite-css-vars: false) {
  @if $background == "background" {
    background-color: color("background");
    color: color("foreground");
  }
  @else if $background == "background-secondary" {
    background-color: color("background-secondary");
    color: color("foreground");
    @if $rewrite-css-vars {
      --color-background: #{color("background-secondary")};
    }
  }
  @else if $background == "theme" {
    background-color: color("theme");
    color: color("theme-foreground");
    @if $rewrite-css-vars {
      --color-background: #{color("theme")};
      --color-foreground: #{color("theme-foreground")};
    }
  }
  @else if $background == "theme-secondary" {
    background-color: color("theme-secondary");
    color: color("theme-secondary-foreground");
    @if $rewrite-css-vars {
      --color-background: #{color("theme-secondary")};
      --color-foreground: #{color("theme-secondary-foreground")};
    }
  }
  @else if $background == "background-input" {
    background-color: color("background-input");
    color: color("foreground");
  }
  @else if $background == "interactive" {
    background-color: color("interactive");
    color: color("foreground");
  }
  @else if $background == "utility-warning" {
    background-color: color("utility-warning");
    color: color("utility-foreground");
  }
  @else if $background == "utility-warning-background" {
    background-color: color("utility-warning-background");
    color: color("utility-foreground");
    @if $rewrite-css-vars {
      --color-background: #{color("utility-warning-background")};
      --color-foreground: #{color("utility-foreground")};
      --color-foreground-secondary: #{color("utility-warning-foreground-secondary")};
      --color-border-text-link: #{color("utility-warning-foreground-secondary")};
      --color-foreground-theme: #{color("utility-warning-foreground-secondary")};
      --color-foreground-theme-hover: #{color("utility-warning")};
    }
  }
  @else if $background == "utility-confirm" {
    background-color: color("utility-confirm");
    color: color("utility-foreground");
  }
  @else if $background == "utility-confirm-background" {
    background-color: color("utility-confirm-background");
    color: color("utility-foreground");
    @if $rewrite-css-vars {
      --color-background: #{color("utility-confirm-background")};
      --color-foreground: #{color("utility-foreground")};
      --color-foreground-secondary: #{color("utility-confirm-foreground-secondary")};
      --color-border-text-link: #{color("utility-confirm-foreground-secondary")};
      --color-foreground-theme: #{color("utility-confirm-foreground-secondary")};
      --color-foreground-theme-hover: #{color("utility-confirm")};
    }
  }
  @else if $background == "utility-attention" {
    background-color: color("utility-attention");
    color: color("utility-foreground");
  }
  @else if $background == "utility-attention-background" {
    background-color: color("utility-attention-background");
    color: color("utility-foreground");
    @if $rewrite-css-vars {
      --color-background: #{color("utility-attention-background")};
      --color-foreground: #{color("utility-foreground")};
      --color-foreground-secondary: #{color("utility-attention-foreground-secondary")};
      --color-border-text-link: #{color("utility-attention-foreground-secondary")};
      --color-foreground-theme: #{color("utility-attention-foreground-secondary")};
      --color-foreground-theme-hover: #{color("utility-attention")};
    }
  }
  @else if $background == "utility-interactive" {
    background-color: color("utility-interactive");
    color: color("utility-foreground");
    @if $rewrite-css-vars {
      --color-foreground-secondary: #{color("utility-interactive-foreground-secondary")};
      --color-foreground-disabled: #{color("utility-interactive-foreground-disabled")};
    }
  }
  @else {
    @error "\"" $background + "\" has no defined forground-color";
  }
}