// Layout Tools v 1.2

// Sample Usage:
// #container {
//   @include border-radius(5px);
// }

// GRID

// = The 1Kb Grid = (slightly modified)
@mixin grid($columns:12, $column_width:60, $column_margin:20) {
  .row, section {
    overflow: hidden;
    margin: 0 auto;
    width: #{$columns * $column_width + $columns * $column_margin}px;
  
    .row {
      margin: 0 #{$column_margin - $column_margin * 1.5}px;
      display: inline-block;
      width: auto; 
    }
  
    .col {
      margin: 0 #{$column_margin / 2}px;
      overflow: hidden;
      float: left;
      display: inline;
      width: #{$column_width * 1 + $column_margin * (1 - 1)}px;

      @for $i from 2 through $columns {
        &.span-#{$i} {
          width: #{$column_width * $i + $column_margin * ($i - 1)}px;
          //&:hover
          //  outline: 1px solid red
        }
      }
    }
  }
}

// TEST
@mixin gridTest($columns:12, $column_width:60, $column_margin:20) {
  row {
    display: block;
    overflow: hidden;
    margin: 0 auto;
    width: #{$columns * $column_width + $columns * $column_margin}px;
  
    row {
      margin: 0 #{$column_margin - $column_margin * 1.5}px;
      display: inline-block;
      width: auto; 
    }
  
    col {
      margin: 0 #{$column_margin / 2}px;
      overflow: hidden;
      float: left;
      display: inline;
      width: #{$column_width * 1 + $column_margin * (1 - 1)}px;
    }
    @for $i from 2 through $columns {
      col#{$i} {
        margin: 0 #{$column_margin / 2}px;
        overflow: hidden;
        float: left;
        display: inline;
        width: #{$column_width * $i + $column_margin * ($i - 1)}px;
        //&:hover
        //  outline: 1px solid red
      }
    }
  }
}

// CSS RESET

@mixin css-clear($boxmodel:'border-box') {
  * {
    @include box-model($boxmodel); 
  }
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
  }
  article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
  }
  table {
    border-collapse:collapse;
    border-spacing:0;
  }
  fieldset,img { 
    border:0;
  }
  address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
  }
  ol,ul {
    list-style:none;
  }
  caption,th {
    text-align:left;
  }
  h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
  }
  q:before,q:after {
    content:'';
  }
  abbr,acronym { 
    border:0;
  }
}

@mixin css-reset($size:14px, $boxmodel:'border-box') {
  @include css-clear($boxmodel);
  body {
    font-size: $size;
    line-height: 1.3em;
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
  }
  h1 {
    font-size: 175%;
  }
  h2 {
    font-size: 155%;
  }
  h3 {
    font-size: 135%;
  }
  h4 {
    font-size: 120%;
  }
  h5 {
    font-size: 105%;
  }
  h6 {
    font-size: 100%;
  }
  p, blockquote, h1, h2, h3, h4, h5, h6, pre, ol, ul {
    padding: 0.5em 0;
  }
  b, strong {
    font-weight: bold;
  }
  i, em {
    font-style: italic;
  }
  ul, ol {
    padding-left: 2em;
  }
  ul {
    list-style: circle;
  }
  ol {
    list-style: decimal;
  }
  blockquote {
    padding-left: 4em;
  }
}

@mixin debug-hover($color:'red') {
  &:hover {
    outline: 1px solid $color;
  }
}


// Vertical Background Gradient
@mixin vbg-gradient($fc: #FFF, $tc: #FFF) {
  background: $fc;
  background: -webkit-gradient(linear, left top, left bottom, from($fc), to($tc));
  background: -moz-linear-gradient(top, $fc, $tc);
}

// Vertical Background Gradient, 3 color
@mixin vbg-gradient3($fc: #FFF, $mc: #FFF, $tc: #FFF) {
  background: $fc;
  background: -webkit-gradient(linear, left top, left bottom, from($fc), color-stop(0.5, $mc), to($tc));
  background: -moz-linear-gradient(top, $fc, $mc, $tc);
}

// Horizontal Background Gradient
@mixin hbg-gradient($fc: #FFF, $tc: #FFF) {
  background: $fc;
  background: -webkit-gradient(linear, left top, right top, from($fc), to($tc));
  background: -moz-linear-gradient(left, $fc, $tc);
}


// Box Model
@mixin box-model($type:'border-box') {
  box-sizing: $type;
  -moz-box-sizing: $type;
  -ms-box-sizing: $type;
  -webkit-box-sizing: $type;
}

@mixin hbox ($boxAlign:stretch, $boxPack:left) {
  @include display-box();
  @include box-orient(horizontal);
  @include box-align($boxAlign);
  @include box-pack($boxPack);
}

@mixin vbox ($boxAlign:stretch, $boxPack:left) {
  @include display-box();
  @include box-orient(vertical);
  @include box-align($boxAlign);
  @include box-pack($boxPack);
}

@mixin display-box () {
  display: box;
  display: -webkit-box;
  display: -moz-box;
}


@mixin box-flex ($s: 0) {
  box-flex: $s;
  -webkit-box-flex: $s;
  -moz-box-flex: $s;
}


@mixin box-orient($dir:horizontal) {
  box-orient: $dir;
  -webkit-box-orient: $dir;
  -moz-box-orient: $dir;
}

@mixin box-pack($dir:left) {
  box-pack: $dir;
  -webkit-box-pack: $dir;
  -moz-box-pack: $dir;
}

@mixin box-align($dir:stretch) {
  box-align: $dir;
  -webkit-box-align: $dir;
  -moz-box-align: $dir;
}

@mixin box-lines($rows:single) {
  box-lines: $rows;
  -webkit-box-lines: $rows;
  -moz-box-lines: $rows;
}


