<article class="demo-desc">
  <h1>Sass flat-button generator</h1>
  <p>A Sass mixin that creates flat buttons with custom icons in variable positions. Follow me
    <a href='https://twitter.com/awesomephant'>@awesomephant</a> for updates.
  </p>
</article>
<section class='demo'>
<a href='#' class='danger'>Delete that thing.</a>  
<a href='#' class='power'>Turn on the energy.</a>  
<a href='#' class='signup'>Sign Up</a>
<a href='#' class='save'>Save</a>
<a href='#' class='fb'>Like us on Facebook</a>
<a target='blank' href='https://twitter.com/awesomephant' class='twitter'>Follow me @awesomephant!</a>
</section>
<article class='demo-desc'>
<h2>Features</h2>
  <ul>
    <li>Variable background color</li>
    <li>Custom icons left or right of the text</li>
    <li>No extra markup, uses pseudo-elements.</li>
    <li>Optional rounded corners</li>
  </ul>
  <h2>Usage</h2>
  <code>
    <pre>
 // Arguments: background-color; rounded-corners, icon, icon-position     
.signup  { @include button($blue, false, 'tick', left)  ;}</pre>
  </code>
</article>

@import "compass/css3";

@import url(http://weloveiconfonts.com/api/?family=entypo);

/*
================
The Icon-object™
================

The Icon-Object™ that holds the unicode entities for our icons, so we can reference them by name instead of looking up the hex code every time we need one.
*/

$icons: ('save' '\1F4BE'),
        ('delete' '\12as'),
        ('fb' '\F30E'),
        ('twitter' '\F309'),
        ('bolt' '\26A1'),
        ('danger' '\26A0'),
        ('tick' '\2713');
;

/*
Color variables are imported from another pen, just to make stuff easier to read
*/


/*
=======================
The Button Mixin.======
=======================

=It takes 3 arguments:=
- the background-color ($bg),
in our case we will pass it the color vars we defined above.

- the icon ($icon),
takes one of the named icons from the Icon-Object™

- the icon position ($iconPosition)
Vald values are 'left' and 'right'

=And does fancy stuff=
1. Figure out the lightness of the passed background-color via the lightness() function and set either a dark or a light text color.

2. Loop over the Icon-Object™ until the name matches the passed $icon parameter and then

  2.1 If $iconPosition == right select the :after element and set the corresponding unicode entity as the 'content' value. 
*/

@mixin button($bg, $rounded: false, $icon:none, $iconPosition: right){
  $color: black;
  padding: 1.2em 2.3em;
  /*
  Setting the color based on the background, as described above (1)
  */ 
  @if lightness($bg) > 68% {
    $color: desaturate(darken($bg, 35), 70);
    &:hover, &:focus {
      background: darken($bg, 5);
      color: darken($color, 5);
    }
  }
  @else {
    $color: lighten($bg, 35);
    &:hover, &:focus {
      background: darken($bg, 5);
      color: lighten($color, 5);
    }
  }
  
  /*
  Adding the icons, see (2)
  */
  @each $thing in $icons{
    @if nth($thing, 1) == $icon {
      @if $iconPosition == right {  
        padding-right: 3.5em;   
        &:after {
           content: nth($thing, 2);
           right: 1.5em;
        }
      }
       
      @if $iconPosition == left {  
        padding-left: 3.5em;     
        &:before {
           content: nth($thing, 2);
           left: 1.5em;
        }
      }
    }
  }
  
  color: $color;
  display: inline-block;
  background: $bg;
  @include transition(.3s);
  font:{
    family: sans-serif;
    weight: 800;
    size: .8em;
  }
  text:{
    transform: uppercase;
    decoration: none;
  }
  @if $rounded == true {border-radius: .7em};
  border-bottom: .2em solid darken($bg, 7);
  position: relative;
      
  &:before, &:after{
    display: inline-block;
    font-family: entypo;
    position: absolute;    
  }
          
  &:active {
    @include transform(scale(.92));
  }
  &:hover, &:focus {
            @if $rounded == true {border-radius: .5em;}
    box-shadow: 0 0 0 5px lighten($bg, 20);
  }
}

/*
Calling the Mixin for the different buttons
*/
.danger  { @include button($red, false, 'danger')   ;}
.signup  { @include button($blue, false, 'tick', left)  ;}
.save    { @include button($green, false, 'save', right);}
.fb      { @include button($fb-blue, false, 'fb', left); }
.twitter { @include button($twitter-blue, false,        'twitter', left); }
.power { @include button($yellow, 'bolt', right); }

/*
Base Styles
*/
.demo a {margin: 1em;}