@font-face {
  font-family: $icon-font-base-name;
  src: url("#{$icon-font-path}#{$icon-font-base-name}.eot");
  src: /* stylelint-disable-line declaration-colon-space-after */
    url("#{$icon-font-path}#{$icon-font-base-name}.eot?#iefix") format("eot"),
    url("#{$icon-font-path}#{$icon-font-base-name}.woff") format("woff"),
    url("#{$icon-font-path}#{$icon-font-base-name}.ttf") format("truetype"),
    url("#{$icon-font-path}#{$icon-font-base-name}.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

@mixin font-icon-base() {
  font-family: $icon-font-base-name;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  speak: none;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: optimizeLegibility;
}

@mixin font-icon-replace($pseudo) {
  position: relative;
  right: 9999px;
  &:#{$pseudo} { /* stylelint-disable-line */
    position: absolute;
    height: 100%;
    text-align: center;
    top: 0;
    right: -9999px;
  }
}

/// Main Icon mixin.
/// See the [Icons in Pattern Lab](../../pattern-lab/public/?p=atoms-icons).
/// @param {String} $icon - Machine name of icon (filename).
/// @param {String} $pseudo [before] - `before` | `after` The pseudo element to place the icon in.
/// @todo Allow `$pseudo: false` to be declared so we don't have to use a pseudo element if we don't want to.
/// @param {Bool} $text-replace [false]
/// @param {String} $size [inherit]
/// @param {String} $color [inherit]
/// @param {Bool} $block [false] - If `display: block` should be applied.
/// @example scss
/// .class {
///   @include icon('close');
/// }
@mixin icon(
  $icon: "search", // just a default
  $pseudo: before,
  $text-replace: false,
  $size: inherit,
  $color: inherit,
  $block: false
) {
  &:#{$pseudo} { /* stylelint-disable-line */

    @include font-icon-base();
    content: map-get($font-icons, $icon);
    font-size: $size;
    color: $color;

    @content;
  }
  // Replace text with icon, like classic sprites
  @if $text-replace {
    @include font-icon-replace($pseudo);
  }
  // Get around fighting with line-heights
  @if $block {
    display: block;
  }
}

/**
 * Font application to generic DOM
 */

//@font-face {
//  font-family: $icon-font-base-name;
//  src: $icon-font-source-1;
//  src: $icon-font-source-2;
//  font-weight: normal;
//  font-style: normal;
//}

// Everything with .icon--something has a base set of styles in order to view
[class*="#{$icon-font-class-prefix}--"] {
  @include font-icon-base;
}

// Print .icon--thingy classes using default :before for easy elements
@each $icon-name, $icon-symbol in $font-icons {
  .#{$icon-font-class-prefix}--#{$icon-name}::before {
    content: map-get($font-icons, $icon-name);
  }
}