/// Takes a pixel value and creates a property with a `rem` value. If `$rem-px-fallback` is `true`, a pixel fallback is also included.
/// @group core
/// @param {Property} $property - CSS property value to output
/// @param {List | Pixel} $sizes - Pixel value(s) to be converted. A list results in a each value being processed. Can also be 'auto' or 'normal' (which avoid conversion).
/// @param {Boolean} $important [false] - Whether to add `!important` to the end of the output.
/// @param {Pixel} $base-font [$base-font-size] - The base value at which the pixels should be calculated against. Usually not necessary to change.
///
@mixin px-to-rems(
    $property,
    $sizes,
    $important: false,
    $base-font: $base-font-size
) {
    $important-val: if($important, ' !important', '');
    $rem-sizes: ();
    $px-sizes: ();
    $is-all-zero: true;

    //Loop through sizes, combining them into single lists
    @each $size in $sizes {
        // Remove units from 0 values
        @if $size == 0px {
            $size: 0;
        } @else {
            $is-all-zero: false;
        }
        // Allow for blank values
        @if $size == '' or $size == null {
            $size: null;
            $px-sizes: join($px-sizes, $size, space);
        } @else if $size == 'auto' or $size == 'normal' {
            // Do not conver auto or normal values
            $px-sizes: join($px-sizes, $size, space);
        } @else {
            // Store px values
            $px-sizes: join($px-sizes, $size, space);
            // Convert size to rem
            $size: if($size, px-to-rems($size, $base-font), '');
        }

        $rem-sizes: join($rem-sizes, $size, space);
    }

    @if $is-all-zero == false and $rem-px-fallback {
        #{$property}: #{$px-sizes}#{$important-val};
    }

    #{$property}: #{$rem-sizes}#{$important-val};
}

/// @alias px-to-rems
///
@mixin rems($property, $sizes, $important: false, $base-font: $base-font-size) {
    @include px-to-rems($property, $sizes, $important, $base-font);
}