@use "sass:map";

@use "../../di-inline";
@use "../../variables/units";
@use "link.variables" as link-variables;

@mixin hideIcons() {
  --_dso-link-icon-visibility: none;

  --_dso-link-icon-padding-inline-start: 0;
  --_dso-link-icon-padding-inline-end: 0;
}

@mixin pseudo() {
  &:hover,
  &:focus-visible {
    color: var(--_dso-link-hover-color);
    text-decoration: underline;
  }

  &:active {
    text-decoration: none;
  }
}

@mixin root($is-html-a-element: true) {
  overflow-wrap: anywhere;
  background-color: transparent;
  color: var(--_dso-link-color);
  text-decoration: underline;
  text-underline-offset: link-variables.$link-underline-offset;

  @include pseudo();

  .sr-only + dso-icon {
    margin-inline-start: 0;
  }

  @if ($is-html-a-element) {
    &:visited {
      color: var(--_dso-link-visited-color);
    }
  } @else {
    cursor: pointer;
  }
}

@mixin clean {
  text-decoration: none;

  &:hover,
  &:focus-visible {
    text-decoration: none;
  }

  &:active {
    text-decoration: underline;
  }
}

@mixin reverse {
  text-decoration: none;

  &:hover,
  &:focus-visible,
  &:active {
    text-decoration: underline;
  }
}

@mixin linkIcons() {
  @each $mode, $value in link-variables.$linkIcons {
    &#{map.get($value, "selector")} {
      @include _mode-base($value, $mode);
    }
  }
}

@mixin _mode-base($link-map, $mode) {
  $icon-placement: map.get($link-map, "icon-placement");

  @if $icon-placement != "after" and $icon-placement != "before" {
    @error 'Use mixin argument "before" or "after".';
  }

  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;

  @if $icon-placement == "before" {
    padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
    background-position: bottom -3px left 0;
  }

  @if $icon-placement == "after" {
    padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
    background-position: bottom -3px right 0;
  }

  $key: map.get($link-map, "icon");

  $icon-color: "grasgroen";

  @if map.has-key($link-map, "icon-color") {
    $icon-color: map.get($link-map, "icon-color");
  }

  background-image: var(
    --_dso-link-icon-visibility,
    var(--_dso-link-#{$mode}-icon, var(#{di-inline.custom-property($key, $icon-color)}))
  );

  @if map.has-key($link-map, "icon-hover-color") {
    $icon-hover-color: map.get($link-map, "icon-hover-color");

    &:hover,
    &:focus-visible {
      background-image: var(
        --_dso-link-icon-visibility,
        var(--_dso-link-#{$mode}-icon, var(#{di-inline.custom-property($key, $icon-hover-color)}))
      );
    }
  }
}

@mixin mode-download() {
  @include _mode-base(map.get(link-variables.$linkIcons, "download"), "download");
}

@mixin mode-extern() {
  @include _mode-base(map.get(link-variables.$linkIcons, "extern"), "extern");
}

@mixin mode-phone() {
  @include _mode-base(map.get(link-variables.$linkIcons, "phone"), "phone");
}

@mixin mode-email() {
  @include _mode-base(map.get(link-variables.$linkIcons, "mail"), "mail");
}