@function extract-unit($number) {
    @return $number * 0+1;
}

@function strip-unit($number) {
    @if type-of($number)=='number' and not unitless($number) {
        @return $number / extract-unit($number);
    }

    @return $number;
}

@function single-unit-rem($value, $font-size-base) {
    @if (extract-unit($value) !=1px) {
        @return $value;
    }

    $converted: calc($value / $font-size-base);

    @return strip-unit($converted) * 1rem;
}

@function multiple-units-rem($values, $font-size-base) {
    $rem-values: (
    );

@each $value in $values {
    $rem-values: append($rem-values, single-unit-rem($value, $font-size-base))
}

@return $rem-values;
}

@function px-to-rem($px, $font-size-base: 16px) {
    @if type-of($px)=='number' {
        @return single-unit-rem($px, $font-size-base);
    }

    @else if type-of($px)=='list' {
        @return multiple-units-rem($px, $font-size-base);
    }

    @else {
        @return $px;
    }
}

@function if-important($important) {
    @return #{if($important, '!important', '')};
}

@function clamp-between($min, $max, $min-width: $breakpoint-md, $max-width: $breakpoint-xl) {
    $min-width: px-to-rem($min-width);
    $max-width: px-to-rem($max-width);

    $slope: calc(($max - $min) / ($max-width - $min-width));
    $intersection: (-$min-width * $slope) + $min;
    @return clamp(#{$min}, calc(#{$intersection} + #{$slope * 100vw}), #{$max});
}
@function tint($color, $percentage) {
    @return mix(white, $color, $percentage);
}

@function darken($color, $percentage) {
    @return mix(black, $color, $percentage);
}