@use "sass:math";


// HEX to RGB without 'rgb' prefix
// ---------------------------
@function hex-to-rgbstr($value) {
    @return red($value), green($value), blue($value);
}


// Tint a color: mix a color with white
// ---------------------------
@function tint-color($color, $weight) {
    @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
// ---------------------------
@function shade-color($color, $weight) {
    @return mix(black, $color, $weight);
}


// Remove the unit of a length
// ---------------------------
@function strip-unit($number) {
    @return math.div($number, ($number * 0 + 1));
}


// Helper function to get the responsive value calculated by RFS
// ---------------------------
$enable-rfs: true !default;

// 1 rem = $rfs-rem-value px
$rfs-rem-value: 16 !default;
// Base value
$rfs-base-value: 1.25rem !default;
$rfs-unit: rem !default;

// Factor of decrease
$rfs-factor: 10 !default;

// Resize values based on screen height and width
$rfs-two-dimensional: false !default;

// Breakpoint at where values start decreasing if screen width is smaller
$rfs-breakpoint: 1200px !default;
$rfs-breakpoint-unit: px !default;

@function rfs-fluid-value($values) {
    // Convert to list
    $values: if(type-of($values) != "list", ($values, ), $values);

    $val: '';

    // Loop over each value and calculate value
    @each $value in $values {
        @if $value == 0 {
            $val: $val + ' 0';
        }

        @else {
            // Cache $value unit
            $unit: if(type-of($value)=="number", unit($value), false);

            // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
            @if not $unit or $unit != "px" and $unit != "rem" {
                $val: $val + ' ' + $value;
            }

            @else {
                // Remove unit from $value for calculations
                $value: math.div($value, $value * 0 + if($unit == "px", 1, math.div(1, $rfs-rem-value)));

                // Only add the media query if the value is greater than the minimum value
                @if math.abs($value) <= $rfs-base-value or not $enable-rfs {
                    $val: $val + ' ' + if($rfs-unit == "rem", #{math.div($value, $rfs-rem-value)}rem, #{$value}px);
                }

                @else {
                    // Calculate the minimum value
                    $value-min: $rfs-base-value + math.div(math.abs($value) - $rfs-base-value, $rfs-factor);

                    // Calculate difference between $value and the minimum value
                    $value-diff: math.abs($value) - $value-min;

                    // Base value formatting
                    $min-width: if($rfs-unit == "rem", #{strip-unit(math.div($value-min, $rfs-rem-value))}rem, #{strip-unit($value-min)}px);

                    // Use negative value if needed
                    $min-width: if($value < 0, -$min-width, $min-width);

                    // Use `vmin` if two-dimensional is enabled
                    $variable-unit: if($rfs-two-dimensional, vmin, vw);

                    // Calculate the variable width between 0 and $rfs-breakpoint
                    $variable-width: #{strip-unit(math.div($value-diff * 100, $rfs-breakpoint))}#{$variable-unit};
                 
                    // Return the calculated value
                    $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
                }
            }
        }
    }

    // Remove first space
    @return unquote(str-slice($val, 2));
}