// # Borders
// This adds a border and additional spacing directly to an element.

// ## Examples

// <div class="example html">
//      <div class="border--top">Border on top</div>
// </div>

// <div class="example html">
//      <div class="border--bottom">Border on bottom</div>
// </div>

// <div class="example html">
//      <div class="border--right">Border on right</div>
// </div>

// <div class="example html">
//      <div class="border--left">Border on left</div>
// </div>

// ### Border All
// With default padding.

%border--all,
.border--all {
  border: 1px solid map-fetch($color, ui base) !important;
}

// ### Border Top/Bottom
// These add padding on top and bottom.

%border--top,
.border--top {
  border-top: 1px solid map-fetch($color, ui base) !important;
}

%border--bottom,
.border--bottom {
  border-bottom: 1px solid map-fetch($color, ui base) !important;
}

%border--ends,
.border--ends {
  @extend %border--top;
  @extend %border--bottom;
}


// ### Border Left/Right
// These don't add margin so they remain flush with right/left side.

%border--left,
.border--left {
  border-left: 1px solid map-fetch($color, ui base) !important;
}

%border--right,
.border--right {
  border-right: 1px solid map-fetch($color, ui base) !important;
}

%border--sides,
.border--sides {
  @extend %border--left;
  @extend %border--right;
}