// mixins.scss
// CSS3 PROPERTIES
// --------------------------------------------------
// Border Radius
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
// Drop shadows
@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}
// Transitions
@mixin transition($transition) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}
// Transformations
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  -moz-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}
@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
  -moz-transform: scale($ratio);
  -ms-transform: scale($ratio);
  -o-transform: scale($ratio);
  transform: scale($ratio);
}
@mixin translate($x, $y) {
  -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 skew($x, $y) {
  -webkit-transform: skew($x, $y);
  -moz-transform: skew($x, $y);
  -ms-transform: skew($x, $y);
  -o-transform: skew($x, $y);
  transform: skew($x, $y);
}
@mixin translate3d($x, $y, $z) {
  -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);
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
@mixin backface-visibility($visibility){
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  backface-visibility: $visibility;
}
// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
  -moz-background-clip: $clip;
  background-clip: $clip;
}
// Background sizing
@mixin background-size($size){
  -webkit-background-size: $size;
  -moz-background-size: $size;
  -o-background-size: $size;
  background-size: $size;
}
// Background Color
@mixin background-color($color, $alpha) {
  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
}
// Border Color
@mixin border-color($color, $alpha) {
  border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
  @include background-clip(padding-box);
}
// Box sizing
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
  -moz-box-sizing: $boxmodel;
  -ms-box-sizing: $boxmodel;
  box-sizing: $boxmodel;
}
// User select
// For selecting text on the page
@mixin user-select($select) {
  -webkit-user-select: $select;
  -moz-user-select: $select;
  -ms-user-select: $select;
  -o-user-select: $select;
  user-select: $select;
}
// Resize anything
@mixin resizable($direction) {
  resize: $direction; // Options: horizontal, vertical, both
  overflow: auto; // Safari fix
}
// CSS3 Content Columns
@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
  -webkit-column-count: $columnCount;
  -moz-column-count: $columnCount;
  column-count: $columnCount;
  -webkit-column-gap: $columnGap;
  -moz-column-gap: $columnGap;
  column-gap: $columnGap;
}
// Optional hyphenation
@mixin hyphens($mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: $mode;
  -moz-hyphens: $mode;
  -ms-hyphens: $mode;
  -o-hyphens: $mode;
  hyphens: $mode;
}
// Opacity
@mixin opacity($opacity) {
  opacity: $opacity / 100;
  filter: unquote("alpha(opacity=#{$opacity})");
}
// Tab focus
@mixin tab-focus($color: $gold) {
  outline: 3px auto $color;
  outline-offset: -2px;
}