hr {
    clear       : both;
    border      : none;
    border-top  : @hr-size solid @hr-color;
    line-height : 0;
    margin      : 1em 0;
    background  : @content-bg;
    color       : @hr-color;

    &.small when (unit(@hr-size) > 1) {
        border-top-width : 1px;
    }

    &.large {
        border-top-width : @hr-size * 2;
    }

    &.larger {
        border-top-width : @hr-size * 3;
    }

    // With text
    &::before {
        content     : attr(title);
        top         : -0.6em;
        position    : relative;
        line-height : 1.2em;
        color       : inherit;
        max-width   : 94%;
        margin      : -(@hr-size / 2) 3% 0;
        padding     : 0 .75em;
        background  : inherit;
        .text-overflow();
        .inline-block();
    }

    &[class*="icon-"], &[class^=" icon-"] {
        &::before {
            top : -0.5em;
        }
    }

    &.left when (@separator-left) and (@separator-style) {
        text-align : left;
    }
    &.right when (@separator-right) and (@separator-style) {
        text-align : right;
    }
    &.center when (@separator-center) and (@separator-style) {
        text-align : center;
    }

    // Separator circle
    &.circle when (@separator-circle) and (@separator-style) {
        zoom : 1;

        &::before {
            padding    : .35em .75em;
            background : @hr-color;
            color      : #fff;
            top        : -0.9em;
            .border-radius(2em);
        }
    }

    &.dashed {
        border-top-style : dashed;
    }

    &.dotted {
        border-top-style : dotted;
    }
}