//============================================================
// Positioning // Sizing
//============================================================

//Define Size of element (One value if width and height are the same)
@mixin size($width,$height:$width)
  width: $width
  height: $height

@mixin flexCenter
  display: flex
  justify-content: flex-start
  align-items: center

@mixin flexColumn
  display: flex
  flex-direction: column

@mixin relative 
  position: relative

@mixin absolute
  position: absolute

@mixin fixed
  position: fixed

@mixin center
  margin: 0 auto

//Set position coordinates
@mixin pos($top:0,$right:0,$bottom:0,$left:0)
  @if $top != 0
    top: $top
  @if $left != 0
    left: $left
  @if $right != 0
    right: $right
  @if $bottom != 0
    bottom: $bottom



//============================================================
// Shape
//============================================================

@mixin circle
  border-radius: 50%



//============================================================
// Typography
//============================================================


// Dynamic font-size based on min and max container size and min and max font-size
@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) 
  $u1: unit($min-vw)
  $u2: unit($max-vw)
  $u3: unit($min-font-size)
  $u4: unit($max-font-size)

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 
    & 
      font-size: $min-font-size
      @media screen and (min-width: $min-vw) 
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}))
      
      @media screen and (min-width: $max-vw) 
        font-size: $max-font-size  




//============================================================
// Utilities
//============================================================

@mixin initPseudo
  content: ""
  position: absolute

// Strip unit from a value (Ex 24px => 24)  
@function strip-unit($value) 
  @return $value / ($value * 0 + 1)


//Set opacity with IE support  
@mixin opacity($opacity) 
  opacity: $opacity
  filter: alpha(opacity=($opacity * 100)) // IE
 


//============================================================
// Transform
//============================================================