// Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix() {
	&:before,
	&:after {
		content: " "; // 1
		display: table; // 2
	}
	&:after {
		clear: both;
	}
}

// Fluid container
@mixin container($half-gutter: 1rem) {
	margin-right: auto;
	margin-left: auto;
	padding-right: $half-gutter;
	padding-left: $half-gutter;
}

// Fixed-width container
@mixin container-fixed($half-gutter: 1rem,
		$screen-sm-min: $screen-sm-min, $container-sm: $container-sm,
		$screen-md-min: $screen-md-min, $container-md: $container-md,
		$screen-lg-min: $screen-lg-min, $container-lg: $container-lg) {
	@include container($half-gutter);
	@media (min-width: $screen-sm-min) {
		width: $container-sm;
	}
	@media (min-width: $screen-md-min) {
		width: $container-md;
	}
	@media (min-width: $screen-lg-min) {
		width: $container-lg;
	}
}

// Hide text visually, but make it still accessable on screen reader devices.
@mixin screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	// Fix smushed off-screen accessible text.
	// https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.wb4ui7wyr
	white-space: nowrap;
}

// Antialiasing
@mixin font-smoothing {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@mixin undo-font-smoothing {
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}

// Line clamping
@mixin line-clamp($line-clamp, $line-height: $line-height-computed) {
	display: -webkit-box;
	-webkit-line-clamp: $line-clamp;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	// Fallback
	line-height: $line-height;
	max-height: ($line-height * $line-clamp);
}

@mixin line-clamp-simple($line-clamp, $line-height: $line-height-computed) {
	-webkit-line-clamp: $line-clamp;
	// Fallback
	line-height: $line-height;
	max-height: ($line-height * $line-clamp);
}

// User select with browser vendor prefixes
@mixin user-select($value) {
	-ms-user-select: $value;
	-moz-user-select: $value;
	-webkit-user-select: $value;
}

// Title
@mixin title($font-size: 1.125rem) {
	margin-bottom: 1rem;
	font-size: $font-size;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	color: inherit;
}
