@use "sass:map";
@use "sass:list";
@use "sass:math";

h1, h2, h3, h4, h5, h6 {
    @extend %headings !optional;
}

h1, h2, h3, h4, h5, h6, p {
    @extend %text !optional;
}

@function get-ratio($target){
	@return get-rem($target);
}

@function get-rem($target) { 
	@return (math.div($target, $fontSize)) * 1rem;
}

@function get-vw($target) { 
	$vw-context: (nth($screen, 1) * 0.01) * 1px;
	@return (math.div($target, $vw-context)) * 1vw;
}

@function get-vh($target) { 
	$vw-context: (nth($screen, 2) * 0.01) * 1px;
	@return (math.div($target, $vw-context)) * 1vh;
}

@mixin forceRatio($width: nth($screen, 1), $height: nth($screen, 2)){
	$screen: ($width, $height) !global;

	html, body, .forceRatio__inner{
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
	    box-sizing: border-box;
	    position: relative;
	    margin: 0;
	    padding: 0;
	}

	.forceRatio{
	    position: relative;
	    width: 100vw; 
	    max-height: 100vh;
	    margin: auto;
	    top:0;bottom:0; /* vertical center */
	    left:0;right:0; /* horizontal center */

	    height: #{(math.div($height, $width)) * 100}vw;
	    max-width: #{(math.div($width, $height)) * 100}vh;
	}

	html{
		font-size: get-vw($fontSize) !important;
	}

	@include breakpoint(min-aspect-ratio #{$width} / #{$height}){
		html{
			font-size: get-vh($fontSize) !important;
		}
	}
}

@function is-integer($value) {
	@return is-number($value) and round($value) == $value;
}

@function dynamic($variable, $variables){
	$i: 0;
    $list: ();
	@while(map.has-key($variables, $variable + $i)){
		$list: list.append($list, map.get($variables, $variable + $i));
		$i: $i + 1;
	}
    @return $list;
}