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

  &:after {
    clear: both;
  }
}


// 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});
}





@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;
}

// Set `$inline-block-alignment` to `none` or `false` to disable the output
// of a vertical-align property in the inline-block mixin.
// Or set it to a legal value for `vertical-align` to change the default.
$inline-block-alignment: middle !default;

// Provides a cross-browser method to implement `display: inline-block;`
@mixin inline-block($alignment: $inline-block-alignment, $ie-alignment: auto) {
	display: inline-block;
	@if $alignment and $alignment != none {
		vertical-align: $alignment;
	}

	// legacy IE support
	@if $ie-alignment and $ie-alignment != none {
		*vertical-align: $ie-alignment;
	}
	*zoom: 1;
	*display: inline;
}

// Border Radius
@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	border-radius: $radius;
}


// IE7 inline-block
// ----------------
@mixin ie7-inline-block() {
	*display: inline; /* IE7 inline-block hack */
	*zoom: 1;
}

// IE7 likes to collapse whitespace on either side of the inline-block elements.
// Ems because we're attempting to match the width of a space character. Left
// version is for form buttons, which typically come after other elements, and
// right version is for icons, which come before. Applying both is ok, but it will
// mean that space between those elements will be .6em (~2 space characters) in IE7,
// instead of the 1 space in other browsers.
@mixin ie7-restore-left-whitespace() {
	*margin-left: .3em;

	&:first-child {
		*margin-left: 0;
	}
}

@mixin ie7-restore-right-whitespace() {
	*margin-right: .3em;
}

// Sizing shortcuts

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin square($size) {
  @include size($size, $size);
}


// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`

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


// 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;
}

@mixin translateX($value) {
	-webkit-transform: translateX($value);
	-moz-transform: translateX($value);
	-ms-transform: translateX($value);
	-o-transform: translateX($value);
	transform: translateX($value);
}