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


/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */

@function quarter($number) {
	@return round($number / 4);
}

@function halve($number) {
	@return round($number / 2);
}

@function double($number) {
	@return round($number * 2);
}

@function triple($number) {
	@return round($number * 3);
}

@function quadruple($number) {
	@return round($number * 4);
}


/**
 *  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};
}




// Set a fixed space based on the 8pt grid
// Just pass the function a number equal to the number of (8)points you need
@function space($size: '1') {
  @return 8px * $size;
}



/*
 * Set vertical spacing for viewport larger than mobile
 * In flexible units (vw) and on max viewport in a fixed amount (px)

 USAGE:

 .example {
	 @include vspacing(
		'padding-top' 0.33,
		'margin-bottom' 0.5
	);
  }

 */

@mixin vspacing($values...) {
	@include mq($max: $bp-max) {
		@each $i in $values {
			#{nth($i, 1)}: #{(1 / ($site-columns + 2) * 100) * nth($i, 2)}vw;
		}
	}
	// lock it in px values so it won't keep growing
	@include mq($bp-max) {
		@each $i in $values {
			//#{nth($i, 1)}: #{($site-max-width / $site-columns) * nth($i, 2)}px;
			#{nth($i, 1)}: #{$site-column-size * nth($i, 2)}px;
		}
	}
}


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

	USAGE:

	.card {
		@include border-radius;
	}

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

 */
@mixin border-radius($type: s) {
	@if ($type == 's') {
		border-radius: map-get($border-radius, s);
	}
	@if ($type == 'm') {
		border-radius: map-get($border-radius, m);
	}
	@if ($type == 'l') {
		border-radius: map-get($border-radius, l);
	}
}

/**
 * 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;
	}

 */

/*
 * Lobotomized owl selector.
 * - Gives the children of the element spacing
 * - https://alistapart.com/article/axiomatic-css-and-lobotomized-owls
 */
@mixin owl-children($margin: #{$line-height-ratio}rem) {
	& > * + * {
		margin-top: $margin;
	}
}

// Gives the element itself spacing
@mixin owl($margin: #{$line-height-ratio}rem, $mq: null) {
	@if($mq == null) {
		& + & {
			margin-top: $margin;
		}
	} @else {
		@include mq($max: $mq){
			& + & {
				margin-top: $margin;
			}
		}
	}
}

/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */

@mixin hyphenate {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}




/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
@mixin contain($mq: null, $max: null) {
	margin-left: auto;
	margin-right: auto;

	@if ($max == null) {
		max-width: #{$site-max-width}px;

		// if no argument is passed contain on all viewports
		@if ($mq == null) {
			width: calc((100% / #{$site-columns}) * #{$site-columns - 2});
		} @else {
			// if media query is passed use that in our mixin
			@include mq($mq) {
				width: calc((100% / #{$site-columns}) * #{$site-columns - 2});
			}
		}
	}
	@else {
		@include mq($max: $max) {
			width: calc((100% / #{$site-columns}) * #{$site-columns - 2});
		}
	}
}


/*
 *	A mixin to set elements to its own named grid-area
 */

@mixin template($elements...) {
	@each $element in $elements {
		&__#{$element} {
			grid-area: $element;
			display: block; // In IE grid items can't be inline
		}
	}
}