// NOTE: @requires _theme.scss
// NOTE: @requires _functions.scss

/*
	Common media query mixin.

	Usage:
	.element {
		@include screen('tablet') {
			width: 90%;
		}
		@include screen('desktop') {
			width: 85%;
		}
		@include screen('(min-width: 999px)') {
			width: 1280px;
		}
	}
 */

@mixin screen($size) {
	$mediaQueries: (
		'mobile': $media-mobile,
		'mobile-portrait': $media-mobile-portrait,
		'mobile-landscape': $media-mobile-landscape,
		
		'tablet': $media-tablet,
		'tablet-portrait': $media-tablet-portrait,
		'tablet-landscape': $media-tablet-landscape,
		
		'desktop': $media-desktop,
		
		'non-mobile': $media-non-mobile,
		'non-desktop': $media-non-desktop,
	);

	// Use predefined media query
	@each $key, $value in $mediaQueries {
		@if $key == $size {
			@media only screen and #{$value} {
				@content;
			}
		}
	}

	// Use custom media query
	@if map-has-key($mediaQueries, $size) != true {
		@media only screen and #{$size} {
			@content;
		}
	}
}

/*
	Common typography mixin.
	
	It allows to assign only passed values.
	
	Usage:
	@include font(
		$family: Value,      [mono, sans, serif] => $font-family
		$size: Value,        [text-giga, text-huge, text-regular, ...] => $font-size
		$weight: Value,      [bold, normal] => $font-weight
		$transform: Value,   [capitalize, ...] => $font-transform
		$color: String,      ['disabled', 'default' ,'error', 'warning'] => $font-colors
	);
 */
@mixin font(
	$family: null,
	$size: null,
	$weight: null,
	$transform: null,
	$color: null
) {
	font-family: get($font-family, $family);
	font-weight: $weight;
	font-size: map-deep-get($font-size, $size, 'font-size');
	line-height: map-deep-get($font-size, $size, 'line-height');
	text-transform: $transform;
	letter-spacing: if($transform == uppercase, 0.05rem, map-deep-get($font-size, $size, 'letter-spacing')); // like js ternary operator
	color: get($font-colors, $color);
}

/*
	Transfer each map pair of KEY: VALUE to CSS-PROPERTY: CSS-PROPERTY-VALUE;
 
	Usage:
	@include mapToProps($someMap); ==> $someMap: ( font-size: 1px, line-height: 1.5 );
 */
@mixin mapToProps($map) {
	@each $property-name, $property-value in $map {
		#{$property-name}: $property-value;
	}
}

@mixin retina($x: 3) {
	@media
	only screen and (-webkit-min-device-pixel-ratio: $x),
	only screen and (min-device-pixel-ratio: $x) {
		@content;
	}
}

/*
	@usage —
	.menu li {
		@include relative;
	}
	.sub-menu {
		@include absolute(top 100% left 0);
	}
	.sticky-bar {
		@include fixed(top 0 left 0);
	}
*/
@mixin position($position, $args) {
	position: $position;
	@each $o in top right bottom left {
		$i: index($args, $o);
		@if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number {
			#{$o}: nth($args, $i + 1);
		}
	}
}

@mixin absolute($args: '') {
	@include position(absolute, $args);
}

@mixin fixed($args: '') {
	@include position(fixed, $args);
}

@mixin relative($args: '') {
	@include position(relative, $args);
}

@mixin center() {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@mixin centerX() {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

@mixin centerY() {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

@mixin clearfix {
	&:before,
	&:after {
		display: table;
		content: "";
	}

	&:after {
		clear: both;
	}
}

@mixin no-drag {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

@mixin nl {
	margin: 0;
	padding: 0;
	text-indent: 0;
	list-style: none;
	list-style-position: outside;
}

@mixin selection {
	& ::selection {
		@content;
	}
	& ::-moz-selection {
		@content;
	}
}

@mixin placeholder-color($color) {
	&.placeholder {
		color: $color;
	}
	&::-moz-placeholder {
		color: $color;
	}
	&::-webkit-input-placeholder {
		color: $color;
	}
}

@mixin unselectable() {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@mixin font-size($size) {
	font-size: $size;
	font-size: calculateRem($size);
}

/* *
* - Grid system (alternative)
*
* - Two types:
    - 1. grid with floats (default)
    - 2. inline - grid with inline-blocks
*
* - @{link - http://thesassway.com/intermediate/simple-grid-mixins}
* */
@mixin row ($inline: false) {
	@if $inline {
		font-size: 0;
	} @else {
		@include clearfix();
	}
}

@mixin col (
	$col,
	$sum,
	$gap    : 1em,
	$first  : false,
	$last   : false,
	$inline : false,
	$align  : top,
	$fluid  : false,
	$float  : right
) {

	width: 100%;
	padding-left: if($first, 0, $gap);
	padding-right: if($last, 0, $gap);

	@if $inline {
		display: inline-block;
		font-size: $gap;
	} @else {
		float: $float;
	}

	@if $fluid {
		width: percentage($col/$sum);
	}

	@media only screen and (min-width: 768px) {
		width: percentage($col/$sum);
		vertical-align: if($inline, $align, initial);
	}

}