//------------------------------------------------------------------------------------------------
// HORIZONTAL RULE
//------------------------------------------------------------------------------------------------

/*
[1] We decorate the <hr> by making it 1px big and using background-color, which is different
from how frameworks like Bootstrap do it which use borders. This is because, in CSS, borders inherit
the parent text color, rather than parent border-color, so we need a solution which plays nicely
with how theme utilities are structured.
*/

hr {
	margin: 1em 0 1.2em 0;
	height: rem(1px); /* [1] */
	background-color: color($global-body-color); /* [1] */
}