// =============================================================================
// _CSS3.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Box Shadow
//   02. Box Sizing
//   03. Animations
//   04. Transitions
//   05. Transformations
//       a. Rotate
//       b. Rotate X
//       c. Rotate Y
//       d. Scale
//       e. Translate
//       f. Translate 3D
//       g. Skew
//       h. Transform Style
//   06. Backface Visibility
//   07. Perspective
//   08. User Select
//   09. Resize Anything
//   10. Content Columns
//   11. Optional Hypenation
//   12. Opacity
// =============================================================================

// Box Shadow
// =============================================================================

@mixin box-shadow($shadow) {
  box-shadow: $shadow;
}



// Box Sizing
// =============================================================================

@mixin box-sizing($boxModel) {
  -webkit-box-sizing: $boxModel;
     -moz-box-sizing: $boxModel;
          box-sizing: $boxModel;
}



// Animations
// =============================================================================

@mixin animate($animation) {
  -webkit-animation: $animation;
     -moz-animation: $animation;
       -o-animation: $animation;
          animation: $animation;
}



// Transitions
// =============================================================================

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



// Transformations
// =============================================================================

//
// Rotate.
//

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


//
// Rotate X.
//

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


//
// Rotate Y.
//

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


//
// Scale.
//

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


//
// Translate.
//

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


//
// Translate 3D.
//

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


//
// Skew.
//

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


//
// Transform style.
//

@mixin transform-style($style) {
  -webkit-transform-style: $style;
          transform-style: $style;
}



// Backface Visibility
// =============================================================================

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



// Perspective
// =============================================================================

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



// User Select
// =============================================================================

@mixin user-select($select) {
  -webkit-user-select: $select;
     -moz-user-select: $select;
       -o-user-select: $select;
          user-select: $select;
}



// Resize Anything
// =============================================================================

//
// 1. Options: 'horizontal', 'vertical', or 'both'.
// 2. Safari fix.
//

@mixin resizable($direction) {
  resize: $direction; // 1
  overflow: auto; // 2
}



// Content Columns
// =============================================================================

@mixin content-columns($columnCount: 2, $columnGap: 3em, $columnRule: 1px solid #e5e5e5) {
  -webkit-column-count: $columnCount;
     -moz-column-count: $columnCount;
          column-count: $columnCount;
  -webkit-column-gap: $columnGap;
     -moz-column-gap: $columnGap;
          column-gap: $columnGap;
  -webkit-column-rule: $columnRule;
     -moz-column-rule: $columnRule;
          column-rule: $columnRule;
}



// Optional hypenation
// =============================================================================

@mixin hyphens($mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: $mode;
     -moz-hyphens: $mode;
       -o-hyphens: $mode;
          hyphens: $mode;
}



// Opacity
// =============================================================================

@mixin opacity($opacity: 0.5) {
  opacity: $opacity;
}