@use "sass:math";
@use "convert";

/// Kalkuler riktig rem-verdi basert på en gitt pixelverdi
/// @param {Number} $px-size - Pixelverdi, helst med unit
/// @return {Number} - Pixelverdien konvertert til rem
/// @example
///     jkl.rem(16px);
@function rem($px-size) {
    @if $px-size == 0 {
        @return 0;
    }
    $rem-size: math.div($px-size, 16px);
    // Default font size on html element is 100%, equivalent to 16px;
    @return convert.to-number(#{$rem-size}rem);
}

/// Calculate a responsive size value relative to a given screen size
/// Will return a CSS rule that corresponds to the given pixel size at
/// the given screen size and scales with changes in screen size
/// @param {Number} $px-size - Size to calculate from, in px without unit
/// @param {Number} $screen-width - Screen width to calculate from, in px without unit, default 1400
/// @param {Number} $screen-height - Screen height to calculate from, in px without unit, default 900
/// @return {Number} - Input expressed as a responsive value
@function relative-size($px-size, $screen-width: 1400, $screen-height: 900) {
    $hor-size: math.div($px-size, $screen-width) * 100 * 1vw;
    $ver-size: math.div($px-size, $screen-height) * 100 * 1vh;

    @return min(#{$hor-size}, #{$ver-size});
}