/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */


/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */

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

	@return $number;
}


/* Check if value is number */

@function is-number($value) {
	@return type-of($value) == 'number';
}


/* Value to Em */

@function valueToRem($value) {
	$noUnits: strip-unit($value);
	@return #{$noUnits / 16 * 1rem};
}

/* Value to Rem */

@function valueToEm($value) {
	$noUnits: strip-unit($value);
	@return #{$noUnits / 16 * 1em};
}


/**
 *	A simple function for accessing the colors from our mapping
 *	To access colors in our palette, we use a very simple custom Sass function

	USAGE:

	a {
		color: palette(primary);

		&:hover {
			color: palette(primary, 400);
		}
	}

 */

@function palette($palette, $level: 'base') {
	@if map-has-key($palettes, $palette) {
		@if map-has-key(map-get($palettes, $palette), $level) {
			@return map-get(map-get($palettes, $palette), $level);
		}

		@error "Unknown level `#{$level}` for color `#{$palette}` in $palette.";
	}

	@error "Unknown color: `#{$palette}` in $palette. ";
}


/**
 *	A simple function for setting a consistent box-shadow

	USAGE:

	.card {
		@include box-shadow;
	}

	.card--alt {
		@include box-shadow(low);
	}

 */
@mixin box-shadow($type: high) {
	@if ($type == 'high') {
		box-shadow: 0 20px 30px -10px $box-shadow-color;
	}
	@if ($type == 'low') {
		box-shadow: 0 1px 6px 0 $box-shadow-color;
	}
}

/**
 *	A simple function for setting a consistent border-radius

	USAGE:

	.card {
		@include border-radius;
	}

	.card--alt {
		@include border-radius(large);
	}

 */
@mixin border-radius($type: small) {
	@if ($type == 'small') {
		border-radius: $border-radius-small;
	}
	@if ($type == 'medium') {
		border-radius: $border-radius-medium;
	}
	@if ($type == 'large') {
		border-radius: $border-radius-large;
	}
}

/**
 * Lobotomized Owl Selector mixin:
 * - Set spacing for consecutive items with margin-top on all but the first item

	USAGE:

	.box {
		@include owl-children;
	}

	.card__item {
		@include owl;
	}

 */

// Gives the children of the element spacing
@mixin owl-children($margin: #{$line-height-ratio}rem) {
	& > * + * {
		margin-top: $margin;
	}
}

// Gives the element itself spacing
@mixin owl($margin: #{$line-height-ratio}rem) {
	& + & {
		margin-top: $margin;
	}
}


/**
  * This is where the magic happens
  * Return percentage based on amount of columns
  * Use parent column size to adjust the origin
  */
@function calculateColumnSize($columnCount : 1, $origin : $gridColumns) {
	// Calculate the width for a single column on a full grid
	$singleColumnSize: 100 / $gridColumns;

	// Get the origin size in percentage from the full grid
	$originPercentage: $origin / $gridColumns * 100;

	// Calculate single column from new origin
	$newSingleColumnSize: $singleColumnSize / $originPercentage * 100;

	// Return amount of columns as percentage
	@return ($newSingleColumnSize * $columnCount);
}

	/**
      * Default function for columns
      * Return as percentage
      */
@function column($columnCount : 1, $origin : $gridColumns) {
	@return calculateColumnSize($columnCount,$origin) * 1%;
}

	/**
      * Return as viewport width
      */
@function columnVw($columnCount : 1, $origin : $gridColumns) {
	@return calculateColumnSize($columnCount,$origin) * 1vw;
}