// Vertically centers the element inside of its first non-static parent,
// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

// Horizontally centers the element inside of its first non-static parent,
// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin horizontal-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

// Absolutely centers the element inside of its first non-static parent,
// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


@mixin center($pos: both) {
  position: absolute;

  @if ($pos == both) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if($pos == top) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if($pos == left) {
    top: 50%;
    transform: translate(0, -50%);
  } @else if($pos == right) {
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
  } @else if($pos == bottom) {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
}