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


/**
 *	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: null) {
	@if map-has-key($palettes, $palette) {
		@if map-has-key(map-get($palettes, $palette), $level) {
			@return map-get(map-get($palettes, $palette), $level);
		} @else {
			// If level doesn't exist in map, give the first value of the palette
			@return nth(nth(map-get($palettes, $palette), 1), 2);
		}
	}

	@warn "Unknown color: `#{$palette}` in $palette. ";
	@return hotpink;
}

// 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 only for mobile viewport

 USAGE:

 .example {
	 @include vspacing-s(
				'margin-top' 1
		);
  }

 */



@mixin vspacing-s($values...) {
	@include mq($max: m) {
		@each $i in $values {
			// By setting gutter size as a halve column width we can make 'squares' on mobile
			#{nth($i, 1)}: #{($site-gutter-width * 2) * nth($i, 2)};
		}
	}
}

@mixin vspacing-m($values...) {
	@include mq(m, l) {
		@each $i in $values {
			#{nth($i, 1)}: #{(1 / ($site-columns-m + 2) * 100) * nth($i, 2)}vw;
		}
	}
}

@mixin vspacing-l($values...) {
	@include mq(l, $bp-max) {
		@each $i in $values {
			#{nth($i, 1)}: #{(1 / ($site-columns-l + 2) * 100) * nth($i, 2)}vw;
		}
	}
}

@mixin vspacing-max($values...) {
	@include mq($bp-max) {
		@each $i in $values {
			#{nth($i, 1)}: #{($site-max-width / $site-columns-l) * nth($i, 2)}px;
		}
	}
}

/*
 * From values given return the correct v-spacing for each breakpoint
 */
@mixin vspacing($values...) {
	@include vspacing-s($values...);
	@include vspacing-m($values...);
	@include vspacing-l($values...);
	@include vspacing-max($values...);
}

@mixin vspacing-m-up($values...) {
	@include vspacing-m($values...);
	@include vspacing-l($values...);
	@include vspacing-max($values...);
}

@mixin vspacing-m-down($values...) {
	@include vspacing-s($values...);
	@include vspacing-m($values...);
}

@mixin vspacing-l-up($values...) {
	@include vspacing-l($values...);
	@include vspacing-max($values...);
}

@mixin vspacing-l-down($values...) {
	@include vspacing-s($values...);
	@include vspacing-m($values...);
	@include vspacing-l($values...);
}


/**
 *	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 palette(box-shadow);
	}
	@if ($type == 'low') {
		box-shadow: 0 1px 6px 0 palette(box-shadow);
	}
}

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

 */

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

/**
 *  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
 */
@mixin contain($onMedium: true) {
	width: calc(100% - #{double($site-gutter-width)}); // Making sure it doesn’t get to small with little content
	margin-left: auto;
	margin-right: auto;

	@include mq(m) {
		@if($onMedium == true) {
			width: calc((100% / #{$site-columns-m + 2}) * #{$site-columns-m});
		} @else {
			width: 100%;
		}
	}

	@include mq(l) {
		width: calc((100% / #{$site-columns-l + 2}) * #{$site-columns-l});
		max-width: #{$site-max-width}px;
	}
}


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


// Basic heading styling
@mixin text-style($type: 4){
	@if($type == 1){
		@include font-size(xl);
		@include font-family(primary);
		@include font-weight(bold);
	}
	@if($type == 2){
		@include font-size(l);
		@include font-family(primary);
		@include font-weight(regular);
	}
	@if($type == 3){
		@include font-size(m);
		@include font-family(primary);
		@include font-weight(bold);
	}
	@if($type == 4){
		@include font-weight(bold);
	}
	@if($type == 5){
		@include font-family(primary);
		@include font-weight(bold);
		@include font-size(s);
		text-transform: uppercase;
		letter-spacing: 2px;
	}
}

// A colored background with a gradient and a triangle shaped shadow/shade

@mixin bg-triangle-shade($shade: primary, $origin: null){
	@if($origin == null) {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		overflow: hidden;

		@if ($shade == primary) {
			background: linear-gradient(palette(primary, 500), palette(primary, 700));
		}

		&::before {
			pointer-events: none;
			content: '';
			display: block;
			position: absolute;
			z-index: 0;
			width: 1000%;
			height: 1000%;
			background-color: rgba(palette(primary, 900), .1);
			transform: matrix(0.9, 0.52, -0.9, 0.52, 0, -2);
		}

		@if ($shade == neutral) {
			&::before {
				background-color: palette(neutral, 100);
			}
		}
	}
	@else {
		&::before {
			@if ($origin == topleft) {
				top: 0;
				left: 0;
				transform-origin: left top;
			}

			@if ($origin == topright) {
				top: 0;
				right: 0;
				transform-origin: right top;
			}

			@if ($origin == bottomleft) {
				left: 0;
				bottom: 0;
				transform-origin: left bottom;
			}
		}
	}
}


// Decorative element in the shape of a hexagon
// Options for size and position

@mixin ornament-hex-stroked($size: 'medium', $position: null) {
	$aspectRatio: 1.14433;

	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(50%);

	@if ($size == 'medium') {
		$width: 48px;
		width: #{$width};
		height: #{$width * $aspectRatio};
		background-image: url(/img/ornament-hexagon-medium.svg);

		@include mq(800) {
			$width: 96px;
			width: #{$width};
			height: #{$width * $aspectRatio};
		}
	}

	@if ($size == 'large') {
		$width: 48px;
		width: #{$width};
		height: #{$width * $aspectRatio};
		background-image: url(/img/ornament-hexagon-large.svg);

		@include mq(480, m) {
			$width: 74px;
			width: #{$width};
			height: #{$width * $aspectRatio};
		}
		@include mq(m) {
			$width: 150px;
			width: #{$width};
			height: #{$width * $aspectRatio};
		}

	}

	@if ($position == 'topright') {
		bottom: auto;
		left: auto;
		top: 0;
		right: 0;
		transform: translateY(-50%) translateX(50%);
	}

	@if ($position == 'bottomleft') {
		transform: translateY(50%) translateX(-50%);
	}
}

@mixin ornament-hex-filled($position: bottomleft, $size: null) {
	$aspectRatio: 1.15625;
	$width: if($size, $size, 4vw);
	position: absolute;
	width: #{$width};
	height: #{$width * $aspectRatio};
	background-image: url(/img/ornament-hexagon-medium--filled.svg);
	background-size: cover;

	@if ($position == bottomleft) {
		left: 0;
		bottom: 0;
		transform: translateX(-50%) translateY(50%);
	}
	@if ($position == bottomright) {
		right: 0;
		bottom: 0;
		transform: translateX(50%) translateY(50%);
	}
	@if ($position == topright) {
		right: 0;
		top: 0;
		transform: translateX(50%) translateY(-50%);
	}

	@if ($width == null) {
		@include mq(m, 1400) {
			$width: 6vw;
			width: #{$width};
			height: #{$width * $aspectRatio};
		}
		@include mq(1400) {
			$width: 120px;
			width: #{$width};
			height: #{$width * $aspectRatio};
		}
	}
}