@use "sass:map";
@use "sass:string";

@use "variables/colors";
@use "variables/icon" as icon-variables;

@forward "variables/icon";

$colors: (
  "grasgroen": colors.$grasgroen,
  "scampi": colors.$scampi,
  "zwart": colors.$zwart,
  "wit": colors.$wit,
  "bosgroen": colors.$bosgroen,
  "grasgroen-40": colors.$grasgroen-40,
);

$icons: (
  "download": (
    "grasgroen",
    "scampi",
    "zwart",
    "wit",
    "bosgroen",
    "grasgroen-40",
  ),
  "external-link": (
    "grasgroen",
    "scampi",
    "zwart",
    "wit",
    "bosgroen",
    "grasgroen-40",
  ),
  "call": (
    "grasgroen",
    "scampi",
    "zwart",
    "wit",
  ),
  "mail-outline": (
    "grasgroen",
    "scampi",
    "zwart",
    "wit",
  ),
  "chevron-right": (
    "grasgroen",
    "scampi",
    "zwart",
  ),
);

@function custom-property($icon, $color) {
  @return string.unquote("--_dso-di-#{$icon}-#{$color}");
}

@mixin variant($icon, $color, $override-property: null) {
  @if $override-property {
    background-image: var(#{$override-property}, var(#{custom-property($icon, $color)}));
  } @else {
    background-image: var(#{custom-property($icon, $color)});
  }
}

@mixin base($icon, $color, $override-property: null) {
  @include variant($icon, $color, $override-property);

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  block-size: icon-variables.$size;
  inline-size: icon-variables.$size;
  vertical-align: icon-variables.$vertical-align;
}

@mixin inline-icons() {
  :root {
    @each $icon, $color-names in $icons {
      @each $color-name in $color-names {
        @if not map.has-key($colors, $color-name) {
          @error "di-inline: kleur '#{$color-name}' voor icoon '#{$icon}' ontbreekt in $colors.";
        }

        #{custom-property($icon, $color-name)}: #{inline-icon-DI-ONLY($icon, "#{map.get($colors, $color-name)}")};
      }
    }
  }
}