util.scss

@use 'sass:math';

// Adapted from Foundation
// (https://github.com/zurb/foundation-sites/blob/c7a6f44da00b7c17b8d5d2da6e15cfb4e1aac8b4/scss/util/_unit.scss)

// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
@function strip-unit($num) {
    @return math.div($num, ($num * 0 + 1));
}

// Converts one or more pixel values into matching rem values.
@function rem($values, $base: null) {
    @if function-exists(rem-custom) {
        @return rem-custom($values, $base);
    }

    $rem-values: ();
    $count: length($values);

    // If no base is defined, defer to the global font size
    @if $base == null {
        $base: $base-font-size;
    }

    // If the base font size is a %, then multiply it by 16px
    // This is because 100% font size = 16px in most all browsers
    @if unit($base) == '%' {
        $base: math.div($base, 100%) * 16px;
    }

    // Using rem as base allows correct scaling
    @if unit($base) == 'rem' {
        $base: strip-unit($base) * 16px;
    }

    @if $count == 1 {
        @return to-rem($values, $base);
    }

    @for $i from 1 through $count {
        $rem-values: append($rem-values, to-rem(nth($values, $i), $base));
    }

    @return $rem-values;
}

// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value.
// By default, the base pixel value used to calculate the rem value is taken from the `$base-font-size` variable.
@function to-rem($value, $base: null) {
    // Check if the value is a number
    @if type-of($value) != 'number' {
        @warn inspect($value) + ' was passed to rem(), which is not a number.';
        @return $value;
    }

    // Transform em into rem if someone hands over 'em's
    @if unit($value) == 'em' {
        $value: strip-unit($value) * 1rem;
    }

    // Calculate rem if units for $value is not rem or em
    @if unit($value) != 'rem' {
        $value: math.div(strip-unit($value), strip-unit($base)) * 1rem;
    }

    // Turn 0rem into 0
    @if $value == 0rem {
        $value: 0;
    }

    @return $value;
}

// For backward-compatibility, keep the rem-calc function name used in older versions of Keen UI.
@function rem-calc($values, $base: null) {
    @return rem($values, $base);
}