@if $use-rules == true{

/*------------------------------------*\
    $RULES
\*------------------------------------*/
/**
 * Horizontal rules, extend `hr`.
 *
 * Demo: jsfiddle.net/inuitcss/L6GuZ
 *
 */
.rule{
    color:$base-ui-color;
    border:none;
    border-bottom-width:1px;
    border-bottom-style:solid;
    margin-bottom:$base-spacing-unit - 1px;
    margin-bottom:(($base-spacing-unit - 1px) / $base-font-size)*1rem;
}


/**
 * Dotted rules
 */
.rule--dotted{
    border-bottom-style:dotted;
}


/**
 * Dashed rules
 */
.rule--dashed{
    border-bottom-style:dashed;
}


/**
 * Ornamental rules. Places a § over the rule.
 */
.rule--ornament{
    position:relative;

    &:after{
        content:"\00A7";
        position:absolute;
        top:   0;
        right: 0;
        left:  0;
        line-height:0;
        text-align:center;
    }

    /**
    * Pass in an arbitrary ornament though a data attribute, e.g.:
    *
      <hr class="rule  rule--ornament" data-ornament="!">
    *
    */
    &[data-ornament]:after{
        content:attr(data-ornament);
    }
}

}//endif