/*
 * Mixins
 */

@mixin clearfix {
	zoom:1;
	&:before, &:after {
		content: "\0020"; 
		display: block; 
		height: 0; 
		overflow: hidden; 
	}
	&:after {
		clear: both;
	}
}


/* BEM selectors
 * http://sassmeister.com/gist/6994632
 ******************** */
// Element
@mixin e($name) {
	@at-root   &__#{$name} {
		@content;
	}
}
// Modifier
@mixin m($name) {
	@at-root   &--#{$name} {
		@content;
	}
}


/* Text/image replacement
 ******************** */
@mixin hidden-text {
	outline: none; text-indent: -9999px;
}


/* REM units
 * https://github.com/guardian/guss-rem
 ******************** */
$guss-rem-baseline: 10px !default;

// Transform a value into rem
// Assuming baseline is set to 10px on :root/html
@function rem($value, $baseline: $guss-rem-baseline) {
	@if $value == 0 { @return 0; } // 0rem -> 0
	@if type-of($value) == list {
		$result: ();
		@each $e in $value {
			$result: append($result, rem($e));
		}
		@return $result;
	} @else {
		@return if(type-of($value) == number and unit($value) == px, $value / $baseline * 1rem, $value);
	}
}

// Output rem units with px fallback
// Expects $properties to be a Sass map
// Usage: http://sassmeister.com/gist/7451284
@mixin rem($properties) {
	@each $property, $value in $properties {
		@if (type-of($value) == number and $value != 0) {
			// Turn any value into pixels
			$value: if(unitless($value), $value * 1px, $value);
		}

		#{$property}: $value;
		#{$property}: rem($value);
	}
}


/* Reduced width container
 ******************** */
@mixin slimContainer() {
	max-width: $slim-container-width;
	margin: 0 auto;
}