//
// Fonts
// @group:	Font name
// @id:		Font id		[light | regular | medium | bold | extra-bold + (italic)]
// @font:	Font family
// @weight:	Font weight	[100 - 900]
// @style:	Font style	[normal | italic | oblique]
//
$font-stack: (
	(group: cabin,	id: regular,				font: ("Cabin", Helvetica, Arial, sans-serif), weight: 400, style: normal),
	(group: cabin,	id: medium,					font: ("Cabin", Helvetica, Arial, sans-serif), weight: 500, style: normal),
	(group: cabin,	id: bold,					font: ("Cabin", Helvetica, Arial, sans-serif), weight: 700, style: normal),
	(group: cabin,	id: regular-italic,			font: ("Cabin", Helvetica, Arial, sans-serif), weight: 400, style: italic),
	(group: cabin,	id: medium-italic,			font: ("Cabin", Helvetica, Arial, sans-serif), weight: 500, style: italic),
	(group: cabin,	id: bold-italic,			font: ("Cabin", Helvetica, Arial, sans-serif), weight: 700, style: italic)
);

@mixin font($group, $id: regular, $size: 1, $line-height: var(--global-line-height)) {
	@each $font in $font-stack {
		@if ($group == map-get($font, group) and $id == map-get($font, id)) {
			/* style | weight | size/line-height | family */
			font: map-get($font, style) map-get($font, weight) #{$size + rem}/$line-height map-get($font, font);
		}
	}
}

//
// Z-index helper
//
@mixin z-index($level) {
	@if $level == -1 { z-index: -10; }
	@if $level == 0 { z-index: 0; }
	@if $level == 1 { z-index: 10; }
	@if $level == 2 { z-index: 20; }
	@if $level == 3 { z-index: 30; }
	@if $level == 4 { z-index: 40; }
	@if $level == 5 { z-index: 50; }
	@if $level == 6 { z-index: 60; }
	@if $level == 7 { z-index: 70; }
	@if $level == 8 { z-index: 80; }
	@if $level == 9 { z-index: 90; }
	@if $level == 10 { z-index: 100; }
}

//
// Simple clearfix mixin
// Returns a clearfix for that object
//
@mixin clearfix() {
	zoom: 1;

	&::before,
	&::after {
		content: "";
		display: table;
		line-height: 0;
	}

	&::after { clear: both; }
}

//
// Simple Zero Margin/Padding mixin
// @return margin/padding: 0;
//
@mixin clean() {
	margin: 0;
	padding: 0;
}

//
// Simple vertical align hack
// Returns relative position, and use translateY
//
@mixin yAlign($position: relative) {
	position: $position;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

//
// Simple horizontal align hack
// Returns relative position, and use translateX
//
@mixin xAlign($position: relative) {
	left: 50%;
	position: $position;
	transform: translate3d(-50%, 0, 0);
}

//
// Simple center align hack
// Returns relative position, and use translate3d
//
@mixin Align($position: relative) {
	left: 50%;
	position: $position;
	top: 50%;
	transform: translate3d(-50%, -50%, 0);
}

//
// Drop-shadow according to Google Materials
// @param  {int}	$depth		[0-5]
// @return {string}				[Returns box-shadow accoring to Google Materials]
//
@mixin drop-shadow($depth) {
	@if $depth == 0 {
		box-shadow: none;
	}

	@if $depth == 1 {
		box-shadow: 0 1.5px 3px rgba(black, .24), 0 3px 8px rgba(black, .05);
	}

	@if $depth == 2 {
		box-shadow: 0 4px 7px rgba(black, .23), 0 8px 25px rgba(black, .05);
	}

	@if $depth == 3 {
		box-shadow: 0 7px 10px rgba(black, .3), 0 10px 50px rgba(black, .12);
	}

	@if $depth == 4 {
		box-shadow: 0 10px 15px rgba(black, .28), 0 15px 60px rgba(black, .18);
	}

	@if $depth == 5 {
		box-shadow: 0 16px 20px rgba(black, .29), 0 20px 65px rgba(black, .18);
	}
}