@stackoverflow/stacks 1.9.0 → 1.9.1

package/lib/atomic/border.less

@@ -1,397 +1,397 @@
-//
-//  STACK OVERFLOW
-//  BORDER CLASSES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  TABLE OF CONTENTS
-//  • BORDER
-//  • WIDTH
-//  • STYLE
-//  • RADIUS
-//  • COLORS
-//
-//  ============================================================================
-//  $   BORDER
-//      Default border has 1px width and solid style. To apply a non-black
-//      color, use a border-color class.
-//
-//      Border Sides:
-//      bn: border none
-//      ba: border all sides
-//      bt: border top side
-//      br: border right side
-//      bl: border left side
-//      bb: border bottom side
-//      bx: border x-axis
-//      by: border y-axis
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.ba', { .bas-solid; .baw1; });
-#stacks-internals #responsify('.bt', { .bts-solid; .btw1; });
-#stacks-internals #responsify('.br', { .brs-solid; .brw1; });
-#stacks-internals #responsify('.bb', { .bbs-solid; .bbw1; });
-#stacks-internals #responsify('.bl', { .bls-solid; .blw1; });
-.bx { .bls-solid; .brs-solid; .bxw1; }
-.by { .bts-solid; .bbs-solid; .byw1; }
-
-//  ============================================================================
-//  $   WIDTH
-//      w0: 0 border width
-//      w1: First step:    1px border width
-//      w2: Second step:   2px border width
-//      w3: Third step:    4px border width
-//      w4: Fourth step:   8px border width
-//  ----------------------------------------------------------------------------
-//  $$  All Sides
-#stacks-internals #responsify('.baw0', { border-width: 0 !important; });
-.baw1 { border-width: var(--su-static1) !important; }
-.baw2 { border-width: var(--su-static2) !important; }
-.baw3 { border-width: var(--su-static4) !important; }
-
-//  $$  Top Border
-#stacks-internals #responsify('.btw0', { border-top-width: 0 !important; });
-.btw1 { border-top-width: var(--su-static1) !important; }
-.btw2 { border-top-width: var(--su-static2) !important; }
-.btw3 { border-top-width: var(--su-static4) !important; }
-
-//  $$  Right Border
-#stacks-internals #responsify('.brw0', { border-right-width: 0 !important; });
-.brw1 { border-right-width: var(--su-static1) !important; }
-.brw2 { border-right-width: var(--su-static2) !important; }
-.brw3 { border-right-width: var(--su-static4) !important; }
-
-//  $$  Bottom Border
-#stacks-internals #responsify('.bbw0', { border-bottom-width: 0 !important; });
-.bbw1 { border-bottom-width: var(--su-static1) !important; }
-.bbw2 { border-bottom-width: var(--su-static2) !important; }
-.bbw3 { border-bottom-width: var(--su-static4) !important; }
-
-//  $$  Left Border
-#stacks-internals #responsify('.blw0', { border-left-width: 0 !important; });
-.blw0 { border-left-width: 0 !important; }
-.blw1 { border-left-width: var(--su-static1) !important; }
-.blw2 { border-left-width: var(--su-static2) !important; }
-.blw3 { border-left-width: var(--su-static4) !important; }
-
-//  $$  Y-Axis Border
-.byw0 { .btw0; .bbw0; }
-.byw1 { .btw1; .bbw1; }
-.byw2 { .btw2; .bbw2; }
-.byw3 { .btw3; .bbw3; }
-
-//  $$  X-Axis Border
-.bxw0 { .brw0; .blw0; }
-.bxw1 { .brw1; .blw1; }
-.bxw2 { .brw2; .blw2; }
-.bxw3 { .brw3; .blw3; }
-
-
-//  ============================================================================
-//  $   STYLE
-//      s-dashed: dashed border style
-//      s-solid:  solid border style
-//  ============================================================================
-//  $$  All sides
-.bas-solid { border-style: solid !important; }
-.bas-dashed { border-style: dashed !important; }
-
-//  $$  Top Border
-.bts-solid { border-top-style: solid !important; }
-.bts-dashed { border-top-style: dashed !important; }
-
-//  $$  Right Border
-.brs-solid { border-right-style: solid !important; }
-.brs-dashed { border-right-style: dashed !important; }
-
-//  $$  Bottom Border
-.bbs-solid { border-bottom-style: solid !important; }
-.bbs-dashed { border-bottom-style: dashed !important; }
-
-//  $$  Left Border
-.bls-solid { border-left-style: solid !important; }
-.bls-dashed { border-left-style: dashed !important; }
-
-
-//  ============================================================================
-//  $   BORDER RADIUS
-//      br-sm:  Small step:   3px border radius
-//      br-md:  Medium step:  5px border radius
-//      br-lg:  Large step:   7px border radius
-//  ----------------------------------------------------------------------------
-//  $$  All Sides
-.bar-sm { border-radius: var(--br-sm) !important; }
-.bar-md { border-radius: var(--br-md) !important; }
-.bar-lg { border-radius: var(--br-lg) !important; }
-.bar-circle { border-radius: 100% !important; }
-.bar-pill { border-radius: 1000px !important; }
-
-//  $$  Top Left Corner
-.btlr0 { border-top-left-radius: 0 !important; }
-.btlr-sm { border-top-left-radius: var(--br-sm) !important; }
-.btlr-md { border-top-left-radius: var(--br-md) !important; }
-.btlr-lg { border-top-left-radius: var(--br-lg) !important; }
-
-//  $$  Top Right Corner
-.btrr0 { border-top-right-radius: 0 !important; }
-.btrr-sm { border-top-right-radius: var(--br-sm) !important; }
-.btrr-md { border-top-right-radius: var(--br-md) !important; }
-.btrr-lg { border-top-right-radius: var(--br-lg) !important; }
-
-//  $$  Bottom Left Corner
-.bblr0 { border-bottom-left-radius: 0 !important; }
-.bblr-sm { border-bottom-left-radius: var(--br-sm) !important; }
-.bblr-md { border-bottom-left-radius: var(--br-md) !important; }
-.bblr-lg { border-bottom-left-radius: var(--br-lg) !important; }
-
-//  $$  Bottom Right Corner
-.bbrr0 { border-bottom-right-radius: 0 !important; }
-.bbrr-sm { border-bottom-right-radius: var(--br-sm) !important; }
-.bbrr-md { border-bottom-right-radius: var(--br-md) !important; }
-.bbrr-lg { border-bottom-right-radius: var(--br-lg) !important; }
-
-//  $$  Top Corners
-.btr0 { .btlr0; .btrr0; }
-.btr-sm { .btlr-sm; .btrr-sm; }
-.btr-md { .btlr-md; .btrr-md; }
-.btr-lg { .btlr-lg; .btrr-lg; }
-
-//  $$  Right Corners
-.brr0 { .btrr0; .bbrr0; }
-.brr-sm { .btrr-sm; .bbrr-sm; }
-.brr-md { .btrr-md; .bbrr-md; }
-.brr-lg { .btrr-lg; .bbrr-lg; }
-
-//  $$  Bottom Corners
-.bbr0 { .bblr0; .bbrr0; }
-.bbr-sm { .bblr-sm; .bbrr-sm; }
-.bbr-md { .bblr-md; .bbrr-md; }
-.bbr-lg { .bblr-lg; .bbrr-lg; }
-
-//  $$  Left Corners
-.blr0 { .btlr0; .bblr0; }
-.blr-sm { .btlr-sm; .bblr-sm; }
-.blr-md { .btlr-md; .bblr-md; }
-.blr-lg { .btlr-lg; .bblr-lg; }
-
-//  $$  All Sides
-#stacks-internals #responsify('.bar0', { border-radius: 0 !important; });
-
-//  ============================================================================
-//  $   COLORS
-//  ============================================================================
-//  $$  WHITE
-//  ----------------------------------------------------------------------------
-.bc-white-1 { border-color: var(--black-500) !important; }
-.bc-white-2 { border-color: var(--black-300) !important; }
-.bc-white-3,
-.bc-white { border-color: var(--white) !important; }
-
-.highcontrast-mode({
-    .bc-white-1 { border-color: var(--black-025) !important; }
-    .bc-white-2 { border-color: var(--black-050) !important; }
-});
-
-//  $$  BLACK
-//  ----------------------------------------------------------------------------
-.bc-black-025 { border-color: var(--black-025) !important; }
-.bc-black-1, // Deprecated
-.bc-black-050 { border-color: var(--black-050) !important; }
-.bc-black-2, // Deprecated
-.bc-black-075 { border-color: var(--black-075) !important; }
-.bc-black-3, // Deprecated
-.bc-black-100 { border-color: var(--black-100) !important; }
-.bc-black-150 { border-color: var(--black-150) !important; }
-.bc-black-4, // Deprecated
-.bc-black-200 { border-color: var(--black-200) !important; }
-.bc-black-5, // Deprecated
-.bc-black-300 { border-color: var(--black-300) !important; }
-.bc-black-350 { border-color: var(--black-350) !important; }
-.bc-black-6, // Deprecated
-.bc-black-400 { border-color: var(--black-400) !important; }
-.bc-black-7, // Deprecated
-.bc-black-500 { border-color: var(--black-500) !important; }
-.bc-black-600 { border-color: var(--black-600) !important; }
-.bc-black-8, // Deprecated
-.bc-black-700 { border-color: var(--black-700) !important; }
-.bc-black-750 { border-color: var(--black-750) !important; }
-.bc-black-9, // Deprecated
-.bc-black-800 { border-color: var(--black-800) !important; }
-.bc-black-10, // Deprecated
-.bc-black-900 { border-color: var(--black-900) !important; }
-
-.highcontrast-mode({
-    .bc-black-025,
-    .bc-black-1, // Deprecated
-    .bc-black-050,
-    .bc-black-2, // Deprecated
-    .bc-black-075,
-    .bc-black-3, // Deprecated
-    .bc-black-100,
-    .bc-black-150,
-    .bc-black-4, // Deprecated
-    .bc-black-200 { border-color: var(--black-300) !important; }
-});
-
-//  $$  ORANGE
-//  ----------------------------------------------------------------------------
-.bc-orange-050 { border-color: var(--orange-050) !important; }
-.bc-orange-1, // Deprecated
-.bc-orange-100 { border-color: var(--orange-100) !important; }
-.bc-orange-200 { border-color: var(--orange-200) !important; }
-.bc-orange-300 { border-color: var(--orange-300) !important; }
-.bc-orange-2, // Deprecated
-.bc-orange-400 { border-color: var(--orange-400) !important; }
-.bc-orange-500 { border-color: var(--orange-500) !important; }
-.bc-orange-3, // Deprecated
-.bc-orange-600 { border-color: var(--orange-600) !important; }
-.bc-orange-700 { border-color: var(--orange-700) !important; }
-.bc-orange-800 { border-color: var(--orange-800) !important; }
-.bc-orange-900 { border-color: var(--orange-900) !important; }
-
-//  $$  BLUE
-//  ----------------------------------------------------------------------------
-.bc-blue-050 { border-color: var(--blue-050) !important; }
-.bc-blue-1, // Deprecated
-.bc-blue-100 { border-color: var(--blue-100) !important; }
-.bc-blue-200 { border-color: var(--blue-200) !important; }
-.bc-blue-300 { border-color: var(--blue-300) !important; }
-.bc-blue-2, // Deprecated
-.bc-blue-400 { border-color: var(--blue-400) !important; }
-.bc-blue-500 { border-color: var(--blue-500) !important; }
-.bc-blue-3, // Deprecated
-.bc-blue-600 { border-color: var(--blue-600) !important; }
-.bc-blue-700 { border-color: var(--blue-700) !important; }
-.bc-blue-800 { border-color: var(--blue-800) !important; }
-.bc-blue-900 { border-color: var(--blue-900) !important; }
-
-//  $$  POWDER
-//  ----------------------------------------------------------------------------
-.bc-powder-050 { border-color: var(--powder-050) !important; }
-.bc-powder-1, // Deprecated
-.bc-powder-100 { border-color: var(--powder-100) !important; }
-.bc-powder-200 { border-color: var(--powder-200) !important; }
-.bc-powder-300 { border-color: var(--powder-300) !important; }
-.bc-powder-2, // Deprecated
-.bc-powder-400 { border-color: var(--powder-400) !important; }
-.bc-powder-500 { border-color: var(--powder-500) !important; }
-.bc-powder-3, // Deprecated
-.bc-powder-600 { border-color: var(--powder-600) !important; }
-.bc-powder-700 { border-color: var(--powder-700) !important; }
-.bc-powder-800 { border-color: var(--powder-800) !important; }
-.bc-powder-900 { border-color: var(--powder-900) !important; }
-
-//  $$  GREEN
-//  ----------------------------------------------------------------------------
-.bc-green-025 { border-color: var(--green-025) !important; }
-.bc-green-050 { border-color: var(--green-050) !important; }
-.bc-green-1, // Deprecated
-.bc-green-100 { border-color: var(--green-100) !important; }
-.bc-green-200 { border-color: var(--green-200) !important; }
-.bc-green-300 { border-color: var(--green-300) !important; }
-.bc-green-2, // Deprecated
-.bc-green-400 { border-color: var(--green-400) !important; }
-.bc-green-500 { border-color: var(--green-500) !important; }
-.bc-green-3, // Deprecated
-.bc-success,
-.bc-green-600 { border-color: var(--green-600) !important; }
-.bc-green-700 { border-color: var(--green-700) !important; }
-.bc-green-800 { border-color: var(--green-800) !important; }
-.bc-green-900 { border-color: var(--green-900) !important; }
-
-//  $$  RED
-//  ----------------------------------------------------------------------------
-.bc-red-025 { border-color: var(--red-025) !important; }
-.bc-red-050 { border-color: var(--red-050) !important; }
-.bc-red-1, // Deprecated
-.bc-red-100 { border-color: var(--red-100) !important; }
-.bc-red-200 { border-color: var(--red-200) !important; }
-.bc-red-300 { border-color: var(--red-300) !important; }
-.bc-red-2, // Deprecated
-.bc-error,
-.bc-red-400 { border-color: var(--red-400) !important; }
-.bc-red-500 { border-color: var(--red-500) !important; }
-.bc-red-3, // Deprecated
-.bc-red-600 { border-color: var(--red-600) !important; }
-.bc-red-700 { border-color: var(--red-700) !important; }
-.bc-red-800 { border-color: var(--red-800) !important; }
-.bc-red-900 { border-color: var(--red-900) !important; }
-
-//  $$  YELLOW
-//  ----------------------------------------------------------------------------
-.bc-yellow-050 { border-color: var(--yellow-050) !important; }
-.bc-yellow-100 { border-color: var(--yellow-100) !important; }
-.bc-yellow-1, // Deprecated
-.bc-yellow-200 { border-color: var(--yellow-200) !important; }
-.bc-yellow-300 { border-color: var(--yellow-300) !important; }
-.bc-yellow-2, // Deprecated
-.bc-yellow-400 { border-color: var(--yellow-400) !important; }
-.bc-yellow-500 { border-color: var(--yellow-500) !important; }
-.bc-yellow-3, // Deprecated
-.bc-warning,
-.bc-yellow-600 { border-color: var(--yellow-600) !important; }
-.bc-yellow-700 { border-color: var(--yellow-700) !important; }
-.bc-yellow-800 { border-color: var(--yellow-800) !important; }
-.bc-yellow-900 { border-color: var(--yellow-900) !important; }
-
-//  $$  GOLD
-//  ----------------------------------------------------------------------------
-.bc-gold-lighter { border-color: var(--gold-lighter) !important; }
-.bc-gold { border-color: var(--gold) !important; }
-.bc-gold-darker { border-color: var(--gold-darker) !important; }
-
-//  $$  SILVER
-//  ----------------------------------------------------------------------------
-.bc-silver-lighter { border-color: var(--silver-lighter) !important; }
-.bc-silver { border-color: var(--silver) !important; }
-.bc-silver-darker { border-color: var(--silver-darker) !important; }
-
-//  $$  BRONZE
-//  ----------------------------------------------------------------------------
-.bc-bronze-lighter { border-color: var(--bronze-lighter) !important; }
-.bc-bronze { border-color: var(--bronze) !important; }
-.bc-bronze-darker { border-color: var(--bronze-darker) !important; }
-
-//  $$  PRIMARY
-//  ----------------------------------------------------------------------------
-.bc-theme-primary-025 { border-color: var(--theme-primary-025) !important; }
-.bc-theme-primary-050 { border-color: var(--theme-primary-050) !important; }
-.bc-theme-primary-075 { border-color: var(--theme-primary-075) !important; }
-.bc-theme-primary-100 { border-color: var(--theme-primary-100) !important; }
-.bc-theme-primary-150 { border-color: var(--theme-primary-150) !important; }
-.bc-theme-primary-200 { border-color: var(--theme-primary-200) !important; }
-.bc-theme-primary-300 { border-color: var(--theme-primary-300) !important; }
-.bc-theme-primary-350 { border-color: var(--theme-primary-350) !important; }
-.bc-theme-primary-400 { border-color: var(--theme-primary-400) !important; }
-.bc-theme-primary-500 { border-color: var(--theme-primary-500) !important; }
-.bc-theme-primary-600 { border-color: var(--theme-primary-600) !important; }
-.bc-theme-primary-700 { border-color: var(--theme-primary-700) !important; }
-.bc-theme-primary-800 { border-color: var(--theme-primary-800) !important; }
-.bc-theme-primary-900 { border-color: var(--theme-primary-900) !important; }
-
-//  $$  SECONDARY
-//  ----------------------------------------------------------------------------
-.bc-theme-secondary-025 { border-color: var(--theme-secondary-025) !important; }
-.bc-theme-secondary-050 { border-color: var(--theme-secondary-050) !important; }
-.bc-theme-secondary-075 { border-color: var(--theme-secondary-075) !important; }
-.bc-theme-secondary-100 { border-color: var(--theme-secondary-100) !important; }
-.bc-theme-secondary-150 { border-color: var(--theme-secondary-150) !important; }
-.bc-theme-secondary-200 { border-color: var(--theme-secondary-200) !important; }
-.bc-theme-secondary-300 { border-color: var(--theme-secondary-300) !important; }
-.bc-theme-secondary-350 { border-color: var(--theme-secondary-350) !important; }
-.bc-theme-secondary-400 { border-color: var(--theme-secondary-400) !important; }
-.bc-theme-secondary-500 { border-color: var(--theme-secondary-500) !important; }
-.bc-theme-secondary-600 { border-color: var(--theme-secondary-600) !important; }
-.bc-theme-secondary-700 { border-color: var(--theme-secondary-700) !important; }
-.bc-theme-secondary-800 { border-color: var(--theme-secondary-800) !important; }
-.bc-theme-secondary-900 { border-color: var(--theme-secondary-900) !important; }
-
-//  $$  TRANSPARENT
-//  ----------------------------------------------------------------------------
-.bc-transparent { border-color: transparent !important; }
-.d\:bc-transparent { .dark-mode({ border-color: transparent !important; }); }
-
-//  $$  INHERIT
-//  ----------------------------------------------------------------------------
-.bc-inherit { border-color: inherit !important; }
+//
+//  STACK OVERFLOW
+//  BORDER CLASSES
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  TABLE OF CONTENTS
+//  • BORDER
+//  • WIDTH
+//  • STYLE
+//  • RADIUS
+//  • COLORS
+//
+//  ============================================================================
+//  $   BORDER
+//      Default border has 1px width and solid style. To apply a non-black
+//      color, use a border-color class.
+//
+//      Border Sides:
+//      bn: border none
+//      ba: border all sides
+//      bt: border top side
+//      br: border right side
+//      bl: border left side
+//      bb: border bottom side
+//      bx: border x-axis
+//      by: border y-axis
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.ba', { .bas-solid; .baw1; });
+#stacks-internals #responsify('.bt', { .bts-solid; .btw1; });
+#stacks-internals #responsify('.br', { .brs-solid; .brw1; });
+#stacks-internals #responsify('.bb', { .bbs-solid; .bbw1; });
+#stacks-internals #responsify('.bl', { .bls-solid; .blw1; });
+.bx { .bls-solid; .brs-solid; .bxw1; }
+.by { .bts-solid; .bbs-solid; .byw1; }
+
+//  ============================================================================
+//  $   WIDTH
+//      w0: 0 border width
+//      w1: First step:    1px border width
+//      w2: Second step:   2px border width
+//      w3: Third step:    4px border width
+//      w4: Fourth step:   8px border width
+//  ----------------------------------------------------------------------------
+//  $$  All Sides
+#stacks-internals #responsify('.baw0', { border-width: 0 !important; });
+.baw1 { border-width: var(--su-static1) !important; }
+.baw2 { border-width: var(--su-static2) !important; }
+.baw3 { border-width: var(--su-static4) !important; }
+
+//  $$  Top Border
+#stacks-internals #responsify('.btw0', { border-top-width: 0 !important; });
+.btw1 { border-top-width: var(--su-static1) !important; }
+.btw2 { border-top-width: var(--su-static2) !important; }
+.btw3 { border-top-width: var(--su-static4) !important; }
+
+//  $$  Right Border
+#stacks-internals #responsify('.brw0', { border-right-width: 0 !important; });
+.brw1 { border-right-width: var(--su-static1) !important; }
+.brw2 { border-right-width: var(--su-static2) !important; }
+.brw3 { border-right-width: var(--su-static4) !important; }
+
+//  $$  Bottom Border
+#stacks-internals #responsify('.bbw0', { border-bottom-width: 0 !important; });
+.bbw1 { border-bottom-width: var(--su-static1) !important; }
+.bbw2 { border-bottom-width: var(--su-static2) !important; }
+.bbw3 { border-bottom-width: var(--su-static4) !important; }
+
+//  $$  Left Border
+#stacks-internals #responsify('.blw0', { border-left-width: 0 !important; });
+.blw0 { border-left-width: 0 !important; }
+.blw1 { border-left-width: var(--su-static1) !important; }
+.blw2 { border-left-width: var(--su-static2) !important; }
+.blw3 { border-left-width: var(--su-static4) !important; }
+
+//  $$  Y-Axis Border
+.byw0 { .btw0; .bbw0; }
+.byw1 { .btw1; .bbw1; }
+.byw2 { .btw2; .bbw2; }
+.byw3 { .btw3; .bbw3; }
+
+//  $$  X-Axis Border
+.bxw0 { .brw0; .blw0; }
+.bxw1 { .brw1; .blw1; }
+.bxw2 { .brw2; .blw2; }
+.bxw3 { .brw3; .blw3; }
+
+
+//  ============================================================================
+//  $   STYLE
+//      s-dashed: dashed border style
+//      s-solid:  solid border style
+//  ============================================================================
+//  $$  All sides
+.bas-solid { border-style: solid !important; }
+.bas-dashed { border-style: dashed !important; }
+
+//  $$  Top Border
+.bts-solid { border-top-style: solid !important; }
+.bts-dashed { border-top-style: dashed !important; }
+
+//  $$  Right Border
+.brs-solid { border-right-style: solid !important; }
+.brs-dashed { border-right-style: dashed !important; }
+
+//  $$  Bottom Border
+.bbs-solid { border-bottom-style: solid !important; }
+.bbs-dashed { border-bottom-style: dashed !important; }
+
+//  $$  Left Border
+.bls-solid { border-left-style: solid !important; }
+.bls-dashed { border-left-style: dashed !important; }
+
+
+//  ============================================================================
+//  $   BORDER RADIUS
+//      br-sm:  Small step:   3px border radius
+//      br-md:  Medium step:  5px border radius
+//      br-lg:  Large step:   7px border radius
+//  ----------------------------------------------------------------------------
+//  $$  All Sides
+.bar-sm { border-radius: var(--br-sm) !important; }
+.bar-md { border-radius: var(--br-md) !important; }
+.bar-lg { border-radius: var(--br-lg) !important; }
+.bar-circle { border-radius: 100% !important; }
+.bar-pill { border-radius: 1000px !important; }
+
+//  $$  Top Left Corner
+.btlr0 { border-top-left-radius: 0 !important; }
+.btlr-sm { border-top-left-radius: var(--br-sm) !important; }
+.btlr-md { border-top-left-radius: var(--br-md) !important; }
+.btlr-lg { border-top-left-radius: var(--br-lg) !important; }
+
+//  $$  Top Right Corner
+.btrr0 { border-top-right-radius: 0 !important; }
+.btrr-sm { border-top-right-radius: var(--br-sm) !important; }
+.btrr-md { border-top-right-radius: var(--br-md) !important; }
+.btrr-lg { border-top-right-radius: var(--br-lg) !important; }
+
+//  $$  Bottom Left Corner
+.bblr0 { border-bottom-left-radius: 0 !important; }
+.bblr-sm { border-bottom-left-radius: var(--br-sm) !important; }
+.bblr-md { border-bottom-left-radius: var(--br-md) !important; }
+.bblr-lg { border-bottom-left-radius: var(--br-lg) !important; }
+
+//  $$  Bottom Right Corner
+.bbrr0 { border-bottom-right-radius: 0 !important; }
+.bbrr-sm { border-bottom-right-radius: var(--br-sm) !important; }
+.bbrr-md { border-bottom-right-radius: var(--br-md) !important; }
+.bbrr-lg { border-bottom-right-radius: var(--br-lg) !important; }
+
+//  $$  Top Corners
+.btr0 { .btlr0; .btrr0; }
+.btr-sm { .btlr-sm; .btrr-sm; }
+.btr-md { .btlr-md; .btrr-md; }
+.btr-lg { .btlr-lg; .btrr-lg; }
+
+//  $$  Right Corners
+.brr0 { .btrr0; .bbrr0; }
+.brr-sm { .btrr-sm; .bbrr-sm; }
+.brr-md { .btrr-md; .bbrr-md; }
+.brr-lg { .btrr-lg; .bbrr-lg; }
+
+//  $$  Bottom Corners
+.bbr0 { .bblr0; .bbrr0; }
+.bbr-sm { .bblr-sm; .bbrr-sm; }
+.bbr-md { .bblr-md; .bbrr-md; }
+.bbr-lg { .bblr-lg; .bbrr-lg; }
+
+//  $$  Left Corners
+.blr0 { .btlr0; .bblr0; }
+.blr-sm { .btlr-sm; .bblr-sm; }
+.blr-md { .btlr-md; .bblr-md; }
+.blr-lg { .btlr-lg; .bblr-lg; }
+
+//  $$  All Sides
+#stacks-internals #responsify('.bar0', { border-radius: 0 !important; });
+
+//  ============================================================================
+//  $   COLORS
+//  ============================================================================
+//  $$  WHITE
+//  ----------------------------------------------------------------------------
+.bc-white-1 { border-color: var(--black-500) !important; }
+.bc-white-2 { border-color: var(--black-300) !important; }
+.bc-white-3,
+.bc-white { border-color: var(--white) !important; }
+
+.highcontrast-mode({
+    .bc-white-1 { border-color: var(--black-025) !important; }
+    .bc-white-2 { border-color: var(--black-050) !important; }
+});
+
+//  $$  BLACK
+//  ----------------------------------------------------------------------------
+.bc-black-025 { border-color: var(--black-025) !important; }
+.bc-black-1, // Deprecated
+.bc-black-050 { border-color: var(--black-050) !important; }
+.bc-black-2, // Deprecated
+.bc-black-075 { border-color: var(--black-075) !important; }
+.bc-black-3, // Deprecated
+.bc-black-100 { border-color: var(--black-100) !important; }
+.bc-black-150 { border-color: var(--black-150) !important; }
+.bc-black-4, // Deprecated
+.bc-black-200 { border-color: var(--black-200) !important; }
+.bc-black-5, // Deprecated
+.bc-black-300 { border-color: var(--black-300) !important; }
+.bc-black-350 { border-color: var(--black-350) !important; }
+.bc-black-6, // Deprecated
+.bc-black-400 { border-color: var(--black-400) !important; }
+.bc-black-7, // Deprecated
+.bc-black-500 { border-color: var(--black-500) !important; }
+.bc-black-600 { border-color: var(--black-600) !important; }
+.bc-black-8, // Deprecated
+.bc-black-700 { border-color: var(--black-700) !important; }
+.bc-black-750 { border-color: var(--black-750) !important; }
+.bc-black-9, // Deprecated
+.bc-black-800 { border-color: var(--black-800) !important; }
+.bc-black-10, // Deprecated
+.bc-black-900 { border-color: var(--black-900) !important; }
+
+.highcontrast-mode({
+    .bc-black-025,
+    .bc-black-1, // Deprecated
+    .bc-black-050,
+    .bc-black-2, // Deprecated
+    .bc-black-075,
+    .bc-black-3, // Deprecated
+    .bc-black-100,
+    .bc-black-150,
+    .bc-black-4, // Deprecated
+    .bc-black-200 { border-color: var(--black-300) !important; }
+});
+
+//  $$  ORANGE
+//  ----------------------------------------------------------------------------
+.bc-orange-050 { border-color: var(--orange-050) !important; }
+.bc-orange-1, // Deprecated
+.bc-orange-100 { border-color: var(--orange-100) !important; }
+.bc-orange-200 { border-color: var(--orange-200) !important; }
+.bc-orange-300 { border-color: var(--orange-300) !important; }
+.bc-orange-2, // Deprecated
+.bc-orange-400 { border-color: var(--orange-400) !important; }
+.bc-orange-500 { border-color: var(--orange-500) !important; }
+.bc-orange-3, // Deprecated
+.bc-orange-600 { border-color: var(--orange-600) !important; }
+.bc-orange-700 { border-color: var(--orange-700) !important; }
+.bc-orange-800 { border-color: var(--orange-800) !important; }
+.bc-orange-900 { border-color: var(--orange-900) !important; }
+
+//  $$  BLUE
+//  ----------------------------------------------------------------------------
+.bc-blue-050 { border-color: var(--blue-050) !important; }
+.bc-blue-1, // Deprecated
+.bc-blue-100 { border-color: var(--blue-100) !important; }
+.bc-blue-200 { border-color: var(--blue-200) !important; }
+.bc-blue-300 { border-color: var(--blue-300) !important; }
+.bc-blue-2, // Deprecated
+.bc-blue-400 { border-color: var(--blue-400) !important; }
+.bc-blue-500 { border-color: var(--blue-500) !important; }
+.bc-blue-3, // Deprecated
+.bc-blue-600 { border-color: var(--blue-600) !important; }
+.bc-blue-700 { border-color: var(--blue-700) !important; }
+.bc-blue-800 { border-color: var(--blue-800) !important; }
+.bc-blue-900 { border-color: var(--blue-900) !important; }
+
+//  $$  POWDER
+//  ----------------------------------------------------------------------------
+.bc-powder-050 { border-color: var(--powder-050) !important; }
+.bc-powder-1, // Deprecated
+.bc-powder-100 { border-color: var(--powder-100) !important; }
+.bc-powder-200 { border-color: var(--powder-200) !important; }
+.bc-powder-300 { border-color: var(--powder-300) !important; }
+.bc-powder-2, // Deprecated
+.bc-powder-400 { border-color: var(--powder-400) !important; }
+.bc-powder-500 { border-color: var(--powder-500) !important; }
+.bc-powder-3, // Deprecated
+.bc-powder-600 { border-color: var(--powder-600) !important; }
+.bc-powder-700 { border-color: var(--powder-700) !important; }
+.bc-powder-800 { border-color: var(--powder-800) !important; }
+.bc-powder-900 { border-color: var(--powder-900) !important; }
+
+//  $$  GREEN
+//  ----------------------------------------------------------------------------
+.bc-green-025 { border-color: var(--green-025) !important; }
+.bc-green-050 { border-color: var(--green-050) !important; }
+.bc-green-1, // Deprecated
+.bc-green-100 { border-color: var(--green-100) !important; }
+.bc-green-200 { border-color: var(--green-200) !important; }
+.bc-green-300 { border-color: var(--green-300) !important; }
+.bc-green-2, // Deprecated
+.bc-green-400 { border-color: var(--green-400) !important; }
+.bc-green-500 { border-color: var(--green-500) !important; }
+.bc-green-3, // Deprecated
+.bc-success,
+.bc-green-600 { border-color: var(--green-600) !important; }
+.bc-green-700 { border-color: var(--green-700) !important; }
+.bc-green-800 { border-color: var(--green-800) !important; }
+.bc-green-900 { border-color: var(--green-900) !important; }
+
+//  $$  RED
+//  ----------------------------------------------------------------------------
+.bc-red-025 { border-color: var(--red-025) !important; }
+.bc-red-050 { border-color: var(--red-050) !important; }
+.bc-red-1, // Deprecated
+.bc-red-100 { border-color: var(--red-100) !important; }
+.bc-red-200 { border-color: var(--red-200) !important; }
+.bc-red-300 { border-color: var(--red-300) !important; }
+.bc-red-2, // Deprecated
+.bc-error,
+.bc-red-400 { border-color: var(--red-400) !important; }
+.bc-red-500 { border-color: var(--red-500) !important; }
+.bc-red-3, // Deprecated
+.bc-red-600 { border-color: var(--red-600) !important; }
+.bc-red-700 { border-color: var(--red-700) !important; }
+.bc-red-800 { border-color: var(--red-800) !important; }
+.bc-red-900 { border-color: var(--red-900) !important; }
+
+//  $$  YELLOW
+//  ----------------------------------------------------------------------------
+.bc-yellow-050 { border-color: var(--yellow-050) !important; }
+.bc-yellow-100 { border-color: var(--yellow-100) !important; }
+.bc-yellow-1, // Deprecated
+.bc-yellow-200 { border-color: var(--yellow-200) !important; }
+.bc-yellow-300 { border-color: var(--yellow-300) !important; }
+.bc-yellow-2, // Deprecated
+.bc-yellow-400 { border-color: var(--yellow-400) !important; }
+.bc-yellow-500 { border-color: var(--yellow-500) !important; }
+.bc-yellow-3, // Deprecated
+.bc-warning,
+.bc-yellow-600 { border-color: var(--yellow-600) !important; }
+.bc-yellow-700 { border-color: var(--yellow-700) !important; }
+.bc-yellow-800 { border-color: var(--yellow-800) !important; }
+.bc-yellow-900 { border-color: var(--yellow-900) !important; }
+
+//  $$  GOLD
+//  ----------------------------------------------------------------------------
+.bc-gold-lighter { border-color: var(--gold-lighter) !important; }
+.bc-gold { border-color: var(--gold) !important; }
+.bc-gold-darker { border-color: var(--gold-darker) !important; }
+
+//  $$  SILVER
+//  ----------------------------------------------------------------------------
+.bc-silver-lighter { border-color: var(--silver-lighter) !important; }
+.bc-silver { border-color: var(--silver) !important; }
+.bc-silver-darker { border-color: var(--silver-darker) !important; }
+
+//  $$  BRONZE
+//  ----------------------------------------------------------------------------
+.bc-bronze-lighter { border-color: var(--bronze-lighter) !important; }
+.bc-bronze { border-color: var(--bronze) !important; }
+.bc-bronze-darker { border-color: var(--bronze-darker) !important; }
+
+//  $$  PRIMARY
+//  ----------------------------------------------------------------------------
+.bc-theme-primary-025 { border-color: var(--theme-primary-025) !important; }
+.bc-theme-primary-050 { border-color: var(--theme-primary-050) !important; }
+.bc-theme-primary-075 { border-color: var(--theme-primary-075) !important; }
+.bc-theme-primary-100 { border-color: var(--theme-primary-100) !important; }
+.bc-theme-primary-150 { border-color: var(--theme-primary-150) !important; }
+.bc-theme-primary-200 { border-color: var(--theme-primary-200) !important; }
+.bc-theme-primary-300 { border-color: var(--theme-primary-300) !important; }
+.bc-theme-primary-350 { border-color: var(--theme-primary-350) !important; }
+.bc-theme-primary-400 { border-color: var(--theme-primary-400) !important; }
+.bc-theme-primary-500 { border-color: var(--theme-primary-500) !important; }
+.bc-theme-primary-600 { border-color: var(--theme-primary-600) !important; }
+.bc-theme-primary-700 { border-color: var(--theme-primary-700) !important; }
+.bc-theme-primary-800 { border-color: var(--theme-primary-800) !important; }
+.bc-theme-primary-900 { border-color: var(--theme-primary-900) !important; }
+
+//  $$  SECONDARY
+//  ----------------------------------------------------------------------------
+.bc-theme-secondary-025 { border-color: var(--theme-secondary-025) !important; }
+.bc-theme-secondary-050 { border-color: var(--theme-secondary-050) !important; }
+.bc-theme-secondary-075 { border-color: var(--theme-secondary-075) !important; }
+.bc-theme-secondary-100 { border-color: var(--theme-secondary-100) !important; }
+.bc-theme-secondary-150 { border-color: var(--theme-secondary-150) !important; }
+.bc-theme-secondary-200 { border-color: var(--theme-secondary-200) !important; }
+.bc-theme-secondary-300 { border-color: var(--theme-secondary-300) !important; }
+.bc-theme-secondary-350 { border-color: var(--theme-secondary-350) !important; }
+.bc-theme-secondary-400 { border-color: var(--theme-secondary-400) !important; }
+.bc-theme-secondary-500 { border-color: var(--theme-secondary-500) !important; }
+.bc-theme-secondary-600 { border-color: var(--theme-secondary-600) !important; }
+.bc-theme-secondary-700 { border-color: var(--theme-secondary-700) !important; }
+.bc-theme-secondary-800 { border-color: var(--theme-secondary-800) !important; }
+.bc-theme-secondary-900 { border-color: var(--theme-secondary-900) !important; }
+
+//  $$  TRANSPARENT
+//  ----------------------------------------------------------------------------
+.bc-transparent { border-color: transparent !important; }
+.d\:bc-transparent { .dark-mode({ border-color: transparent !important; }); }
+
+//  $$  INHERIT
+//  ----------------------------------------------------------------------------
+.bc-inherit { border-color: inherit !important; }