/*------------------------------------*\
    #CENTER
\*------------------------------------*/

/// Center an element vertically and/or horizontally within a parent that is
/// _relatively positioned._
///
/// @param {String} $to [both] - options are `vertical`, `horizontal`, or `both`
///
/// @example scss - Center mixin
///     .block {
///         position: relative;
///         width: 100%;
///     }
///
///         .block__element {
///             @include center('horizontal');
///             width: 50%;
///         }
@mixin center($to: both) {
    position: absolute;

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