/* Outline Inward */
@mixin outline-inward {
	display: inline-block;
	$outerBorderWidth: 4px;
	$innerBorderWidth: 4px;

	position: relative;

	@include hacks();

	&:before {
		content: '';
		position: absolute;
		border: $primaryColour solid $outerBorderWidth;
		top: -($outerBorderWidth + $innerBorderWidth) * 2;
		right: -($outerBorderWidth + $innerBorderWidth) * 2;
		bottom: -($outerBorderWidth + $innerBorderWidth) * 2;
		left: -($outerBorderWidth + $innerBorderWidth) * 2;
		opacity: 0;
		transition-duration: .3s;
		transition-property: top, right, bottom, left;
	}

	&:hover:before {
		top: -($outerBorderWidth + $innerBorderWidth);
		right: -($outerBorderWidth + $innerBorderWidth);
		bottom: -($outerBorderWidth + $innerBorderWidth);
		left: -($outerBorderWidth + $innerBorderWidth);
		opacity: 1;
	}
}