// Rock Hammer by Stuff and Nonsense
// Version: <!-- $version -->
// URL: http://stuffandnonsense.co.uk/projects/rock-hammer/
// Version: <!-- $license -->

// Typography =============================================

@mixin font-size($font-size: 16){
font-size : #{$font-size}px;
font-size : #{$font-size / 10}rem; }

@mixin css-hyphens($val:auto) {
-webkit-hyphens : $val;
-moz-hyphens : $val;
-ms-hyphens : $val;
-o-hyphens : $val;
hyphens : $val; }

@mixin smallcaps($color, $font-weight) {
font-variant : small-caps;
font-weight : $font-weight;
text-transform : lowercase;
color : $color; }

// chromeframe

@mixin chromeframe {
margin : .2em 0;
background : $lightneutralcolor;
color : $neutralcolor;
padding : .2em 0; }

// hidden

@mixin hidden {
display : none !important;
visibility : hidden; }

@mixin hide-text {
text-indent : 100%;
white-space : nowrap;
overflow : hidden;
}

@mixin invisible {
visibility : hidden; }

@mixin visuallyhidden {
overflow : hidden;
position : absolute;
clip : rect(0 0 0 0);
height : 1px;
width : 1px;
margin : -1px;
padding : 0;
border : 0;

&.focusable {

&:active,
&:focus {
position : static;
clip : auto;
height : auto;
width : auto;
margin : 0;
overflow: visible; } 
} 
}

// cancels visuallyhidden, invisible, hidden
@mixin visible($display: block) {
overflow: visible;    
position : static;
clip : auto;
height : auto;
width : auto;
margin : 0;
display : $display !important;
visibility : visible;
}

// flexbox

@mixin displayflex {
display : -webkit-box; 
display : -moz-box; 
display : -ms-flexbox;
display : -webkit-flex;
display : flex; }

@mixin align-items($align) {
-webkit-align-items : $align;
-moz-align-items : $align;
-o-align-items : $align;
align-items : $align; }

@mixin flex($flex, $width) {
-webkit-box-flex : $flex;  
-moz-box-flex : $flex;
width : $width;
-webkit-flex : $flex;
-ms-flex : $flex;
flex : $flex; }

@mixin order($order) {
-webkit-box-ordinal-group : $order;
-moz-box-ordinal-group : $order;
-ms-flex-order : $order;
-webkit-order : $order;
order : $order; }

// @include flex-start(VALUE) (flex-start | flex-end | center | space-between | space-around)

@mixin content-justify($justify) {
-webkit-content-justify : $justify;
-moz-content-justify : $justify;
-o-content-justify : $justify;
content-justify : $justify; }

// @include flex-direction(VALUE) (row | row-reverse | column | column-reverse)

@mixin flex-direction($direction) {
-webkit-flex-direction : $direction;
-moz-flex-direction : $direction;
-o-flex-direction : $direction;
flex-direction : $direction; }

@mixin horizontal($startColor : $white, $endColor : $lighterneutralcolor) {
background-color: $endColor;
background-image  : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
background-image  : -webkit-linear-gradient(left, $startColor, $endColor);   				 // Safari 5.1+, Chrome 10+
background-image  : -moz-linear-gradient(left, $startColor, $endColor); 					 // FF 3.6+
background-image  : -ms-linear-gradient(left, $startColor, $endColor); 						 // IE10
background-image  : -o-linear-gradient(left, $startColor, $endColor); 						 // Opera 11.10
background-image  : linear-gradient(left, $startColor, $endColor); 							 // W3C
background-repeat : repeat-x; }

@mixin vertical($startColor : $white, $endColor:  $lighterneutralcolor) {
background-image  : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
background-image  : -webkit-linear-gradient(top, $startColor, $endColor); 					 // Safari 5.1+, Chrome 10+
background-color  : $endColor;
background-image  : -moz-linear-gradient(top, $startColor, $endColor);   					 // FF 3.6+
background-image  : -ms-linear-gradient(top, $startColor, $endColor); 						 // IE10
background-image  : -o-linear-gradient(top, $startColor, $endColor); 						 // Opera 11.10
background-image  : linear-gradient(top, $startColor, $endColor); 							 // W3C
background-repeat : repeat-x; }

@mixin directional($startColor : $white, $endColor : $lighterneutralcolor, $deg : 45deg) {
background-color  : $endColor;
background-image  : -moz-linear-gradient($deg, $startColor, $endColor); 					// FF 3.6+
background-image  : -ms-linear-gradient($deg, $startColor, $endColor); 						// IE10
background-image  : -webkit-linear-gradient($deg, $startColor, $endColor); 					// Safari 5.1+, Chrome 10+
background-image  : -o-linear-gradient($deg, $startColor, $endColor); 						// Opera 11.10
background-image  : linear-gradient($deg, $startColor, $endColor); 							// W3C
background-repeat : repeat-x; }

// .bordered(COLOR, COLOR, COLOR, COLOR);

@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
border-top : solid 1px $top-color;
border-left : solid 1px $left-color;
border-right : solid 1px $right-color;
border-bottom : solid 1px $bottom-color; }