// SHADOWS

// TEXT shadow
@mixin text-shadow($props) {
  text-shadow: $props;
  -moz-text-shadow: $props;
  -webkit-text-shadow: $props; }

// BOX shadow
@mixin box-shadow($props) {
  box-shadow: $props;
  -moz-box-shadow: $props;
  -webkit-box-shadow: $props; }

@mixin inset-box-shadow ($h: 0px, $v: 0px, $b: 4px, $c: #333) {
  box-shadow: inset $h $v $b $c;
  -moz-box-shadow: inset $h $v $b $c;
  -webkit-box-shadow: inset $h $v $b $c;
}

@mixin border-as-shadow($tlc:#000, $brc:#FFF, $width:1px, $style:solid) {
  border: {
    top: $width $style $tlc;
    left: $width $style $tlc;
    right: $width $style $brc;
    bottom: $width $style $brc;
  }; 
}


// BORDER RADIUS

// All corners
@mixin border-radius($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius; }

// Top Right
@mixin border-radius-top-right($radius) {
  @include border-radius-top-right($radius); }

// Bottom Right
@mixin border-radius-bottom-right($radius) {
  @include border-radius-bottom-right($radius); }

// Bottom Left
@mixin border-radius-bottom-left($radius) {
  @include border-radius-bottom-left($radius); }

// Top Left
@mixin border-radius-top-left($radius) {
  @include border-radius-top-left($radius); }

// Top
@mixin border-radius-top($radius) {
  @include border-radius-top-left($radius);
  @include border-radius-top-right($radius); }

// Right
@mixin border-radius-right($radius) {
  @include border-radius-top-right($radius);
  @include border-radius-bottom-right($radius); }

// Bottom
@mixin border-radius-bottom($radius) {
  @include border-radius-bottom-right($radius);
  @include border-radius-bottom-left($radius); }

// Left
@mixin border-radius-left($radius) {
  @include border-radius-top-left($radius);
  @include border-radius-bottom-left($radius); }

// Let's setup the rules so we don't have to repeat ourselves
// These are mixins for this mixin and are re-used above
@mixin border-radius-top-right($radius) {
  border-top-right-radius: $radius;
  -moz-border-radius-topright: $radius;
  -webkit-border-top-right-radius: $radius; }

@mixin border-radius-bottom-right($radius) {
  border-bottom-right-radius: $radius;
  -moz-border-radius-bottomright: $radius;
  -webkit-border-bottom-right-radius: $radius; }

@mixin border-radius-bottom-left($radius) {
  border-bottom-left-radius: $radius;
  -moz-border-radius-bottomleft: $radius;
  -webkit-border-bottom-left-radius: $radius; }

@mixin border-radius-top-left($radius) {
  border-top-left-radius: $radius;
  -moz-border-radius-topleft: $radius;
  -webkit-border-top-left-radius: $radius; }

@mixin animate($name, $dur:1s, $easing:ease-in-out, $iter:infinite, $dir:alternate) {
  -webkit-animation-name: $name;
  -webkit-animation-duration: $dur;
  -webkit-animation-direction: $dir;
  -webkit-animation-iteration-count: $iter;
  -webkit-animation-timing-function: $easing;
}

@mixin transition($info:all 250 ease-out) {
  -webkit-transition: $info;
  -moz-transition: $info;
  -o-transition: $info;
  transition: $info;
}

@mixin transform( $s:'rotate(45deg)') {
  -moz-transform: $s;
  -webkit-transform: $s;
  -o-transform: $s;
  transform: $s;
}

@mixin box-attrs() {
  *[box-flex="0"]         { @include box-flex(0); }
  *[box-flex="1"]         { @include box-flex(1); }
  *[box-flex="2"]         { @include box-flex(2); }
  *[box-flex="3"]         { @include box-flex(3); }
  *[box-flex="4"]         { @include box-flex(4); }
  *[box-flex="5"]         { @include box-flex(5); }
  *[box-flex="6"]         { @include box-flex(6); }
  *[box-flex="7"]         { @include box-flex(7); }
  *[box-flex="8"]         { @include box-flex(8); }
  *[box-flex="9"]         { @include box-flex(9); }
  *[box-flex="10"]        { @include box-flex(10); }

  *[box-align="start"]    {  @include box-align(start); }
  *[box-align="center"]   {  @include box-align(center); }
  *[box-align="end"]      {  @include box-align(end); }
  *[box-align="baseline"] {  @include box-align(baseline); }
  *[box-align="stretch"]  {  @include box-align(stretch); }

  *[box-pack="start"]     {  @include box-pack(start); }
  *[box-pack="center"]    {  @include box-pack(center); }
  *[box-pack="end"]       {  @include box-pack(end); }
  *[box-pack="justify"]   {  @include box-pack(justify); }
  *[box-pack="stretch"]   {  @include box-pack(justify); }

  *[box-lines="single"]   {  @include box-lines(single); }
  *[box-lines="multiple"] {  @include box-lines(multiple); }

  *[box-orient="horizontal"] {  @include box-orient(horizontal); }
  *[box-orient="vertical"]   {  @include box-orient(vertical); }

}

// Font stuff

@mixin web-font($family, $url, $format:'truetype') {
  @font-face {
    font-family: $family;
    src: url($url) format($format);
  }
}

// Color stuff

@function strengthen($color, $multiplier: 1, $reversed: $reversed-text) {
  @if $reversed {
    @return lighten($color, 20% * $multiplier);
  } @else {
    @return darken($color, 20% * $multiplier);
  }
}

@function soften($color, $multiplier: 1, $reversed: $reversed-text) {
  @if $reversed {
    @return darken($color, 20% * $multiplier);
  } @else {
    @return lighten($color, 20% * $multiplier);
  }
}