// Nth-child mixin
// @see lukyvj.github.io/family.scss
@import '~family.scss/source/src/_family.scss';

// Rem mixin with fallback in px
@mixin rem($size) {
	font-size: $size;
	font-size: #{($size / $rem-baseline)}rem;
}

// Media query
@mixin media($screen) {
	@include av-mq($screen) {
		@content;
	}
}

// Media query width mixin
@mixin mediawidth($max) {
	@media (max-width: #{$max}px) {
		@content;
	}
}

// Media query height mixin
@mixin mediaheight($max) {
	@media (max-height: #{$max}px) {
		@content;
	}
}

// Background mixin
@mixin background($image: none, $size: cover, $position: center, $repeat: no-repeat) {
	@if $image != none {
		background-image: url('../images/#{$image}');
	}
	background-size: $size;
	background-position: $position;
	background-repeat: $repeat;
}

// Image mixin
@mixin image($image) {
	background-image: url('../images/#{$image}');
}

// Background cover mixin
@mixin cover() {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

// Background contain mixin
@mixin contain() {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

// Size mixin
@mixin size($width, $height: null) {
	@if $height == null {
		width: $width;
		height: $width;
	}
	@else {
		width: $width;
		height: $height;
	}
}

// Center mixin
@mixin center($axis: "both") {
	@if $axis == "both" {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	@if $axis == "x" {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	@if $axis == "y" {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	@if $axis == "block" {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

// Absolute mixin
@mixin fill($position: absolute) {
	position: $position;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

// Focus mixin
@mixin focus() {
	:focus {
		outline: none;
	}

	::-moz-focus-inner {
		border: 0;
	}
}

// Select mixin
@mixin select($background: initial, $color: initial) {
	::selection {
		background: $background;
		color: $color;
		text-shadow: none;
	}

	::-moz-selection {
		background: $background;
		color: $color;
		text-shadow: none;
	}
}

// Placeholder mixin
@mixin placeholder($color: initial) {
	::-webkit-input-placeholder {
		color: $color;
	}

	::-moz-placeholder {
		color: $color;
	}

	:-ms-input-placeholder {
		color: $color;
	}

	:-moz-placeholder {
		color: $color;
	}
}
