/*
---
name: Icon
category:
  - Icons
tag:
  - icon
---

pxg
```html
<div style="font-size:32px;">
  <span class="CG2-icon-pxg"></span>
  
</div>
```

top
```html
<div style="font-size:32px;">
  <span class="CG2-icon-top"></span>
  
</div>
```

right
```html
<div style="font-size:32px;">
  <span class="CG2-icon-right"></span>
  
</div>
```

down
```html
<div style="font-size:32px;">
  <span class="CG2-icon-down"></span>
  
</div>
```

left
```html
<div style="font-size:32px;">
  <span class="CG2-icon-left"></span>
  
</div>
```

hamburger
```html
<div style="font-size:32px;">
  <span class="CG2-icon-hamburger"></span>
  
</div>
```

list
```html
<div style="font-size:32px;">
  <span class="CG2-icon-list"></span>
  
</div>
```

setting
```html
<div style="font-size:32px;">
  <span class="CG2-icon-setting"></span>
  
</div>
```

search
```html
<div style="font-size:32px;">
  <span class="CG2-icon-search"></span>
  
</div>
```

star
```html
<div style="font-size:32px;">
  <span class="CG2-icon-star"></span>
  
</div>
```

lock
```html
<div style="font-size:32px;">
  <span class="CG2-icon-lock"></span>
  
</div>
```

unlock
```html
<div style="font-size:32px;">
  <span class="CG2-icon-unlock"></span>
  
</div>
```

question
```html
<div style="font-size:32px;">
  <span class="CG2-icon-question"></span>
  
</div>
```

twitter
```html
<div style="font-size:32px;">
  <span class="CG2-icon-twitter"></span>
  
</div>
```

facebook
```html
<div style="font-size:32px;">
  <span class="CG2-icon-facebook"></span>
  
</div>
```

gplus
```html
<div style="font-size:32px;">
  <span class="CG2-icon-gplus"></span>
  
</div>
```

cat-elementary
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-elementary"></span>
  <span class="CG2-icon-cat-elementary CG2-icon--colored"></span>
</div>
```

cat-mastering
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-mastering"></span>
  <span class="CG2-icon-cat-mastering CG2-icon--colored"></span>
</div>
```

cat-standards
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-standards"></span>
  <span class="CG2-icon-cat-standards CG2-icon--colored"></span>
</div>
```

cat-talk
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-talk"></span>
  <span class="CG2-icon-cat-talk CG2-icon--colored"></span>
</div>
```

cat-architecture
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-architecture"></span>
  <span class="CG2-icon-cat-architecture CG2-icon--colored"></span>
</div>
```

cat-report
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-report"></span>
  <span class="CG2-icon-cat-report CG2-icon--colored"></span>
</div>
```

cat-design
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-design"></span>
  <span class="CG2-icon-cat-design CG2-icon--colored"></span>
</div>
```

cat-future
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-future"></span>
  <span class="CG2-icon-cat-future CG2-icon--colored"></span>
</div>
```

cat-work-style
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-work-style"></span>
  <span class="CG2-icon-cat-work-style CG2-icon--colored"></span>
</div>
```

cat-survey
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-survey"></span>
  <span class="CG2-icon-cat-survey CG2-icon--colored"></span>
</div>
```

cat-interview
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-interview"></span>
  <span class="CG2-icon-cat-interview CG2-icon--colored"></span>
</div>
```

cat-discussion
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-discussion"></span>
  <span class="CG2-icon-cat-discussion CG2-icon--colored"></span>
</div>
```

*/

@font-face {
  font-family: "codegrid-icon";
  src: url('../font/codegrid-icon.eot');
  src: url('../font/codegrid-icon.eot?#iefix') format('embedded-opentype'),
    url('../font/codegrid-icon.woff') format('woff'),
    url('../font/codegrid-icon.ttf') format('truetype'),
    url('../font/codegrid-icon.svg#codegrid-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="CG2-icon-"], [class*=" CG2-icon-"] {
  font-family: "codegrid-icon";
  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;
}

.CG2-icon-pxg:before { content: "\"; }
.CG2-icon-top:before { content: "\"; }
.CG2-icon-right:before { content: "\"; }
.CG2-icon-down:before { content: "\"; }
.CG2-icon-left:before { content: "\"; }
.CG2-icon-hamburger:before { content: "\"; }
.CG2-icon-list:before { content: "\"; }
.CG2-icon-setting:before { content: "\"; }
.CG2-icon-search:before { content: "\"; }
.CG2-icon-star:before { content: "\"; }
.CG2-icon-lock:before { content: "\"; }
.CG2-icon-unlock:before { content: "\"; }
.CG2-icon-question:before { content: "\"; }
.CG2-icon-twitter:before { content: "\"; }
.CG2-icon-facebook:before { content: "\"; }
.CG2-icon-gplus:before { content: "\"; }
.CG2-icon-cat-elementary:before { content: "\"; }
.CG2-icon-cat-mastering:before { content: "\"; }
.CG2-icon-cat-standards:before { content: "\"; }
.CG2-icon-cat-talk:before { content: "\"; }
.CG2-icon-cat-architecture:before { content: "\"; }
.CG2-icon-cat-report:before { content: "\"; }
.CG2-icon-cat-design:before { content: "\"; }
.CG2-icon-cat-future:before { content: "\"; }
.CG2-icon-cat-work-style:before { content: "\"; }
.CG2-icon-cat-survey:before { content: "\"; }
.CG2-icon-cat-interview:before { content: "\"; }
.CG2-icon-cat-discussion:before { content: "\"; }


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

$icons: (
  pxg "\",
  top "\",
  right "\",
  down "\",
  left "\",
  hamburger "\",
  list "\",
  setting "\",
  search "\",
  star "\",
  lock "\",
  unlock "\",
  question "\",
  twitter "\",
  facebook "\",
  gplus "\",
  cat-elementary "\",
  cat-mastering "\",
  cat-standards "\",
  cat-talk "\",
  cat-architecture "\",
  cat-report "\",
  cat-design "\",
  cat-future "\",
  cat-work-style "\",
  cat-survey "\",
  cat-interview "\",
  cat-discussion "\",
  
);

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: "codegrid-icon";
  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;
}
