// include the CSS files with relative @font-face declarations
@import url(fonts/lato/lato.css);
@import url(fonts/eiti/eiti.css);


// EITI Webfont Icons
//
// This is a custom webfont made for the eiti project.
// Font icons are namespaced with a '.icon-' class.
// To use a font, the recommended use is to create an
// <i> element with the class attribute set to your icon of choice.
// Alternatively, use an icon by specifying font-family: 'eiti',
// and setting the content property of :before or :after pseudo-selectors
// to correspond with that of the intended icon.
//
// .icon                     - Void – All of the following icons are displayed at 2rem
// .icon-coal                - coal icon
// .icon-oil                 - oil icon
// .icon-gold                - gold icon
// .icon-iron                - iron icon
// .icon-wind                - wind icon (similar to renewables)
// .icon-geo                 - geo icon
// .icon-copper              - copper icon
// .icon-gas                 - gas icon
// .icon-hardrock            - hardrock
// .icon-renewables          - renewables icon
// .icon-book                - book icon (for glossary)
// .icon-map                 - map icon
// .icon-cloud               - download icon
// .icon-close-x             - close button
// .icon-chevron-sm          - small chevron, defaults right
// .icon-chevron-sm-right    - small chevron right
// .icon-chevron-sm-left     - small chevron left
// .icon-chevron-sm-up       - small chevron up
// .icon-chevron-sm-down     - small chevron down
// .icon-chevron-lg          - large chevron, defaults right
// .icon-chevron-lg-right    - large chevron right
// .icon-chevron-lg-left     - large chevron left
// .icon-chevron-lg-up       - large chevron up
// .icon-chevron-lg-down     - large chevron down
// .icon-dash-sm             - small dash
// .icon-dash-lg             - large dash
// .icon-plus-sm             - small plus
// .icon-plus-lg             - large plus
// .icon-search              - search icon
//
// Markup:
// <i style="font-size: 2rem; color: #4a4a4a;" class="icon {{modifier_class}}"></i>
// <i style="font-size: 2rem; color: #1478a6;" class="icon {{modifier_class}}"></i>
//
// Styleguide webfont

// Generated by Glyphter (http://www.glyphter.com) on  Fri Nov 06 2015

[class*='icon-']:before {
  display: inline-block;
  font-family: 'eiti';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  // added by EITI developers
  vertical-align: text-bottom;
}

.icon-padded:before {
  padding-right: $base-padding-lite;
}

.icon-padded_after:before {
  padding-left: $base-padding-lite;
}

$icon-gold: '\0041';
$icon-close-x: '\0042';
$icon-renewables: '\0043';
$icon-book: '\0044';
$icon-geo: '\0045';
$icon-chevron-sm: '\0046';
$icon-copper: '\0047';
$icon-map: '\0048';
$icon-dash-lg: '\0049';
$icon-dash-sm: '\004A';
$icon-cloud: '\004B';
$icon-plus-lg: '\004C';
$icon-minerals: '\004D';
$icon-oil: '\004E';
$icon-wind: '\004F';
$icon-coal: '\0050';
$icon-hardrock: '\0051';
$icon-plus-sm: '\0052';
$icon-gas: '\0053';
$icon-chevron-lg: '\0054';
$icon-bars: '\0056';
$icon-iron: '\0057';

.icon-gold:before { content: $icon-gold; }
.icon-close-x:before { content: $icon-close-x; }
.icon-renewables:before { content: $icon-renewables; }
.icon-book:before { content: $icon-book; }
.icon-geo:before { content: $icon-geo; }
[class*='icon-chevron-sm-']:before,
.icon-chevron-sm:before {
  content: $icon-chevron-sm;
}
.icon-copper:before { content: $icon-copper; }
.icon-map:before { content: $icon-map; }
.icon-dash-lg:before { content: $icon-dash-lg; }
.icon-dash-sm:before { content: $icon-dash-sm; }
.icon-cloud:before { content: $icon-cloud; }
.icon-plus-lg:before { content: $icon-plus-lg; }
.icon-minerals:before { content: $icon-minerals; }
.icon-oil:before { content: $icon-oil; }
.icon-wind:before { content: $icon-wind; }
.icon-coal:before { content: $icon-coal; }
.icon-hardrock:before { content: $icon-hardrock; }
.icon-plus-sm:before { content: $icon-plus-sm; }
.icon-gas:before { content: $icon-gas; }
[class*='icon-chevron-lg-']:before,
.icon-chevron-lg:before {
  content: $icon-chevron-lg;
}
.icon-bars:before { content: $icon-bars; }
.icon-iron:before { content: $icon-iron; }
.icon-chevron-sm-left:before,
.icon-chevron-lg-left:before {
  @include rotate(180deg, 2);
}
.icon-chevron-sm-down:before,
.icon-chevron-lg-down:before {
  @include rotate(90deg, 1);
}
.icon-chevron-sm-up:before,
.icon-chevron-lg-up:before {
  @include rotate(270deg, 3);
}
