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

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Box Shadow
//   02. Box Sizing
//   03. Animations
//   04. Transitions
//   05. Transform
//       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
// =============================================================================

// Notes
// -----
// 01. Transform.
// 02. Transform style.
// 03. Rotate.
// 04. Rotate X.
// 05. Rotate Y.
// 06. Translate.
// 07. Translate 3D.

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

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

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

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

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

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

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



// 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
// =============================================================================

// Notes
// -----
// 01. Options: horizontal || vertical || both
// 02. Safari fix.

@mixin resizable($direction) {
  resize: $direction; // 01
  overflow: auto; // 02
}



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