// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix {
	&:before,
		&:after {
		content: " ";
		display: table;
	}

	&:after {
		clear: both;
	}
}

/*@mixin font-size($size: 12, $base: 16) {
	font-size: $size + px;
	font-size: ($size / $base) * 1rem;
}*/
@mixin font-size($size: 12, $base: $font-size-base) {
	font-size: $size + px;
	font-size: ($size / $base) * 1rem;
}

@mixin vertical-align {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

@mixin abs-pos($top: auto, $right: auto, $bottom: auto, $left: auto) {
	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
	position: absolute;
}

@mixin font-size($size: 12, $base: 16) {
	font-size: $size + px;
	font-size: $size / $base * 1rem;
}

// Border radius.
@mixin border-radius($radius, $important: "") {
	-webkit-border-radius: unquote("#{$radius}#{$important}");
	-moz-border-radius: unquote("#{$radius}#{$important}");
	-ms-border-radius: unquote("#{$radius}#{$important}");
	-o-border-radius: unquote("#{$radius}#{$important}");
	border-radius: unquote("#{$radius}#{$important}");
}

@mixin no-border-radius {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
}

// Alineació vertical
@mixin full-height {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

@mixin vertical-align {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

@mixin vertical-align-parent {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

// Opacity
//@mixin opacity($value) {
//	opacity: $value;
//	filter: alpha(opacity=#{$value * 100});
//}
@mixin opacity($opacity) {
	opacity: $opacity;

	// IE8 filter
	$opacity-ie: $opacity * 100;

	filter: #{alpha(opacity = $opacity-ie)};
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity-ie});
}

// Transitions
@mixin transition($property, $speed) {
	-webkit-transition: $property $speed ease;
	-moz-transition: $property $speed ease;
	-o-transition: $property $speed ease;
	transition: $property $speed ease;
}

@mixin no-transition {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}

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

@mixin translate($val) {
	-webkit-transform: translate($val);
	-moz-transform: translate($val);
	-ms-transform: translate($val);
	transform: translate($val);
}

@mixin translateY($val) {
	-webkit-transform: translateY($val);
	-ms-transform: translateY($val);

	// IE9 only
	-o-transform: translateY($val);
	transform: translateY($val);
}

// (tret de bootstrap))
@mixin translate($x, $y) {
	-webkit-transform: translate($x, $y);
	-ms-transform: translate($x, $y);

	// IE9 only
	-o-transform: translate($x, $y);
	transform: translate($x, $y);
}

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

// Transitions (tret de bootstrap))
@mixin transition($transition...) {
	-webkit-transition: $transition;
	-o-transition: $transition;
	transition: $transition;
}

@mixin transition-property($transition-property...) {
	-webkit-transition-property: $transition-property;
	transition-property: $transition-property;
}

@mixin transition-delay($transition-delay) {
	-webkit-transition-delay: $transition-delay;
	-moz-transition-delay: $transition-delay;
	-o-transition-delay: $transition-delay;
	-ms-transition-delay: $transition-delay;
	transition-delay: $transition-delay;
}

@mixin transition-duration($transition-duration...) {
	-webkit-transition-duration: $transition-duration;
	transition-duration: $transition-duration;
}

@mixin transition-timing-function($timing-function) {
	-webkit-transition-timing-function: $timing-function;
	transition-timing-function: $timing-function;
}

@mixin transition-transform($transition...) {
	-webkit-transition: -webkit-transform $transition;
	-moz-transition: -moz-transform $transition;
	-o-transition: -o-transform $transition;
	transition: transform $transition;
}

// bootstrap/mixins/vendor_prefixes.scss
// [..]
// Transformations
@mixin scale($ratio...) {
	-webkit-transform: scale($ratio);
	-ms-transform: scale($ratio);

	// IE9 only
	-o-transform: scale($ratio);
	transform: scale($ratio);
}

@mixin scaleX($ratio) {
	-webkit-transform: scaleX($ratio);
	-ms-transform: scaleX($ratio);

	// IE9 only
	-o-transform: scaleX($ratio);
	transform: scaleX($ratio);
}

@mixin scaleY($ratio) {
	-webkit-transform: scaleY($ratio);
	-ms-transform: scaleY($ratio);

	// IE9 only
	-o-transform: scaleY($ratio);
	transform: scaleY($ratio);
}

@mixin skew($x, $y) {
	-webkit-transform: skewX($x) skewY($y);
	-ms-transform: skewX($x) skewY($y);

	// See https://github.com/twbs/bootstrap/issues/4885; IE9+
	-o-transform: skewX($x) skewY($y);
	transform: skewX($x) skewY($y);
}

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

	// IE9 only
	-o-transform: translate($x, $y);
	transform: translate($x, $y);
}

@mixin translate3d($x, $y, $z) {
	-webkit-transform: translate3d($x, $y, $z);
	transform: translate3d($x, $y, $z);
}

@mixin rotate($degrees) {
	-webkit-transform: rotate($degrees);
	-ms-transform: rotate($degrees);

	// IE9 only
	-o-transform: rotate($degrees);
	transform: rotate($degrees);
}

@mixin rotateX($degrees) {
	-webkit-transform: rotateX($degrees);
	-ms-transform: rotateX($degrees);

	// IE9 only
	-o-transform: rotateX($degrees);
	transform: rotateX($degrees);
}

@mixin rotateY($degrees) {
	-webkit-transform: rotateY($degrees);
	-ms-transform: rotateY($degrees);

	// IE9 only
	-o-transform: rotateY($degrees);
	transform: rotateY($degrees);
}

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

@mixin perspective-origin($perspective) {
	-webkit-perspective-origin: $perspective;
	-moz-perspective-origin: $perspective;
	perspective-origin: $perspective;
}

@mixin transform-origin($origin) {
	-webkit-transform-origin: $origin;
	-moz-transform-origin: $origin;
	-ms-transform-origin: $origin;

	// IE9 only
	transform-origin: $origin;
}

// [..]
// final de bootstrap/mixins/vendor_prefixes.scss

//-- RGBa Color / Background
@mixin color-rgba($color, $opacity) {
	color: rgba(red($color), green($color), blue($color), $opacity);
}

@mixin background-rgba($color, $opacity) {
	background: rgba(red($color), green($color), blue($color), $opacity);
}

// Responsive background
@mixin responsive-background {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	@media #{$tablet-l} {
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
		background-size: auto;
	}
}