// CENTER

// .example_class {
//   @include center(vertical);
// }

@mixin center($axis: default, $position: relative) {

  position: $position;

  @if ($axis == 'default') {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @if ($axis == 'vertical') {
    top: 50%;
    transform: translateY(-50%);
  }

  @if ($axis == 'horizontal') {
    left: 50%;
    transform: translateX(-50%);
  }

  $center_axis: default horizontal vertical;
  @if not index($center_axis, $axis) {
    @error "$axis is not valid. use `default` (blank), `vertical` or `horizontal`.";
  }

}