/*
 * Responsive property based on viewport units
 *
 * Usage:
 * responsive: property viewportUnitBase minFontSize maxFontSize, fallbackSize
 */
responsive($prop, $responsive, $min, $max = false, $fallback = false)
	$responsive-unit = unit($responsive)
	$responsive-unitless = $responsive / ($responsive - $responsive + 1)
	$min-bp = $min / $responsive-unitless * 100
	$max-bp = $max != false ? $max / $responsive-unitless * 100 : 0

	$minQueries = ()
	$maxQueries = ()

	$units = (width height)
	if($responsive-unit == 'vw')
		$units = (width)
	else if($responsive-unit == 'vh')
		$units = (height)

	for $unit in $units
		push($minQueries, s('(max-%s: %s)', $unit, $min-bp))

		if $max
			push($maxQueries, s('(min-%s: %s)', $unit, $max-bp))

	$minQuery = unquote(join(', ', $minQueries))
	@media $minQuery
		{$prop}: $min

	if $max
		$maxQuery = unquote(join(', ', $maxQueries))
		@media $maxQuery
			{$prop}: $max

	if ($fallback)
		{$prop}: $fallback

	{$prop}: $responsive

responsive-font-size($responsive, $min, $max = false, $fallback = false)
	responsive(font-size, $responsive, $min, $max, $fallback)