// @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR))

@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow : $shadow;
-moz-box-shadow : $shadow;
box-shadow : $shadow; }

// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);

@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
-webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); }

// @include opacity(VALUE);

@mixin opacity($opacity : .5) {
-webkit-opacity : $opacity;
-moz-opacity : $opacity;
opacity : $opacity; }

// .rotate(VALUEdeg);

@mixin rotate($deg) {
-webkit-transform : rotate($deg);
-moz-transform : rotate($deg);
-ms-transform : rotate($deg);
-o-transform : rotate($deg);
transform : rotate($deg); }

// .scale(VALUE);

@mixin scale($ratio) {
-webkit-transform : scale($ratio);
-moz-transform : scale($ratio);
-ms-transform : scale($ratio);
-o-transform : scale($ratio);
transform : scale($ratio); }

// .skew(VALUE, VALUE);

@mixin skew($x: 0, $y: 0) {
-webkit-transform : skew($x, $y);
-moz-transform : skew($x, $y);
-ms-transform : skew($x, $y);
-o-transform : skew($x, $y);
transform : skew($x, $y); }

// .translate(VALUE, VALUE)

@mixin translate($x: 0, $y: 0) {
-webkit-transform : translate($x, $y);
-moz-transform : translate($x, $y);
-ms-transform : translate($x, $y);
-o-transform : translate($x, $y);
transform : translate($x, $y); }

@mixin translate3d($x: 0, $y: 0, $z: 0) {
-webkit-transform : translate($x, $y, $z);
-moz-transform : translate($x, $y, $z);
-ms-transform : translate($x, $y, $z);
-o-transform : translate($x, $y, $z);
transform : translate($x, $y, $z); }

// .background-size(VALUE VALUE);

@mixin background-size($size){
-webkit-background-size : $size;
-moz-background-size : $size;
-o-background-size : $size;
background-size : $size; }

// .background-clip(VALUE); (border-box, padding-box, content-box)

@mixin background-clip($clip) {
-webkit-background-clip : $clip;
-moz-background-clip : $clip;
background-clip : $clip; }

// @include resize(VALUE) (none, both, horizontal, vertical, inherit)

@mixin resize($direction: both) {
resize : $direction;
overflow : auto; }

// @include placeholder(VALUE) (color)

@mixin placeholder($color : $neutralcolor) {

&:-moz-placeholder {
//@include font-size(14);
color : $color; }

&::-moz-placeholder {
//@include font-size(14);
color : $color; }

&:-ms-input-placeholder {
//@include font-size(14);
color : $color; }

&::-webkit-input-placeholder {
//@include font-size(14);
color : $color; }
}

// @include overflow

@mixin text-overflow {
overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap; }

// @include zero

@mixin zero {
margin : 0;
padding : 0; }

// @include media-query-bp(UNIT, QUERY PART LEFT, QUERY PART RIGHT, TARGET)
// NOTE: This MUST be used from within a selectore for the parent reference to work
// Otherwise, an error will be thrown on SASS compile. Love, Aaron.

@mixin media-query-bp($unit, $query1: min, $query2: width, $target: "") {
	$mqtarget: "";
	// Check if media queries are supported
	@if $media-queries-supported == true {
		@if $target != "" {
			@media #{$target} and (#{$query1}-#{$query2}: #{$unit}) {
				@content;
			}
		}
		@else {
			@media (#{$query1}-#{$query2}: #{$unit}) {
				@content;
			}
		}
	}
	@else {
		#{$no-mq-classname} & {
			@content;
		}
	}
}
