@mixin display-icon($icon, $direction, $size, $margin, $hover) {

&::#{$direction} {
  @include add-background-svg("#{$icon}");
  background-size: 100%;
  content: "";
  display: inline-block;
  height: $size;
  width: $size;

  /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */
  @if $direction == "after" {
    margin-left: $margin;
  } @else {
    margin-right: $margin;
  }
  /* stylelint-enable */
}

@if $hover == "hover" {
  &:hover::#{$direction} {
    @include add-background-svg("#{$icon}-hover");
  }
}

}

@mixin remove-icon($direction) {

&::#{$direction} {
  display: none;
}

}

@mixin add-icon(

$icon-name,
$direction,
$image-size,
$container-size,
$margin,
$hover

) {

&::#{$direction} {
  @include add-background-svg("#{$icon-name}");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: units($image-size);
  content: "";
  display: inline-block;
  height: units($container-size);
  width: units($container-size);

  /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */
  @if $direction == "after" {
    margin-left: units($margin);
  } @else {
    margin-right: units($margin);
  }
  /* stylelint-enable */
}

@if $hover == "hover" {
  &:hover::#{$direction} {
    @include add-background-svg("#{$icon-name}-hover");
  }
}

}

// New icon mixins using SVG mask technique // // $image may be a specific SVG or a list in the form // ($base, $variant, $variant-alt, $bg) // the mixin will pick IE11-compatible svgs named // [base]-.svg based on the specified background-color

@mixin add-color-icon($icon-object, $contrast-bg) {

$filename-base: map-get($icon-object, "name");
$svg-height: map-get($icon-object, "svg-height");
$svg-width: map-get($icon-object, "svg-width");
$aspect: $svg-width / $svg-height;
$height: if(
  unitless(map-get($icon-object, "height")),
  units(map-get($icon-object, "height")),
  map-get($icon-object, "height")
);
$width: $height * $aspect;
$container-height: if(
  map-has-key($icon-object, "container-height"),
  units(map-get($icon-object, "container-height")),
  null
);
$container-width: if(
  map-has-key($icon-object, "container-width"),
  units(map-get($icon-object, "container-width")),
  null
);
$color: if(
  map-has-key($icon-object, "color"),
  map-get($icon-object, "color"),
  "ink"
);
$color-variant: if(
  map-has-key($icon-object, "color-variant"),
  map-get($icon-object, "color-variant"),
  "white"
);
$color-hover: if(
  map-has-key($icon-object, "color-hover"),
  map-get($icon-object, "color-hover"),
  null
);
$rotate: if(
  map-has-key($icon-object, "rotate"),
  map-get($icon-object, "rotate"),
  null
);
$path: if(
  map-has-key($icon-object, "path"),
  map-get($icon-object, "path"),
  $theme-image-path
);
$ie11-variant: get-color-token-from-bg($contrast-bg, $color-variant, "black");
$filename-ie11-variant: if($ie11-variant == "black", null, $ie11-variant);
$filename: if(
  $filename-ie11-variant,
  "#{$filename-base}-#{$filename-ie11-variant}.svg",
  "#{$filename-base}.svg"
);

$image-props: url("#{$path}/#{$filename}") no-repeat center / #{$width} #{$height};

// Default background shorthand for browsers that don't support mask or supports.
background: $image-props;
display: inline-block;
height: if($container-height, $container-height, $height);
width: if($container-width, $container-width, $width);
@if $rotate {
  transform: rotate($rotate);
}

// Mask supportered styles
@supports (mask: url("")) {
  background: none;
  background-color: color($color);
  mask: $image-props;
  @if $color-hover {
    &:hover {
      background-color: color($color-hover);
    }
  }
}

}

// Places an icon before or after an element as an inline-block, // using the `:before` or `:after` pseudoelements. @mixin place-icon(

$icon-object,
$direction,
$margin,
$vertical-align,
$contrast-bg

) {

$color-hover: if(
  map-has-key($icon-object, "color-hover"),
  map-get($icon-object, "color-hover"),
  null
);
&::#{$direction} {
  @include add-color-icon($icon-object, $contrast-bg);
  content: "";
  vertical-align: $vertical-align;

  @if $direction == "after" {
    margin-left: units($margin);
  } @else {
    margin-right: units($margin);
  }
}

@if $color-hover {
  &:hover::#{$direction} {
    content: ""; // Added to address a weird display bug
    background-color: color($color-hover);
  }
}

}