/* ----------------------------- */
/* ==mixins                      */
/* ----------------------------- */

/**
 * Mixin to handle media queries breakpoints
 */
@mixin mq($keyword) {
	@if $keyword == large  {
		@media (min-width: 1280px) { @content; }
	}
	@if $keyword == medium {
		@media (min-width: 769px) { @content; }
	}
	@if $keyword == small {
		@media (max-width: 768px)  { @content; }
	}
	@if $keyword == tiny  {
		@media (max-width: 640px)  { @content; }
	}
	@if $keyword == retina {
        @media 
            only screen and (-webkit-min-device-pixel-ratio: 2),
            only screen and (min-resolution: 192dpi),
            only screen and (min-resolution: 2dppx) {
                @content;
        }
    }
}

/**
 * Mixin to handle REM font sizing with PX fallback
 */
@mixin rem($value, $base: 10) {
    @if $legacy-support-for-ie {
        font-size: $value + px;
    }
    font-size: $value / $base + rem;
}

/**
 * Compass-like inline-block mixin
 */ 
@mixin inline-block($alignment: none) {
	@if $legacy-support-for-mozilla {
		display: -moz-inline-stack; 
	}
	
	display: inline-block;
	
	@if $alignment and $alignment != none {
		vertical-align: $alignment; 
	}

	@if $legacy-support-for-ie {
		*vertical-align: auto;
		zoom: 1;
		*display: inline; 
	}
}