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

@mixin absolute($w: 100%, $h: 100%) {
	position: absolute;
	left: 0; right: 0; bottom: 0; top: 0;
	width: $w;
	height: $h;
	margin: auto auto;
}

@mixin overlay($offset: 0) {
	position: absolute;

	bottom: $offset;
	left: $offset;
	right: $offset;
	top: $offset;
}

@mixin ellipsis() {
	white-space: nowrap;
	text-overflow: ellipsis;	
	overflow: hidden;
}

@mixin bgCover($relativeUrl) {
	background: url($mainBgUrl) no-repeat center center;
	background-size: cover;
}

@mixin bgTranslucentDark($opacity) {
	background: rgba(0, 0, 0, $opacity);
}

@mixin bgTranslucentBright($opacity) {
	background: rgba(255, 255, 255, $opacity);
}

@mixin placeholderStyle {
	$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input';
	@each $placeholder in $placeholders {
		&:#{$placeholder}-placeholder {
			@content
		}
	}
}

@mixin setFocusHighLight($color) {
	&:focus {
		box-shadow: 0 0 8px rgba($color, 0.6);
	}
}

@mixin loading($size: 16px, $color: $textColor) {
	animation: spin-around .8s infinite linear;
	border: 2px solid $color;
	border-radius: 100%;
	border-right-color: transparent;
	border-top-color: transparent;
	content: "";
	display: block;
	height: $size;
	width: $size;
}

@mixin center($size) {
	left: 50%;
	margin-left: -($size / 2);
	margin-top: -($size / 2);
	position: absolute;
	top: 50%;
}



@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
	::-webkit-scrollbar {
		width: $size;
		height: $size;
	}

	::-webkit-scrollbar-thumb {
		background: $foreground-color;
		cursor: pointer;
		-webkit-border-radius: 1ex;
		border: none;
	}

	::-webkit-scrollbar-track {
		background: $background-color;
	}

	::-webkit-scrollbar-corner {
		background: $backgroundColor;
	}

	// For Internet Explorer
	body {
		scrollbar-face-color: $foreground-color;
		scrollbar-track-color: $background-color;
	}
	
}