// Responsive media mixins
@mixin lg {
	@media (max-width: #{$wrapper}rem) {
		@content;
	}
}

@mixin md {
	@media (max-width: #{$desktop}rem) {
		@content;
	}
}

@mixin sm {
	@media (max-width: #{$tablet}rem) {
		@content;
	}
}

@mixin xs {
	@media (max-width: #{$mobile}rem) {
		@content;
	}
}

// Hover mixin
@mixin hover {
	@media (hover: hover) {
		&:hover {
			@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;
	}
}
