/* Marc Jenkins mixins
------------------------------------------------------- */

// Font size mixin 
@mixin font-size($size: 24, $base: $base-font-size-n) {
  font-size: $size + px;
  font-size: ($size / $base) * 1rem;
}
/*
Usage: 
@include font-size(14);
*/

// Breakpoint mixin
@mixin breakpoint($size) {
  @if $size == lg {
    @media screen and (max-width: $break-lg) {
      @content;
    } 
  }
  @if $size == md {
    @media screen and (max-width: $break-md) {
      @content;
    } 
  }
  @if $size == sm {
    @media screen and (max-width: $break-sm) {
      @content;
    } 
  }
  @if $size == xs {
    @media screen and (max-width: $break-xs) {
      @content;
    } 
  }  
}

// border-box
@mixin bbox {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
}

// content box
@mixin cbox {
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box; 
}

// border radius (uniform)
// We should use a global setting instead of this
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
/* 
Usage:
.someclass { @include border-radius($border-radius); }
*/

// border radius (set each corner)
@mixin border-radius-select($radtl,$radtr,$radbr,$radbl) {
    -webkit-border-top-left-radius: $radtl;
   -webkit-border-top-right-radius: $radtr;
-webkit-border-bottom-right-radius: $radbr;
 -webkit-border-bottom-left-radius: $radbl;
		    -moz-border-radius-topleft: $radtl;
		   -moz-border-radius-topright: $radtr;
		-moz-border-radius-bottomright: $radbr;
		 -moz-border-radius-bottomleft: $radbl;
			   -ms-border-radius-topleft: $radtl;
			  -ms-border-radius-topright: $radtr;
		 -ms-border-radius-bottomright: $radbr;
			-ms-border-radius-bottomleft: $radbl;
				    border-top-left-radius: $radtl;
				   border-top-right-radius: $radtr;
				border-bottom-right-radius: $radbr;
				 border-bottom-left-radius: $radbl;
}

// transitions
@mixin trans($t) {
	-webkit-transition: all $t ease-out;
	   -moz-transition: all $t ease-out;
	    -ms-transition: all $t ease-out;
	     -o-transition: all $t ease-out;
	        transition: all $t ease-out;
}

// specifically for bg position
@mixin trans-bp($t) {
  -webkit-transition: background-position $t ease-out;
     -moz-transition: background-position $t ease-out;
      -ms-transition: background-position $t ease-out;
       -o-transition: background-position $t ease-out;
          transition: background-position $t ease-out;
}

// vertically align any element 
// credit: http://zerosixthree.se
// does not work
/*
@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
*/

// move something on the Y axis
@mixin translY($tY) {
  -webkit-transform: translateY($tY);
     -moz-transform: translateY($tY);
      -ms-transform: translateY($tY);
      -o-transition: translateY($tY);
          transform: translateY($tY);
}

// force text-smoothing (useful with headroom.js)
@mixin forcesmooth {
  -webkit-font-smoothing: subpixel-antialiased !important;
}