/*-------------------------------------
 *	MIXINS LIBRARY
/-------------------------------------*/

// [ Center ]--------------------------
// Mixin for centering child element inside parent
// using absolute positioning and 3d transforms.
//
// [ USAGE ] --------------------------
//
// .some-class {
//   width: 50%;
//   height: 50%;
//   @include center(vertical);
// }
//
// Must pass argument as to the centering desired
// IMPORATNT - Parent container must has position declared.
@mixin center($position) {
  position: absolute;

  @if $position == 'vertical' {
    top: 50%;
    transform: translate3d( 0, -50%, 0);
  }
  @else if $position == 'horizontal' {
    left: 50%;
    transform: translate3d( -50%, 0, 0 );
  }
  @else if $position == 'both' {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
  }
}

// [ VWConvert ] -----------------------
// VW convert will convert pixel units into VW units based on viewport.

@function getvw( $value, $screenWidth ) {
  $vw-base: ( $screenWidth * .01 );
  @return ( $value / $vw-base ) * 1vw;
}

@function getvh( $value, $screenHeight ) {
  $vh-base: ( $screenHeight * .01 );
  @return ( $value / $vh-base ) * 1vh;
}
// [ Clearfix ]-------------------------
// Used for clearing parent containers when children are floating.
// Don't leave the children floating unattended.
//
// [ USAGE ]----------------------------
//
// .some-class {
//   width:50%;
//   height: 50%;
//   @extend: %clearfix;
// }
@mixin clearfix {
  *zoom: 1;
  &:before,
  &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}

// [ Pseudo Element ] ------------------\
// To save time in typing out the same stuff
// you always have to type out when making pseudo elements
// use this mixin instead
//
// [ USAGE ] ---------------------------
// .some-class {
//   @include pseudo($pos: relative);
// }
@mixin pseudo($display: block, $pos: absolute, $content: '') {
  content: $content;
  display: $display;
  position: $pos;
}

// [ Responsive Ratio ] ----------------
// Used to hold containers to a certain aspect ratio.
// useful when wrangling background images and wanting them to
// remain scaleable.
//
// [ USAGE ] --------------------------
// .some-class {
//   @include responsive-ratio(1920,1080);
// }
@mixin responsive-ratio($x,$y) {
  $padding: unquote( ($y / $x) * 100 + '%' );
  padding-top: $padding;
}

// [ Truncate CSS ] -------------------
// Useful to truncate text to a single line
//
// [ USAGE ] -------------------------
// .some-class {
//   @include truncate(100%);
// }
@mixin truncate($width) {
  max-width: $width;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}