// ---
// title: Rules
// description: Adds styling to an 'hr'. Use this between blocks of text or other elements to provide separation.
// ---

// <div class="example html">
//   <hr class="lego-rule">
// </div>

// <div class="example html">
//   <hr class="lego-rule lego-rule--dotted">
// </div>

// <div class="example html">
//   <hr class="lego-rule lego-rule--dashed">
// </div>

// [---]

%#{$namespace}rule,
.#{$namespace}rule {
  border: 0;
  height: 0;
  border-top: 1px solid map-fetch($color, ui base);
  margin-top: spacer(1) - 1px;
  margin-bottom: spacer(1);

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

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