@import './variables.scss';

@function em($px, $context: 16) {
	@return ($px / $context) * 1em;
}

@mixin smaller($px) {
	@media only screen and (max-width: em($px)) {
		@content;
	}
}

@mixin greater($px) {
	@media only screen and (min-width: em($px)) {
		@content;
	}
}

@mixin font-smoothing($value: on) {
	@if $value == on {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	@else {
		-webkit-font-smoothing: subpixel-antialiased;
		-moz-osx-font-smoothing: auto;
	}
}

@mixin clearfix() {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

@mixin hidetext() {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

@mixin hideme() {
	position: absolute;
	left: -100%;
	opacity: 0;
}

@keyframes rotateThis {
	from {
		transform: rotate(0deg);
		transform-origin: 50%;
	}
	to {
		transform: rotate(360deg);
		transform-origin: 50%;
	}
}


@mixin loading() {
	&:after {
		font-family: "times new roman", serif;
		content: "···";
		text-align: center;
		display: inline-block;
		color: $green;
		animation-name: rotateThis;
		animation-duration: 1s;
		animation-iteration-count: infinite;
	}
}