// rem fallback - credits: http://zerosixthree.se/

@function calculateEm($size) {
  $remSize: $size / $body-size;
  @return $remSize * 1em;
}

@function caculatePercen($size){
  $convert: $size / $content-size;
  @return $convert * 100%;
}

@mixin w-p($type, $size){
  @if $type == 'width' {
    width: caculatePercen($size);
  }
  @else if $type == 'padding-top'{
    padding-top: caculatePercen($size);
  }
  @else if $type == 'padding-bottom'{
    padding-bottom: caculatePercen($size);
  }
  @else if $type == 'padding-left'{
    padding-left: caculatePercen($size);
  }
  @else if $type == 'padding-right'{
    padding-right: caculatePercen($size);
  }
  @else if $type == 'padding'{
    padding: caculatePercen($size);
  }
  @else if $type == 'margin-top'{
    margin-top: caculatePercen($size);
  }
  @else if $type == 'margin-bottom'{
    margin-bottom: caculatePercen($size);
  }
  @else if $type == 'margin-left'{
    margin-left: caculatePercen($size);
  }
  @else if $type == 'margin-right'{
    margin-right: caculatePercen($size);
  }
  @else if $type == 'margin'{
    margin: caculatePercen($size);
  }
}

@mixin font-size($size) {
  // font-size: $size;
  font-size: calculateEm($size);
}

// center vertically and/or horizontally an absolute positioned element

@mixin center($xy:xy) {
  @if $xy == xy {
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    @include transform(translateX(-50%) translateY(-50%));
  }
  @else if $xy == x {
    left: 50%;
    right: auto;
    @include transform(translateX(-50%));
  }
  @else if $xy == y {
    top: 50%;
    bottom: auto;
    @include transform(translateY(-50%));
  }
}

// border radius

@mixin border-radius($radius:.25em) {
  border-radius: $radius;
}

// antialiasing mode font rendering

@mixin font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

//Gray image
@mixin grayscale( $toggle: "on", $percentage: 1 ) {
    $svg-type: "matrix";
    $svg-value: "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0";
    $ie-alpha: alpha(#{"opacity="}round( $percentage * 100 ) );

    @if $percentage != 1 {
        $svg-type: "saturate";
        $svg-value: $percentage;
    }

    @if $toggle == "on" {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'#{$svg-type}\' values=\'#{$svg-value}\'/></filter></svg>#grayscale"); // Firefox 10+, Firefox on Android
        filter: gray $ie-alpha; // IE6-9
        -webkit-filter: grayscale( round( $percentage * 100% ) ); // Chrome 19+, Safari 6+, Safari 6+ iOS
        filter: grayscale( round( $percentage * 100% ) ); // Catch-all
    }

    @if $toggle == "off" {
        @if $svg-type == "saturate" {
            filter: none;
        } @else {
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        }
        -webkit-filter: grayscale(0%);
        filter: grayscale(0);
    }
}

//transition
@mixin transition($ms: 'slow'){
  @if $ms == 'fast' {
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
  }@else{
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
  }
}

// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html 
//
// grayscale      ex: filter: grayscale(100%);
// sepia          ex: filter: sepia(100%);
// saturate       ex: filter: saturate(0%);
// hue-rotate     ex: filter: hue-rotate(45deg);
// invert         ex: filter: invert(100%);
// brightness     ex: filter: brightness(15%);
// contrast       ex: filter: contrast(200%);
// blur           ex: filter: blur(2px);

@mixin filter($filter-type,$filter-amount) {
  -webkit-filter: $filter-type+unquote('(#{$filter-amount})');
  -moz-filter: $filter-type+unquote('(#{$filter-amount})');
  -ms-filter: $filter-type+unquote('(#{$filter-amount})');
  -o-filter: $filter-type+unquote('(#{$filter-amount})');
  filter: $filter-type+unquote('(#{$filter-amount})');
}

//Create arrow
@mixin arrow($type: 'up', $degre: '50px', $color: '#2f2f2f'){
    width: 0px;
    height: 0px;
    @if $type == 'up' {
      border-left: $degre solid transparent;
      border-right: $degre solid transparent;
      border-bottom: $degre solid $color;
    }
    @if $type == 'down' {
      border-left: $degre solid transparent;
      border-right: $degre solid transparent;
      border-top: $degre solid $color;
    }
    @if $type == 'right' {
      border-bottom: $degre solid transparent;
      border-top: $degre solid transparent;
      border-left: $degre solid $color;
    }
    @if $type == 'left' {
      border-bottom: $degre solid transparent;
      border-top: $degre solid transparent;
      border-right: $degre solid $color;
    }
}