// Font families
//
// <code class="block">@mixin text <br/>@mixin title</code>
// <ul>
// <li>.title: sets a title font (default: Montserrat)</li>
// <li>.text: sets a text font (default: Raleway)</li>
// </ul>
//
// Markup:
// <h2>This is an example of a regular title</h2>
// <p>This is an example of a regular paragraph</p>
// <h2 class="title">This is an example of a prettier title</h2>
// <p class="text">This is an example of a prettier paragraph</p>
//
// Styleguide Fonts.afamilies
@mixin title() {
  font-family: $titleFontFamily, Arial, Helvetica, sans-serif;
}
.title {
  @include title();
}
@mixin text() {
  font-family: $textFontFamily, Arial, Helvetica, sans-serif;
}
.text {
  @include text();
}

// Relative fontsizes
//
// <code class="block">@mixin th(th)<br/>@mixin tb(bigger)<br/>@mixin ts(smaller)</code>
// Use these classes to quicky change the fontsize <br/>
// <ul>
//  <li>.tb5, .th0 - largest font</li>
//  <li>.tb4, .th1 - second largest font</li>
//  <li>.tb2, .th3 - fourth largest font</li>
//  <li>.ts1 - first font smaller than normal</li>
//  <li>.ts2 - second font smaller than normal</li>
//  <li>.ts3 - smallest font</li>
// </ul>
//
// Markup:
// <div>
//  <p class="tb3">This is a font size</p>
//  <p class="tb1">This is a font size</p>
//  <p class="ts1">This is a font size</p>
//  <p class="ts3">This is a font size</p>
// </div>
//
//
// Styleguide Fonts.size

// Source: http://type-scale.com/

/* ============================================================================
  Really complex way of creating functions and mixins for the fontSizes
    th(x), tb(x), ts(x) -> functions that return the fontsizes
    textHeader
    textBigger
    textSmaller
============================================================================ */
@mixin th($key){
  font-size: th($key);
}
@each $th_key in $th_keys {
  .th#{$th_key} {
    @include th($th_key);
  }
}

@mixin tb($key){
  font-size: tb($key);
}
@each $tb_key in $tb_keys {
  .tb#{$tb_key} {
    @include tb($tb_key);
  }
}

@mixin ts($key){
  font-size: ts($key);
}
@each $ts_key in $ts_keys {
  .ts#{$ts_key} {
    @include ts($ts_key);
  }
}

// Quick fontsizes
//
// <code class="block">@mixin smaller<br/>@mixin bigger</code>
// <ul>
// <li>.smaller: makes the font slightly smaller</li>
// <li>.bigger: makes the font slightly bigger</li>
// </ul>
//
// Markup:
// <p>Text that holds <span class="smaller">some smaller text</span> inside of it</p>
// <p>Text that holds <span class="bigger">some bigger text</span> inside of it</p>
//
// Styleguide Fonts.sizequick
@mixin smaller() {
  @include ts(1);
}
.smaller {
  @include smaller();
}
@mixin bigger() {
  @include tb(1);
}
.bigger {
  @include bigger();
}

// Font effects
//
// <ul>
// <li>.thin: makes the fontweight 100</li>
// <li>.light: makes the fontweight 300</li>
// <li>.bold: makes the fontweight bold</li>
// <li>.note: makes font smaller and cursive</li>
// <li>.lowercase: makes text all lowercase</li>
// <li>.uppercase: makes text all caps</li>
// <li>.capitalize: capitalizes text</li>
// </ul>
//
// Markup:
// <p class="text">Text that holds <span class="thin">very thin text</span> inside of it</p>
// <p class="text">Text that holds <span class="light">Quite thin text</span> inside of it</p>
// <p class="text">Text that holds <span class="note">Some sort of note</span> inside of it</span></p>
//
// Styleguide Fonts.effects
.thin {
  font-weight: 100;
}
.light {
  font-weight: 300;
}
.bold {
  font-weight: bold;
}
.uppercase {
  text-transform: uppercase !important;
}
.capitalize {
  text-transform: capitalize !important;
}
.lowercase {
  text-transform: lowercase !important;
}
@mixin note() {
  @include smaller();
  font-style: italic;
}
.note {
  @include note();
}