/**
 Generates font face for base 64 encoding fonts
 @param $name {String}
 @param $fontMap {SassMap}
   eot: eot filepath
   woff: woff base64 data
   ttf: ttf base64 data
   svg: svg base64 data
*/
@mixin base64Font($name, $fontMap) {
  @font-face {
    font-family: $name; src: url(map-get($fontMap, 'eot'));

    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: $name;

    src: url(map-get($fontMap, 'eot') + "?#iefix") format("embedded-opentype"),
    url("data:font/woff;base64," + map-get($fontMap, 'woff')) format("woff"),
    url("data:font/ttf;base64," + map-get($fontMap, 'ttf')) format("truetype"),
    url("data:font/svg;base64," + map-get($fontMap, 'svg') + "#ucm-font-1") format("svg");

    font-weight: normal;
    font-style: normal;
  }
}

/**
  Helpers
*/
$vendors: -webkit -moz -o -ms;
@mixin transition($rule) {
  @each $vendor in $vendors {
    #{$vendor}-transition: $rule;
  }
  transition: $rule;
}

@mixin transform($rule) {
  @each $vendor in $vendors {
    #{$vendor}-transform: $rule;
  }
  transform: $rule;
}

/**
 Breakpoint Mixin (possible values: mobile, tablet)
 */
@mixin breakpoint($name) {
  $bp: map-get($breakpoints, $name);
  $mediaRule: 'screen and (min-width: #{nth($bp, 1)})';
  @if(length($bp) == 2) {
    $mediaRule: '#{$mediaRule} and (max-width: #{nth($bp, 2)})';
  }
  @media #{$mediaRule} {
    @content;
  }
}