/// Centers the element inside of its first parent using a method combining
/// positioning and translation.
///
/// @param {String} $position [relative] - The position value desired,
/// must use either relative or absolute positioning. If you use absolute
/// positioning, you should apply `position: relative` to the parent element.
///
/// @group Utilities
@mixin position-center($position: relative) {
  position: #{$position};
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/// Centers the element inside of its first parent using a method combining
/// positioning and translation.
///
/// @param {String} $position [relative] - The position value desired,
/// must use either relative or absolute positioning. If you use absolute
/// positioning, you should apply `position: relative` to the parent element.
///
/// @group Utilities
/// @require {mixin} position-center
/// @alias position-center
@mixin pos-center($position: relative) {
  @include position-center($position);
}