/* stylelint-disable */
@use "sass:map";

@use "../01-functions/functions" as *;

$iconMapping: (
  <% glyphs.forEach(function(glyph) { %>'<%= glyph.fileName %>': '\<%= glyph.codePoint %>',
  <% });
%>);

@mixin icon-char($filename) {
  $icon: map.get($iconMapping, $filename);

  @if ($icon == null) {
    content: "";
  }
  @else {
    // Safari can't handle  `"content"/""`, so we need to add a fallback.
    content: $icon;
    content: $icon / "";
  }
}

// *
// * Icon mixin: add a custom icon before or after an element
//
// * Settings via an object, containing:
// * $icon
// * $element: pseudo-element, default = before,
// * $position,
// * $top,
// * $right,
// * $bottom,
// * $left,
// * $margin,
// * $size,
// * $color,
// * $align:middle,
//
// * USAGE:
// * @include icon(icon: arrow-left, size: 30, margin: 0 rem(10) 0 0);
@mixin icon($settings) {
  // set variables
  $icon: map.get($settings, icon);
  $element: map.get($settings, element);
  $position: map.get($settings, position);
  $top: map.get($settings, top);
  $right: map.get($settings, right);
  $bottom: map.get($settings, bottom);
  $left: map.get($settings, left);
  $margin: map.get($settings, margin);
  $size: map.get($settings, size);
  $color: map.get($settings, color);
  $align: map.get($settings, align);

  // some defaults, used in case no $settings were given
  $element-default: before;
  $color-default: inherit;
  $align-default: middle;

  // if any are not filled in, fall back to defaults
  @if ($element == null) {
    $element: $element-default;
  }
  @if ($color == null) {
    $color: $color-default;
  }
  @if ($align == null) {
    $align: $align-default;
  }

  &:#{$element} {
    @include icon-char($icon);

    @if($position != null) {
      position: $position;
    }
    @if($top != null) {
      top: $top;
    }
    @if($right != null) {
      right: $right;
    }
    @if($bottom != null) {
      bottom: $bottom;
    }
    @if($left != null) {
      left: $left;
    }
    @if ($margin != null) {
      margin: $margin;
    }
    font-family: "iconfont";
    @if ($size != null) {
      font-size: rem($size);
    }
    display: inline-flex;
    font-weight: normal;
    line-height: 1;
    // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
    text-decoration: none;
    vertical-align: $align;
    color: $color;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
  }
}
/* stylelint-enable */
