/* Media Queries Mixin */
@mixin mobile {
  @media (max-width: $screen-xs-max) {
    @content;
  }
}
@mixin ipad {
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    @content;
  }
}
@mixin laptop {
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    @content;
  }
}
@mixin desktop {
  @media (min-width: $screen-lg-min) {
    @content;
  }
}

/* Font size in REM with PX callbacl */
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return  $remSize * 1rem;
}

/* Font size in REM with PX callback */
@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

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

/*Transition Scale */
@mixin transition-scale($args...) {
  -webkit-transform: $args;
  -ms-transform: $args;
  -o-transform: $args;
  -moz-transform: $args;
  transform: $args;
}

/* Opacity Mixin CrossBrowser */
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

/* Background Image Mixin */
$image-dir: "../images/main/";

@mixin background-image($filename, $position: 0 0, $repeat: no-repeat) {
  background: {
    image: url(#{$image-dir}#{$filename});
    position: $position;
    repeat: $repeat;
  }
}

/* Font Face Mixin */
$font-dir: "../fonts/";

@mixin font-face($family, $fontname, $style: normal, $weight: normal) {

  @font-face {
    font-family: $family;
    src: url('#{$font-dir}#{$fontname}.eot'); // IE9 compat
    src: url('#{$font-dir}#{$fontname}.eot?#iefix') format('embedded-opentype'), // IE8 and below
    url('#{$font-dir}#{$fontname}.woff') format('woff'), // standards
    url('#{$font-dir}#{$fontname}.ttf') format('truetype'), // Safari, Android, iOS
    url('#{$font-dir}#{$fontname}.svg##{$family}') format('svg'); // legacy iOS

    font-style: $style;
    font-weight: $weight;
  }
}

/* Placeholder Color Mixin */
@mixin placeholder-color($color) {
  ::-webkit-input-placeholder { /* WebKit browsers */
    color:    $color;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    $color;
    opacity:  1;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    $color;
    opacity:  1;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    $color;
  }
}


/* Computes a top-shadow for a card effect. */
@function top-shadow($depth) {
  $primary-offset: nth(1.5 3 10 14 19, $depth) * 1px;
  $blur: nth(1.5 3 10 14 19, $depth) * 4px;
  $color: rgba(black, nth(.12 .16 .19 .25 .30, $depth));

  @return 0 $primary-offset $blur $color;
}

/* Computes a bottom-shadow for a card effect. */
@function bottom-shadow($depth) {
  $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
  $blur: nth(1 3 3 5 6, $depth) * 4px;
  $color: rgba(black, nth(.24 .23 .23 .22 .22, $depth));

  @return 0 $primary-offset $blur $color;
}

/* Gives a card depth effect. */
@mixin shaddow-box($depth) {
  @if $depth < 1 {
    box-shadow: none;
  } @else if $depth > 5 {
    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
  } @else {
    box-shadow: bottom-shadow($depth), top-shadow($depth);
  }
}

/* RGBA background */
@mixin background-opacity($color, $opacity: 0.3) {
  background: $color; /* The Fallback */
  background: rgba($color, $opacity);
}
