// 888                           888
// 888                           888
// 888                           888
// 88888b.   .d88b.  888d888 .d88888  .d88b.  888d888 .d8888b
// 888 "88b d88""88b 888P"  d88" 888 d8P  Y8b 888P"   88K
// 888  888 888  888 888    888  888 88888888 888     "Y8888b.
// 888 d88P Y88..88P 888    Y88b 888 Y8b.     888          X88
// 88888P"   "Y88P"  888     "Y88888  "Y8888  888      88888P'

// Borders
//
// Our base border is a one pixel wide, solid grey border, as defined in [Tokens ➔ Borders](/tokens/borders). You can add this class to any <abbr>HTML</abbr> element:
//
// .border        - Adds our base border to any element.
//
// Markup:
// <div class="border">This element has a border around it.</div>
//
// Styleguide Utilities.Borders
.border {
  border: $border-base;
}

// Side-Specific Borders
//
// You can add these classes to any <abbr>HTML</abbr> element to give it a border on one side (they can also be combined):
//
// .border-top    - Adds our base border only on the top of the element.
// .border-right  - Adds our base border only on the right of the element.
// .border-bottom - Adds our base border only on the bottom of the element.
// .border-left   - Adds our base border only on the left of the element.
//
// Markup:
// <div class="border-top">This element has a top border.</div>
// <div class="border-right">This element has a right border.</div>
// <div class="border-bottom">This element has a bottom border.</div>
// <div class="border-left">This element has a left border.</div>
//
// Styleguide Utilities.Borders.SideSpecific
//
// Weight: 1
.border-bottom {
  border-bottom: $border-base;
}

.border-left {
  border-left: $border-base;
}

.border-right {
  border-right: $border-base;
}

.border-top {
  border-top: $border-base;
}

// Border Removal
//
// You can add these classes to any <abbr>HTML</abbr> element to *remove* a border from an element:
//
// .border-none         - Removes the border from all sides of the element.
// .border-top-none     - Removes the border only on the top of the element.
// .border-right-none   - Removes the border only on the right of the element.
// .border-bottom-none  - Removes the border only on the bottom of the element.
// .border-left-none    - Removes the border only on the left of the element.
//
// Markup:
// <div class="border border-top-none">This element has no top border.</div>
// <div class="border border-right-none">This element has no right border.</div>
// <div class="border border-bottom-none">This element has no bottom border.</div>
// <div class="border border-left-none">This element has no left border.</div>
//
// Styleguide Utilities.Borders.BorderRemoval
//
// Weight: 2
.border-none {
  border-width: 0;
}

.border-bottom-none {
  border-bottom-width: 0 !important;
}

.border-left-none {
  border-left-width: 0 !important;
}

.border-right-none {
  border-right-width: 0 !important;
}

.border-top-none {
  border-top-width: 0 !important;
}