Centerer

// Centerer
// ––––––––––––––––––––––––––––––––––––––––––––––––––

// position an element centrally
// ensure parent element has position: relative;
//
// Usage:
// absolute centre:
// @include centerer(true, true);
// horzontal only:
// @include centerer(true, false);
// vertical only:
// @include centerer(false, true);
//
@mixin centerer($horizontal: true, $vertical: true, $position: absolute) {
  position: $position;

  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  }

  @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}