@font-face {
  font-family: "<%= fontName %>";
  src: url('<%= fontPath %><%= fontName %>.eot?v=<%= cacheToken %>');
  src: url('<%= fontPath %><%= fontName %>.eot?v=<%= cacheToken %>#iefix') format('eot'),
  url('<%= fontPath %><%= fontName %>.woff2?v=<%= cacheToken %>') format('woff2'),
  url('<%= fontPath %><%= fontName %>.woff?v=<%= cacheToken %>') format('woff'),
  url('<%= fontPath %><%= fontName %>.ttf?v=<%= cacheToken %>') format('truetype'),
  url('<%= fontPath %><%= fontName %>.svg?v=<%= cacheToken %>#<%= fontName %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

%icon-base-styles {
  display: inline-block;
  vertical-align: middle;
  font-family: "<%= fontName %>";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

/**======================================================
||                  Icons list.                      ||
=======================================================*/
$icons: (
  <%= glyphs.map(function(glyph){ return glyph.name + ': "' + '\\' + glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() + '"' }).join(',\n  ') %>
);

/**======================================================
||                  Via attributes                      ||
=======================================================*/
[data-<%= className %>]:before { content: attr(data-<%= className %>); }
[data-<%= className %>]:before,
<%= glyphs.map(function(glyph){ return '.' + className + '-' + glyph.name + ':before' }).join(',\n') %> {
  @extend %icon-base-styles;
}

/**======================================================
||                  Direct class                      ||
=======================================================*/
<%= glyphs.map(function(glyph){ return '.' + className + '-' + glyph.name + ':before { content: "' + '\\' + glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() + '" }' }).join('\n') %>

/**======================================================
||                  Content variables                  ||
=======================================================*/
<%= glyphs.map(function(glyph){ return '$icon-' + glyph.name + ': "' + '\\' + glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() + '"' }).join(';\n') %>