/*
---
name: Icon
category:
  - Icons
tag:
  - icon
---
<% _.each ( glyphs, function( glyph ) { %>
<%= glyph.name %>
```html
<div style="font-size:32px;">
  <span class="<%= prefix %>-<%= glyph.name %>"></span>
  <% if ( /cat-/.test( glyph.name ) ) { %><span class="<%= prefix %>-<%= glyph.name %> CG2-icon--colored"></span><% } %>
</div>
```
<% } ); %>
*/

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

[class^="<%= prefix %>-"], [class*=" <%= prefix %>-"] {
  font-family: "<%= fontName %>";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* For With CJK Text =========== */
  position: relative;
  top: -0.1em;
}

<% _.each ( glyphs, function( glyph ) { %>.<%= prefix %>-<%= glyph.name %>:before { content: "\<%= glyph.unicode.toString( 16 ).toUpperCase() %>"; }
<% } ); %>

@function getValue ( $assoc, $key ) {
  @each $pair in $assoc {
    @if nth( $pair, 1 ) == $key {
      @return nth( $pair, 2 );
    }
  }
  @return null;
}

$icons: (
  <% _.each ( glyphs, function( glyph ) { %><%= glyph.name %> "\<%= glyph.unicode.toString( 16 ).toUpperCase() %>",
  <% } ); %>
);

span.CG2-icon--colored.CG2-icon-unlock           { color: #f8a000; }
span.CG2-icon--colored.CG2-icon-cat-elementary   { color: #f4db00; }
span.CG2-icon--colored.CG2-icon-cat-mastering    { color: #9cc500; }
span.CG2-icon--colored.CG2-icon-cat-standards    { color: #009b26; }
span.CG2-icon--colored.CG2-icon-cat-talk         { color: #009b9b; }
span.CG2-icon--colored.CG2-icon-cat-architecture { color: #009be7; }
span.CG2-icon--colored.CG2-icon-cat-report       { color: #006bb5; }
span.CG2-icon--colored.CG2-icon-cat-design       { color: #000872; }
span.CG2-icon--colored.CG2-icon-cat-future       { color: #f89c00; }
span.CG2-icon--colored.CG2-icon-cat-work-style   { color: #ef0000; }
span.CG2-icon--colored.CG2-icon-cat-survey       { color: #ee0155; }
span.CG2-icon--colored.CG2-icon-cat-interview    { color: #ef007e; }
span.CG2-icon--colored.CG2-icon-cat-discussion   { color: #9c0178; }

@mixin icon ( $name ) {
  content: getValue( $icons, $name );
  font-family: "<%= fontName %>";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
