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

@mixin hoverActiveFocus() {
	&:hover,
	&:active,
	&:focus {
		@content;
	}
}

@mixin screen-reader-text() {
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	/* stylelint-disable */
	clip: rect(1px, 1px, 1px, 1px);
	/* stylelint-enable */
	position: absolute !important;
}

@mixin underlinedLink() {
	font-weight: 600;
	text-decoration: underline;

	&:hover {
		text-decoration: none;
	}
}

@mixin message( $glyph: '\f05a', $color: $info ) {
	padding: 1em ms(3) 1em ms(6);
	background: rgba( $color, 0.7 );
	margin-bottom: ms(5);
	font-weight: normal;
	position: relative;
	color: #fff;
	text-shadow: none;

	&::before {
		font-family: 'FontAwesome';
		content: $glyph;
		color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: ms(5);
		background: rgba( darken( $color, 3% ), 0.7 );
		text-align: center;
		padding: 1em ms(-2);
		font-weight: normal !important;
		text-shadow: none;
	}

	a {
		color: #fff;
		text-decoration: underline;

		&:hover {
			color: #fff;
			text-decoration: none;
		}
	}

	a.button {
		background: #fff;
		color: $color;
		font-size: ms(-1);
		padding: 0.202em ms(-2);

		&:hover,
		&:active {
			background: rgba( #fff, 0.8 );
			color: $color;
		}
	}
}

@mixin button() {
	border: 0;
	background: none;
	background-color: $color_body;
	border-color: $color_body;
	color: #fff;
	cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
	padding: ms(-2) ms(2);
	text-decoration: none;
	font-weight: 600;
	text-shadow: none;
	display: inline-block;
	outline: none;
	-webkit-appearance: none;
	border-radius: 0;
	box-shadow: inset 0 -1px 0 rgba( #000, 0.3 );
}

@mixin transition ($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}