/* Variables and mixins declared here will be available in all other SCSS files */
@use 'sass:math';

$baseline: 1.5rem;

$minScreen: 22rem;
$maxScreen: 50rem;
$minFont: 1rem;
$maxFont: 2rem;

$fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
	'Helvetica Neue', sans-serif;

$h1: 2rem;
$h2: 1.5rem;
$h3: 1.25rem;
$h4: 1rem;
$h5: 0.875rem;

$highlight: hsl(0, 84%, 60%);
$secondaryHighlight: hsl(262, 83%, 58%);
$gradient: linear-gradient(to right, $secondaryHighlight, #db2777, $highlight);

$dropShadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
$boxShadow: 10px 100px 80px rgba(0, 0, 0, 0.03);

$cardRadius: 1rem;

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
	& {
		@each $property in $properties {
			#{$property}: $min-value;
		}

		@media screen and (min-width: $min-vw) {
			@each $property in $properties {
				#{$property}: calc(
					#{$min-value} +
						#{strip-unit($max-value - $min-value)} *
						((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
				);
			}
		}

		@media screen and (min-width: $max-vw) {
			@each $property in $properties {
				#{$property}: $max-value;
			}
		}
	}
}

@function strip-unit($value) {
	@return math.div($value, ($value * 0 + 1));
}
