// Default font
@mixin typeface {
	// From: Better Helvetica Font Stack http://j.mp/9t6O6Z
	font-family: "Helvetica Neue", Arial, sans-serif;
}

// Global transition
@mixin global-transition {
	@include transition(all, 150ms, ease-in-out);
}

// Inline Block + Zoom Fix
@mixin inline-block-zoom {
	@include inline-block;
	zoom: 1;
}

// A new micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
@mixin microfix {
	// For modern browsers
	&:before, &:after {
		content: "";
		display: table;
	}

	&:after {
		clear: both;
	}

	@if $legacy-support-for-ie {
		// For IE 6/7 (trigger hasLayout)
		zoom: 1;
	}
}

@mixin grad($top, $btm) {
	background-color: mix($top, $btm);
	@include background-image(linear-gradient($top, $btm));
}

@mixin debug {
	@if $DEBUG {
		outline: 1px solid #f00;
	}
}

@mixin user-select($prop) {
	-webkit-user-select: $prop;
	-moz-user-select: $prop;
	-ms-user-select: $prop;
	-o-user-select: $prop;
	user-select: $prop;
}

@mixin ellipsis {
	white-space: nowrap;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

// improved hiddden text hack
@mixin hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

@mixin button {
	@include user-select(none);
	@include border-radius($gridlet);
	@include single-box-shadow(none);
	@include single-text-shadow(none);
	border: 1px solid rgba($blue, 0.5);
	background: $light-blue;
	color: $blue;
	cursor: pointer;
	display: inline-block;
	font: 16px/1 AvenirRoman;
	outline: 0;
	padding: $gridlet*2 $gridlet*3;
	width: auto;

	&:hover, &.active {
		background-color: $blue;
		color: $light-blue;
	}
}

@mixin big-button {
	@include user-select(none);
	@include background-image(linear-gradient(#5d8197, #3d5768));
	@include border-radius($gridlet*2);
	@include single-box-shadow(rgba($dark-blue, 0.15), 0px, 3px, 0px);
	@include single-text-shadow(rgba($dark-blue, 0.6), 0px, 2px, 0px);
	border: 1px solid $gray;
	color: #fff;
	display: inline-block;
	font: 24px/1 AvenirBlack;
	outline: 0;
	padding: $gridlet*3 $gridlet*7;
	width: auto;

	&:hover {
		background: $blue;
	}
}

@mixin triangle($direction: up, $color: #000, $size: 5px) {
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;

	@if $direction == "up" {
		border-width: 0 $size ($size * 2);
		border-bottom-color: $color;
	}

	@if $direction == "down" {
		border-width: ($size * 2) $size 0;
		border-top-color: $color;
	}

	@if $direction == "left" {
		border-width: $size ($size * 2) $size 0;
		border-right-color: $color;
	}

	@if $direction == "right" {
		border-width: $size 0 $size ($size * 2);
		border-left-color: $color;
	}
}
