// -------------------------------------------------------------------
// :: MIXINS
// -------------------------------------------------------------------
// Custom mixins to make standard behaviour & css more modular
//
//

// :: CLEARFLOAT
// clear float that can be applied to an element where all the childeren are floated.

@mixin clearfloat() {
	&:before,
	&:after {
		content: '';
		display: table;
	}

	&:after {
		clear: both;
	}
}

// :: SPREAD
// forces an element to take up the entire space of it's parent.

@mixin spread(){
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

// :: CENTERED
// Use this to center something

@mixin centered() {
	text-align: center;
}

// -------------------------------------------------------------------
// :: UTILITY HELPERS
// -------------------------------------------------------------------
// To provide screen readers an optimal experience
// add hidden DOM-elements with additional info
//
// - http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont

.u-hidden {
	width: 1px !important;
	height: 1px !important;
	margin: -1px;
	padding: 0;
	border: none;
	clip: rect(0 0 0 0);
	position: absolute;
	overflow: hidden;
}

.u-scrollable{
	overflow-y: scroll;
}

.u-clearfloat{
	@include clearfloat();
}

.u-text-right {
	text-align: right;
}

.u-text-center {
	@include centered();
}

.u-text-left {
	text-align: left;
}

.u-float-right {
	float: right;
}

.u-float-left {
	float: left;
}

.collapse {
	display: none;
}

.u-contact-links {
	a {
		display: block;
		letter-spacing: 1.25px;

		&:hover {
			text-decoration: none !important;

			strong {
				text-decoration: underline;
			}
		}
	}
}