.hr(@background: @black, @height: 2px, @width: (@default--space * 5), @content: false, @margin-left: 2px, @margin-top: 0, @margin-vertical: @default--space) {
  background: @background;
  border: 0;
  height: @height;
  margin-bottom: @margin-vertical;
  margin-left: @margin-left;
  width: @width;

  & when (@content = false) {
    display: inline-block;
    margin-top: 0;
  }

  & when (@content = true) {
    content: '';
    display: block;
    margin-top: @margin-vertical;
  }
}

.hr-gray-wide(@content: true) {
  .hr(@background: @gray-1, @height: 1px, @width: 100%, @content: @content, @margin-left: 0);
}

hr {
  .hr();
}
