/// Changes percent value to decimal.
/// @param {Number} $percentage
/// @group utils
///
@function percentage-to-decimal($percentage) {
    @if unit($percentage) == '%' {
        $percentage: ($percentage/100%);
    }
    @return $percentage;
}

/// Calculates `rem` values. Used by `px-to-rems` mixin. The `$base-size` is used to calculate the value (e.g. if the body's font-size is `16px`, then the rem value of `24px` would be `1.5rem`).
/// @group core
/// @param {Number} $pixels
///
@function px-to-rems($pixels, $base-size: $base-font-size) {
    @if $pixels == 'auto' or $pixels == 'normal' {
        @return $pixels;
    }

    @if (unitless($pixels)) {
        $pixels: $pixels * 1px;
    }

    //If 0, don't include units
    @if $pixels == 0px {
        @return 0;
    }

    $pixels: ($pixels / $base-size) * 1rem;

    @return $pixels;
}

/// @alias px-to-rems
///
@function rems($args...) {
    @return px-to-rems($args...);
}

/// Function for calculating `em` values. The `$context` is used to calculate the final value. Different from `px-to-rems()` by generating a value with an `em`. `$context` is often necessary based on the situation.
/// @group core
/// @param {Number} $pixels
/// @param {Number} $context [$base-font-size]
///
@function px-to-ems($pixels, $context: $base-font-size) {
    @if (unitless($pixels)) {
        $pixels: $pixels * 1px;
    }

    //If 0, don't include rems
    @if $pixels == 0px {
        @return 0;
    }

    $pixels: ($pixels / $context) * 1em;

    @return $pixels;
}

/// @alias px-to-ems
///
@function ems($pixels, $context: $base-font-size) {
    @return px-to-ems($pixels, $context);
}

/// Converts pixel dimensions to viewport width (vw) dimensions.
/// @param {number} $pixels
/// @returns {number}
/// @group utils
///
@function px-to-vw($pixels) {
    $vw-context: ($max-site-width * 0.01) * 1px;
    @return ($pixels / $vw-context) * 1vw;
}