//
// Convert px to rem
//

// Function for converting a px based font-size to rem.
@function parseInt($n) {
  @if ($n == !important) {
    @return !important
  } @else {
    $rem-size: $n / 14px;
    @return #{$rem-size}rem;
  }
}

// e.g. @include px-to-rem(padding, 8px 20px);
@mixin px-to-rem($property, $values) {
  $rem: ();
  @each $value in $values {
    @if index((0, 0px), $value) or $value == auto {
      $rem: append($rem, $value);
    }
    @else {
      $rem: append($rem, parseInt($value));
    }
  }
  #{$property}: $rem;
}
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}
@mixin transform($transforms) {
  -moz-transform: $transforms;
  -o-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}
@mixin border-radius($radius: 4px) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}
// e.g. @include add-border(3px, $m-color-light, all);
@mixin add-border($size, $color, $position){
  @if $position == 'all'{
    border:$size solid $color;
  } @else if $position == 'top'{
    border-top:$size solid $color;
  } @else if $position == 'bottom'{
    border-bottom:$size solid $color;
  } @else if $position == 'right'{
    border-right:$size solid $color;
  } @else if $position == 'left'{
    border-left:$size solid $color;
  } @else if $position == 'top-bottom'{
    border-top:$size solid $color;
    border-bottom:$size solid $color;
  } @else if $position == 'right-left'{
    border-left:$size solid $color;
    border-right:$size solid $color;
  } @else if $position == 'top-left'{
    border-left:$size solid $color;
    border-right:$size solid $color;
  } @else if $position == 'top-right'{
    border-left:$size solid $color;
    border-right:$size solid $color;
  } @else if $position == 'bottom-left'{
    border-left:$size solid $color;
    border-right:$size solid $color;
  } @else if $position == 'bottom-right'{
    border-left:$size solid $color;
    border-right:$size solid $color;
  }
}

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}


//
// MEDIA QUERY
//
@mixin mobile-xs{
  @media(max-width:479px){
    @content;
  }
}
@mixin mobile{
  @media(min-width:480px){
    @content;
  }
}
@mixin tablet{
  @media(min-width:768px){
    @content;
  }
}
@mixin desktops{
  @media(min-width:992px){
    @content;
  }
}
@mixin large-desktops{
  @media(min-width:1200px){
    @content;
  }
}