// ============================================================
//          Dimensions                                  
// ------------------------------------------------------------


//**
// Mixin: size 
// Shorthand for insert Dimensions. Default in PX, opt in Percent
// Entering only one Value the Dimension Squared, with two Values
// the width and height are written.
//
// @mixin     size
// @param     $size {number} Width and or Height
// @usage     +size($size, $value)
// @eg        +size(200 100)
//**
@mixin size($size)
  @if length($size) == 2
    $width  : nth($size,1)
    $height : nth($size,2)

    @if unitless($width)
      $width: $width + 0px
    @if unitless($height)
      $height: $height + 0px

    height: $height
    width: $width

  @if length($size) == 1
    @if unitless($size)
      $size: $size + 0px

    height: $size
    width: $size



//**
// Mixin: align-height 
// Shorthand to Align Height with Lineheight
//
// @mixin     align-height
// @param     $height {value} Heightsize
// @param     $factor {number} Multiplicator for Lineheight (default: 1)
// @usage     +align-height($height,$factor)
// @eg        +align-height(20px)
//**
@mixin align-height($height,$factor: 1)
  $line-height : $height * $factor
  $height      : $height

  @if unitless($height)
    $height      : $height + px
    $line-height : $line-height + px

  height      : $height
  line-height : $line-height


//**
// Mixin: central 
// Center and Middle a Element in a box
// Entering only one Value the Dimension Squared, with two Values
// the width and height are written.
//
// @mixin     central
// @param     $size {number} Width and or Height
// @usage     +central($size)
// @eg        +central(200 100)
//**
@mixin central($size)
  @if length($size) == 2
    $width  : nth($size,1)
    $height : nth($size,2)
    
    +size($width $height)

    @if unitless($height)
      $height: $height + 0px
    line-height: $height
    text-align: center

  @if length($size) == 1
    $width  : $size
    $height : $size

    +size($size)

    @if unitless($height)
      $height: $height + 0px
    line-height: $height
    text-align: center

//**
// Mixin: align-fontsize 
// Shorthand to Align Fontsize with Lineheight
//
// @mixin     align-fontsize
// @param     $size {value} Fontsize
// @param     $factor {number} Multiplicator for Lineheight (default: 1)
// @usage     +align-fontsize($size,$factor)
// @eg        +align-fontsize(14px)
//**
@mixin align-fontsize($size,$factor: 1)
  $line-height : $size * $factor
  $size        : $size

  @if unitless($size)
    $size        : $size + px
    $line-height : $line-height + px

  font-size   : $size
  line-height : $line-height


//**
// Mixin: calc 
// Shorthand for the CSS3 Calc function
//
// @mixin     calc
// @param     $property {string} The Property that calculated
// @param     $expression {string} The Formula
// @usage     +calc($property,$expression)
// @eg        +calc(width, '100% / 2 - 2 * 3 px') 
//**
@mixin calc($property, $expression) 
  #{$property}: -moz-calc(#{$expression}) 
  #{$property}: -o-calc(#{$expression}) 
  #{$property}: -webkit-calc(#{$expression}) 
  #{$property}: calc(#{$expression}) 

//**
// Mixin: circle 
// Shorthand for a perfect circle
//
// @mixin     circle
// @param     $size {value} The Size of the Circle
// @usage     +circle($size)
//**
@mixin circle($size)
  @if unitless($size)
    $size: $size + 0px
  +border-radius($size * 2)

//**
// Mixin: circlealign 
// Shorthand for a perfect circle that align elements in the middle
//
// @mixin     circlealign
// @param     $size {value} The Size of the Circle
// @usage     +circlealign($size)
//**
@mixin circlealign($size)
  +central($size)
  +circle($size)

//**
// Mixin: ratio 
// A Floating Grid System
//
// @mixin     ratio
// @param     $unit {list} Box Width [Unit-Width: Colums MaxColums (Grid) | Or Width]
// @param     $ratio {list} The Ratio between width and height [:default = false]
// @param     $sel {string} Target selector [:default = false]
// @param     $scale {string} Background Image Scaling (background-size) [:default = false]
// @usage:    +ratio($unit,$ratio,$sel)
//          ...
//**
@mixin ratio($unit: 16 16, $ratio: false, $sel: false, $scale: false)
  $boxSize : null
  position: relative
  height: 0
  @if $ratio != false
    @if length($unit) == 2
      $boxSize : grid-unit(nth($unit,1), nth($unit,2))
    @if length($unit) == 1
      $boxSize : $unit
      width: $unit + 0%
    $ratioCalc : ($boxSize / nth($ratio,1)) * nth($ratio,2)
    padding-bottom: $ratioCalc + 0%
  @else
    @if length($unit) == 2
      padding-bottom: grid-unit(nth($unit,1), nth($unit,2))
    @if length($unit) == 1
      padding-bottom: $unit + 0%
  
  @if $sel == false
    & > *
      display: block
      position: absolute
      height: 100% !important
      width: 100% !important
      left: 0
      top: 0
      margin: 0
      padding: 0
      @if $scale != false
        +background-size($scale)
  @else
    #{$sel}
      display: block
      position: absolute
      height: 100% !important
      width: 100% !important
      left: 0
      top: 0
      margin: 0
      padding: 0
      @if $scale != false
        +background-size($scale)


//**
// Mixin: middle 
// Middle the inner Element
//
// @mixin     middle
// @usage:    +middle
//**
@mixin middle
  &:before
    content: ''
    display: inline-block
    height: 100%
    vertical-align: middle

  > div, > span, .middle
    display: inline-block
    vertical-align: middle