//
 * Mixins
 *
 * @copyright Copyright (c) 2012 rocksolidthemes.com
 * @license   https://rocksolidthemes.com/agb   No free usage allowed
 */

=hidpi
	@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4/3), only screen and (min-device-pixel-ratio: 1.3)
		@content

=ir($image-name:"", $image-extension:"png", $x: left, $y: top, $color: transparent)
	@if $image-name != ""
		background: $color inline-image("#{$image-name}"+"."+"#{$image-extension}", image/#{$image-extension}) $x $y no-repeat
		width: image-width("#{$image-name}"+"."+"#{$image-extension}")
		height: image-height("#{$image-name}"+"."+"#{$image-extension}")
		display: block
	@if $image-name == ""
		display: inline-block
	overflow: hidden
	line-height: 0
	text:
		indent: -9999px
		align: left
	br
		display: none
	@if $image-name != ""
		+hidpi
			background-image: inline-image("#{$image-name}"+"-x2."+"#{$image-extension}", "image/"+"#{$image-extension}")
			background-size: image-width("#{$image-name}"+"."+"#{$image-extension}"), image-height("#{$image-name}"+"."+"#{$image-extension}")

=icon($content:"", $font-size:"100%", $line-height:1)
	font: #{$font-size}/#{$line-height} "RockSolid Icons"
	@if $content != ""
		content: $content
	-webkit-font-smoothing: antialiased
	font-smoothing: antialiased
	text-rendering: geometricPrecision
	text-indent: 0
	display: inline-block
	position: relative

=hidden
	display: none !important
	visibility: hidden

=visuallyhidden
	border: 0
	clip: rect(0 0 0 0)
	height: 1px
	margin: -1px
	overflow: hidden
	padding: 0
	position: absolute
	width: 1px
	&.focusable
		&:active, &:focus
			clip: auto
			height: auto
			margin: 0
			overflow: visible
			position: static
			width: auto

=invisible
	visibility: hidden

=clearfix
	&:before
		content: ""
		display: table
	&:after
		content: ""
		display: table
		clear: both
	zoom: 1

=placeholder
	&:-webkit-placeholder
		@content
	&:-moz-placeholder
		@content
	&:-ms-placeholder
		@content
	&:-o-placeholder
		@content
	&:placeholder
		@content

=line-height($target-size, $parent-size: 18)
	// calculate line-height
	line-height: ($target-size / $parent-size)

=column-classes($gutter-width, $max-columns, $class-name)
	@for $cols from 1 through $max-columns
		$colWidth: ((1 - ($gutter-width * ($cols - 1))) / $cols)
		@for $span from 1 through $cols
			&.-#{unquote($class-name)}-col-#{$cols}-#{$span}
				width: ((($colWidth * $span) + ($gutter-width * ($span - 1))) * 100%)

=mediaquery($breakpoint, $property: max-width)
	@if $breakpoint == desktop
		$breakpoint: $breakpoint-desktop
	@else if $breakpoint == tablet
		$breakpoint: $breakpoint-tablet
	@else if $breakpoint == mobile
		$breakpoint: $breakpoint-mobile
	@else if $breakpoint == mobile-portrait
		$breakpoint: $breakpoint-mobile-portrait
	@media screen and (unquote($property): $breakpoint)
		@content

@function col($columns, $container-columns)
	@return $columns / $container-columns * 100%

@function em($target-size, $parent-size: 18)
	// remove units from values
	@if unit($target-size) == "px"
		$target-size: $target-size / 1px
	@if unit($target-size) == "em"
		$target-size: $target-size / 1em
	@if unit($target-size) == "%"
		$target-size: $target-size / 1%
	@if unit($parent-size) == "px"
		$parent-size: $parent-size / 1px
	@if unit($parent-size) == "em"
		$parent-size: $parent-size / 1em
	@if unit($parent-size) == "%"
		$parent-size: $parent-size / 1%
	// calculate em
	@return $target-size / $parent-size * 1em


// ===========================================
 * Compass backwards compatibility
 * ========================================

=font-face($name, $font-files, $eot: false, $weight: false, $style: false)
	@font-face
		font-family: quote($name)
		src: $font-files
		@if $weight
			font-weight: $weight
		@if $style
			font-style: $style

@function font-files($url1, $format1, $url2, $format2, $url3, $format3)
	@return font-url($url1) format(quote($format1)), font-url($url2) format(quote($format2)), font-url($url3) format(quote($format3))

@function font-url($url)
	@return url("../fonts/#{unquote($url)}")

@function linear-gradient($angle, $param...)
	@if $angle == top
		$angle: to bottom
	@else if $angle == right
		$angle: to left
	@else if $angle == bottom
		$angle: to top
	@else if $angle == left
		$angle: to right
	@return #{unquote("linear-gradient(")}$angle, $param#{unquote(")")}

=box-sizing($param...)
	box-sizing: $param

=text-shadow($param...)
	text-shadow: $param

=background($param...)
	background: $param

=background-image($param...)
	background-image: $param

=appearance($param...)
	-webkit-appearance: $param
	-moz-appearance: $param
	appearance: $param

=transition($param...)
	transition: $param

=transition-duration($param...)
	transition-duration: $param

=transition-property($param...)
	transition-property: $param

=transition-delay($param...)
	transition-delay: $param

=perspective($param...)
	perspective: $param

=backface-visibility($param...)
	backface-visibility: $param

=transform($param...)
	transform: $param

=filter($param...)
	filter: $param

=box-shadow($param...)
	box-shadow: $param

=border-radius($param...)
	@if length($param) < 1
		$param: 5px
	border-radius: $param

=column-count($param...)
	column-count: $param

=column-gap($param...)
	column-gap: $param

=transform-origin($x: null, $y: null, $z: null)
	transform-origin: $x $y $z

=background-clip($param...)
	background-clip: $param

=opacity($param...)
	opacity: $param

=background-origin($param...)
	background-origin: $param

=animation($param...)
	animation: $param

=keyframes($param...)
	@keyframes #{unquote($param)}
		@content