// Font Custom - icon webfonts made simple
// ------------------------------------------------------------------

// Placeholder selector to manage font family rules
%fontcustom {
  font-family: "<%= @name %>";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

// Font-face rules
@font-face {
  font-family: "<%= @name %>";
  src: url("/fonts/<%= @path %>.eot?#iefix") format("embedded-opentype"),
       url("/fonts/<%= @path %>.woff") format("woff"),
       url("/fonts/<%= @path %>.ttf") format("truetype"),
       url("/fonts/<%= @path %>.svg#<%= @name %>") format("svg");
  font-weight: normal;
  font-style: normal;
}

// `a` tag supporting rules
a [class^="icon-"], a [class*=" icon-"] {
  display: inline-block;
  text-decoration: inherit;
}

// How to use 
// ------------------------------------------------------------------
// Below are generated placeholder class that can be easily extended throughout your project. We at the Toadstool
// team believe that CSS rules should be extended in your CSS, not the DOM.

// To use, from your CSS selector, simply extend one of the following rules like so:
// .github {
//   foo: bar;
//   @extend %icon-github;
// }

// Icon classes
<% @classes.each_with_index do |name, index| %>
%icon-<%= name %>:before { content: "\<%= (61696+index).to_s(16) %>"; @extend %fontcustom; }<% end %>