Update to 5.0.0.beta1v5.0.0.beta1

1. rake update[v5.0.0-beta1]
2. Update version.rb and the README version

30 files changed, 245 insertions, 182 deletions

diff --git a/assets/stylesheets/_bootstrap-grid.scss b/assets/stylesheets/_bootstrap-grid.scss
index 2d81009..c222d8c 100644
--- a/assets/stylesheets/_bootstrap-grid.scss
+++ b/assets/stylesheets/_bootstrap-grid.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v5.0.0-alpha3 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.0.0-beta1 (https://getbootstrap.com/)
  * Copyright 2011-2020 The Bootstrap Authors
  * Copyright 2011-2020 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -42,23 +42,23 @@ $utilities: map-get-multiple(
     "bootstrap/margin-x",
     "bootstrap/margin-y",
     "bootstrap/margin-top",
-    "bootstrap/margin-right",
+    "bootstrap/margin-end",
     "bootstrap/margin-bottom",
-    "bootstrap/margin-left",
+    "bootstrap/margin-start",
     "bootstrap/negative-margin",
     "bootstrap/negative-margin-x",
     "bootstrap/negative-margin-y",
     "bootstrap/negative-margin-top",
-    "bootstrap/negative-margin-right",
+    "bootstrap/negative-margin-end",
     "bootstrap/negative-margin-bottom",
-    "bootstrap/negative-margin-left",
+    "bootstrap/negative-margin-start",
     "bootstrap/padding",
     "bootstrap/padding-x",
     "bootstrap/padding-y",
     "bootstrap/padding-top",
-    "bootstrap/padding-right",
+    "bootstrap/padding-end",
     "bootstrap/padding-bottom",
-    "bootstrap/padding-left",
+    "bootstrap/padding-start",
   )
 );
 
diff --git a/assets/stylesheets/_bootstrap-reboot.scss b/assets/stylesheets/_bootstrap-reboot.scss
index 384c463..36d9d3b 100644
--- a/assets/stylesheets/_bootstrap-reboot.scss
+++ b/assets/stylesheets/_bootstrap-reboot.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v5.0.0-alpha3 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.0.0-beta1 (https://getbootstrap.com/)
  * Copyright 2011-2020 The Bootstrap Authors
  * Copyright 2011-2020 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss
index 55a59ee..63520f0 100644
--- a/assets/stylesheets/_bootstrap.scss
+++ b/assets/stylesheets/_bootstrap.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v5.0.0-alpha3 (https://getbootstrap.com/)
+ * Bootstrap v5.0.0-beta1 (https://getbootstrap.com/)
  * Copyright 2011-2020 The Bootstrap Authors
  * Copyright 2011-2020 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/assets/stylesheets/bootstrap/_alert.scss b/assets/stylesheets/bootstrap/_alert.scss
index 24fa2bd..3d9b69b 100644
--- a/assets/stylesheets/bootstrap/_alert.scss
+++ b/assets/stylesheets/bootstrap/_alert.scss
@@ -44,9 +44,9 @@
 // Generate contextual modifier classes for colorizing the alert.
 
 @each $state, $value in $theme-colors {
-  $background: scale-color($value, $alert-bg-scale);
-  $border: scale-color($value, $alert-border-scale);
-  $color: scale-color($value, $alert-color-scale);
+  $background: shift-color($value, $alert-bg-scale);
+  $border: shift-color($value, $alert-border-scale);
+  $color: shift-color($value, $alert-color-scale);
   @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
     $color: mix($value, color-contrast($background), abs($alert-color-scale));
   }
diff --git a/assets/stylesheets/bootstrap/_breadcrumb.scss b/assets/stylesheets/bootstrap/_breadcrumb.scss
index b30668b..f7fafe7 100644
--- a/assets/stylesheets/bootstrap/_breadcrumb.scss
+++ b/assets/stylesheets/bootstrap/_breadcrumb.scss
@@ -18,7 +18,7 @@
       float: left; // Suppress inline spacings and underlining of the separator
       padding-right: $breadcrumb-item-padding-x;
       color: $breadcrumb-divider-color;
-      content: escape-svg($breadcrumb-divider);
+      content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
     }
   }
 
diff --git a/assets/stylesheets/bootstrap/_button-group.scss b/assets/stylesheets/bootstrap/_button-group.scss
index 1571d1e..13aa056 100644
--- a/assets/stylesheets/bootstrap/_button-group.scss
+++ b/assets/stylesheets/bootstrap/_button-group.scss
@@ -43,7 +43,7 @@
   // Reset rounded corners
   > .btn:not(:last-child):not(.dropdown-toggle),
   > .btn-group:not(:last-child) > .btn {
-    @include border-right-radius(0);
+    @include border-end-radius(0);
   }
 
   // The left radius should be 0 if the button is:
@@ -53,7 +53,7 @@
   > .btn:nth-child(n + 3),
   > :not(.btn-check) + .btn,
   > .btn-group:not(:first-child) > .btn {
-    @include border-left-radius(0);
+    @include border-start-radius(0);
   }
 }
 
@@ -75,11 +75,11 @@
 
   &::after,
   .dropup &::after,
-  .dropright &::after {
+  .dropend &::after {
     margin-left: 0;
   }
 
-  .dropleft &::before {
+  .dropstart &::before {
     margin-right: 0;
   }
 }
@@ -132,7 +132,7 @@
     @include border-bottom-radius(0);
   }
 
-  > .btn:not(:first-child),
+  > .btn ~ .btn,
   > .btn-group:not(:first-child) > .btn {
     @include border-top-radius(0);
   }
diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss
index 9b0f496..4b2eebf 100644
--- a/assets/stylesheets/bootstrap/_card.scss
+++ b/assets/stylesheets/bootstrap/_card.scss
@@ -69,7 +69,7 @@
   }
 
   + .card-link {
-    margin-left: $card-spacer-x;
+    margin-left: $card-spacer-x #{"/* rtl:ignore */"};
   }
 }
 
@@ -181,7 +181,7 @@
       // Handle rounded corners
       @if $enable-rounded {
         &:not(:last-child) {
-          @include border-right-radius(0);
+          @include border-end-radius(0);
 
           .card-img-top,
           .card-header {
@@ -196,7 +196,7 @@
         }
 
         &:not(:first-child) {
-          @include border-left-radius(0);
+          @include border-start-radius(0);
 
           .card-img-top,
           .card-header {
diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss
index ef77cbb..d2e42bc 100644
--- a/assets/stylesheets/bootstrap/_carousel.scss
+++ b/assets/stylesheets/bootstrap/_carousel.scss
@@ -3,12 +3,12 @@
 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
 //    even when their scroll action started on a carousel, but for compatibility (with Firefox)
 //    we're preventing all actions instead
-// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
+// 2. The .carousel-item-start and .carousel-item-end is used to indicate where
 //    the active slide is heading.
 // 3. .active.carousel-item is the current slide.
-// 4. .active.carousel-item-left and .active.carousel-item-right is the current
+// 4. .active.carousel-item-start and .active.carousel-item-end is the current
 //    slide in its in-transition state. Only one of these occurs at a time.
-// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
 //    is the upcoming slide in transition.
 
 .carousel {
@@ -42,16 +42,19 @@
   display: block;
 }
 
-.carousel-item-next:not(.carousel-item-left),
-.active.carousel-item-right {
+/* rtl:begin:ignore */
+.carousel-item-next:not(.carousel-item-start),
+.active.carousel-item-end {
   transform: translateX(100%);
 }
 
-.carousel-item-prev:not(.carousel-item-right),
-.active.carousel-item-left {
+.carousel-item-prev:not(.carousel-item-end),
+.active.carousel-item-start {
   transform: translateX(-100%);
 }
 
+/* rtl:end:ignore */
+
 
 //
 // Alternate transitions
@@ -65,14 +68,14 @@
   }
 
   .carousel-item.active,
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
+  .carousel-item-next.carousel-item-start,
+  .carousel-item-prev.carousel-item-end {
     z-index: 1;
     opacity: 1;
   }
 
-  .active.carousel-item-left,
-  .active.carousel-item-right {
+  .active.carousel-item-start,
+  .active.carousel-item-end {
     z-index: 0;
     opacity: 0;
     @include transition(opacity 0s $carousel-transition-duration);
@@ -128,6 +131,15 @@
   background-position: 50%;
   background-size: 100% 100%;
 }
+
+/* rtl:options: {
+  "autoRename": true,
+  "stringMap":[ {
+    "name"    : "prev-next",
+    "search"  : "prev",
+    "replace" : "next"
+  } ]
+} */
 .carousel-control-prev-icon {
   background-image: escape-svg($carousel-control-prev-icon-bg);
 }
@@ -135,7 +147,6 @@
   background-image: escape-svg($carousel-control-next-icon-bg);
 }
 
-
 // Optional indicator pips
 //
 // Add an ordered list with the following class and add a list item for each
diff --git a/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss
index fef1c9b..f9ad977 100644
--- a/assets/stylesheets/bootstrap/_dropdown.scss
+++ b/assets/stylesheets/bootstrap/_dropdown.scss
@@ -1,8 +1,8 @@
 // The dropdown wrapper (`<div>`)
 .dropup,
-.dropright,
+.dropend,
 .dropdown,
-.dropleft {
+.dropstart {
   position: relative;
 }
 
@@ -32,21 +32,31 @@
   border: $dropdown-border-width solid $dropdown-border-color;
   @include border-radius($dropdown-border-radius);
   @include box-shadow($dropdown-box-shadow);
+
+  // Reset positioning when positioned with Popper
+  &[style] {
+    right: auto !important; // stylelint-disable-line declaration-no-important
+  }
 }
 
 // scss-docs-start responsive-breakpoints
+// We deliberately hardcode the `bs-` prefix because we check
+// this custom property in JS to determine Popper's positioning
+
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    .dropdown-menu#{$infix}-left {
-      right: auto;
-      left: 0;
+    .dropdown-menu#{$infix}-start {
+      --bs-position: start;
+      right: auto #{"/* rtl:ignore */"};
+      left: 0 #{"/* rtl:ignore */"};
     }
 
-    .dropdown-menu#{$infix}-right {
-      right: 0;
-      left: auto;
+    .dropdown-menu#{$infix}-end {
+      --bs-position: end;
+      right: 0 #{"/* rtl:ignore */"};
+      left: auto #{"/* rtl:ignore */"};
     }
   }
 }
@@ -67,7 +77,7 @@
   }
 }
 
-.dropright {
+.dropend {
   .dropdown-menu {
     top: 0;
     right: auto;
@@ -77,14 +87,14 @@
   }
 
   .dropdown-toggle {
-    @include caret(right);
+    @include caret(end);
     &::after {
       vertical-align: 0;
     }
   }
 }
 
-.dropleft {
+.dropstart {
   .dropdown-menu {
     top: 0;
     right: 100%;
@@ -94,24 +104,13 @@
   }
 
   .dropdown-toggle {
-    @include caret(left);
+    @include caret(start);
     &::before {
       vertical-align: 0;
     }
   }
 }
 
-// When enabled Popper.js, reset basic dropdown position
-// stylelint-disable-next-line no-duplicate-selectors
-.dropdown-menu {
-  &[x-placement^="top"],
-  &[x-placement^="right"],
-  &[x-placement^="bottom"],
-  &[x-placement^="left"] {
-    right: auto;
-    bottom: auto;
-  }
-}
 
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
diff --git a/assets/stylesheets/bootstrap/_functions.scss b/assets/stylesheets/bootstrap/_functions.scss
index b95fbf9..29114fc 100644
--- a/assets/stylesheets/bootstrap/_functions.scss
+++ b/assets/stylesheets/bootstrap/_functions.scss
@@ -161,9 +161,8 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   @return mix(black, $color, $weight);
 }
 
-// Scale a color:
 // Shade the color if the weight is positive, else tint it
-@function scale-color($color, $weight) {
+@function shift-color($color, $weight) {
   @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
 }
 // scss-docs-end color-functions
diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss
index 2ce0c8b..a95adc1 100644
--- a/assets/stylesheets/bootstrap/_list-group.scss
+++ b/assets/stylesheets/bootstrap/_list-group.scss
@@ -99,13 +99,13 @@
 
       > .list-group-item {
         &:first-child {
-          @include border-bottom-left-radius($list-group-border-radius);
-          @include border-top-right-radius(0);
+          @include border-bottom-start-radius($list-group-border-radius);
+          @include border-top-end-radius(0);
         }
 
         &:last-child {
-          @include border-top-right-radius($list-group-border-radius);
-          @include border-bottom-left-radius(0);
+          @include border-top-end-radius($list-group-border-radius);
+          @include border-bottom-start-radius(0);
         }
 
         &.active {
@@ -152,8 +152,8 @@
 // Organizationally, this must come after the `:hover` states.
 
 @each $state, $value in $theme-colors {
-  $background: scale-color($value, $list-group-item-bg-scale);
-  $color: scale-color($value, $list-group-item-color-scale);
+  $background: shift-color($value, $list-group-item-bg-scale);
+  $color: shift-color($value, $list-group-item-color-scale);
   @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
     $color: mix($value, color-contrast($background), abs($alert-color-scale));
   }
diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss
index 607c317..852328a 100644
--- a/assets/stylesheets/bootstrap/_navbar.scss
+++ b/assets/stylesheets/bootstrap/_navbar.scss
@@ -56,7 +56,7 @@
 .navbar-brand {
   padding-top: $navbar-brand-padding-y;
   padding-bottom: $navbar-brand-padding-y;
-  margin-right: $navbar-brand-margin-right;
+  margin-right: $navbar-brand-margin-end;
   @include font-size($navbar-brand-font-size);
   text-decoration: if($link-decoration == none, null, none);
   white-space: nowrap;
diff --git a/assets/stylesheets/bootstrap/_pagination.scss b/assets/stylesheets/bootstrap/_pagination.scss
index 819f6d1..04bf825 100644
--- a/assets/stylesheets/bootstrap/_pagination.scss
+++ b/assets/stylesheets/bootstrap/_pagination.scss
@@ -31,7 +31,7 @@
 
 .page-item {
   &:not(:first-child) .page-link {
-    margin-left: $pagination-margin-left;
+    margin-left: $pagination-margin-start;
   }
 
   &.active .page-link {
diff --git a/assets/stylesheets/bootstrap/_popover.scss b/assets/stylesheets/bootstrap/_popover.scss
index 55bfe1f..e4f6860 100644
--- a/assets/stylesheets/bootstrap/_popover.scss
+++ b/assets/stylesheets/bootstrap/_popover.scss
@@ -1,7 +1,7 @@
 .popover {
   position: absolute;
   top: 0;
-  left: 0;
+  left: 0 #{"/* rtl:ignore */"};
   z-index: $zindex-popover;
   display: block;
   max-width: $popover-max-width;
@@ -36,7 +36,8 @@
 }
 
 .bs-popover-top {
-  margin-bottom: $popover-arrow-height;
+  // Overrule margin set by popper.js
+  margin-bottom: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
 
   > .popover-arrow {
     bottom: subtract(-$popover-arrow-height, $popover-border-width);
@@ -55,8 +56,9 @@
   }
 }
 
-.bs-popover-right {
-  margin-left: $popover-arrow-height;
+.bs-popover-end {
+  // Overrule margin set by popper.js
+  margin-left: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
 
   > .popover-arrow {
     left: subtract(-$popover-arrow-height, $popover-border-width);
@@ -79,7 +81,8 @@
 }
 
 .bs-popover-bottom {
-  margin-top: $popover-arrow-height;
+  // Overrule margin set by popper.js
+  margin-top: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
 
   > .popover-arrow {
     top: subtract(-$popover-arrow-height, $popover-border-width);
@@ -110,8 +113,9 @@
   }
 }
 
-.bs-popover-left {
-  margin-right: $popover-arrow-height;
+.bs-popover-start {
+  // Overrule margin set by popper.js
+  margin-right: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
 
   > .popover-arrow {
     right: subtract(-$popover-arrow-height, $popover-border-width);
@@ -134,21 +138,20 @@
 }
 
 .bs-popover-auto {
-  &[x-placement^="top"] {
+  &[data-popper-placement^="top"] {
     @extend .bs-popover-top;
   }
-  &[x-placement^="right"] {
-    @extend .bs-popover-right;
+  &[data-popper-placement^="right"] {
+    @extend .bs-popover-end;
   }
-  &[x-placement^="bottom"] {
+  &[data-popper-placement^="bottom"] {
     @extend .bs-popover-bottom;
   }
-  &[x-placement^="left"] {
-    @extend .bs-popover-left;
+  &[data-popper-placement^="left"] {
+    @extend .bs-popover-start;
   }
 }
 
-
 // Offset the popover to account for the popover arrow
 .popover-header {
   padding: $popover-header-padding-y $popover-header-padding-x;
diff --git a/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss
index f64297b..50ba743 100644
--- a/assets/stylesheets/bootstrap/_reboot.scss
+++ b/assets/stylesheets/bootstrap/_reboot.scss
@@ -1,4 +1,4 @@
-// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
 
 
 // Reboot
@@ -149,13 +149,13 @@ p {
 
 // Abbreviations
 //
-// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
+// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
 // 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 // 3. Add explicit cursor to indicate changed behavior.
 // 4. Prevent the text-decoration to be skipped.
 
 abbr[title],
-abbr[data-original-title] { // 1
+abbr[data-bs-original-title] { // 1
   text-decoration: underline; // 2
   text-decoration: underline dotted; // 2
   cursor: help; // 3
@@ -290,6 +290,8 @@ kbd,
 samp {
   font-family: $font-family-code;
   @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+  direction: ltr #{"/* rtl:ignore */"};
+  unicode-bidi: bidi-override;
 }
 
 // 1. Remove browser default top margin
@@ -551,6 +553,20 @@ legend {
   -webkit-appearance: textfield; // 2
 }
 
+// 1. A few input types should stay LTR
+// See https://rtlstyling.com/posts/rtl-styling#form-inputs
+// 2. RTL only output
+// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+
 // Remove the inner padding in Chrome and Safari on macOS.
 
 ::-webkit-search-decoration {
diff --git a/assets/stylesheets/bootstrap/_spinners.scss b/assets/stylesheets/bootstrap/_spinners.scss
index e932aac..7444ed1 100644
--- a/assets/stylesheets/bootstrap/_spinners.scss
+++ b/assets/stylesheets/bootstrap/_spinners.scss
@@ -3,7 +3,7 @@
 //
 
 @keyframes spinner-border {
-  to { transform: rotate(360deg); }
+  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
 }
 
 .spinner-border {
diff --git a/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss
index 1b2db30..506c60b 100644
--- a/assets/stylesheets/bootstrap/_tables.scss
+++ b/assets/stylesheets/bootstrap/_tables.scss
@@ -4,7 +4,6 @@
 
 .table {
   --#{$variable-prefix}table-bg: #{$table-bg};
-  --#{$variable-prefix}table-accent-bg: transparent;
   --#{$variable-prefix}table-striped-color: #{$table-striped-color};
   --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
   --#{$variable-prefix}table-active-color: #{$table-active-color};
diff --git a/assets/stylesheets/bootstrap/_toasts.scss b/assets/stylesheets/bootstrap/_toasts.scss
index e2b98e6..7a1cf73 100644
--- a/assets/stylesheets/bootstrap/_toasts.scss
+++ b/assets/stylesheets/bootstrap/_toasts.scss
@@ -1,29 +1,31 @@
 .toast {
-  max-width: $toast-max-width;
+  width: $toast-max-width;
+  max-width: 100%;
   @include font-size($toast-font-size);
   color: $toast-color;
+  pointer-events: auto;
   background-color: $toast-background-color;
   background-clip: padding-box;
   border: $toast-border-width solid $toast-border-color;
   box-shadow: $toast-box-shadow;
-  opacity: 0;
   @include border-radius($toast-border-radius);
 
-  &:not(:last-child) {
-    margin-bottom: $toast-padding-x;
+  &:not(.showing):not(.show) {
+    opacity: 0;
   }
 
-  &.showing {
-    opacity: 1;
+  &.hide {
+    display: none;
   }
+}
 
-  &.show {
-    display: block;
-    opacity: 1;
-  }
+.toast-container {
+  width: max-content;
+  max-width: 100%;
+  pointer-events: none;
 
-  &.hide {
-    display: none;
+  > :not(:last-child) {
+    margin-bottom: $toast-spacing;
   }
 }
 
diff --git a/assets/stylesheets/bootstrap/_tooltip.scss b/assets/stylesheets/bootstrap/_tooltip.scss
index 4d405e0..2993bf7 100644
--- a/assets/stylesheets/bootstrap/_tooltip.scss
+++ b/assets/stylesheets/bootstrap/_tooltip.scss
@@ -36,14 +36,14 @@
     bottom: 0;
 
     &::before {
-      top: 0;
+      top: -1px;
       border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
 }
 
-.bs-tooltip-right {
+.bs-tooltip-end {
   padding: 0 $tooltip-arrow-height;
 
   .tooltip-arrow {
@@ -52,7 +52,7 @@
     height: $tooltip-arrow-width;
 
     &::before {
-      right: 0;
+      right: -1px;
       border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
       border-right-color: $tooltip-arrow-color;
     }
@@ -66,14 +66,14 @@
     top: 0;
 
     &::before {
-      bottom: 0;
+      bottom: -1px;
       border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
 }
 
-.bs-tooltip-left {
+.bs-tooltip-start {
   padding: 0 $tooltip-arrow-height;
 
   .tooltip-arrow {
@@ -82,7 +82,7 @@
     height: $tooltip-arrow-width;
 
     &::before {
-      left: 0;
+      left: -1px;
       border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
       border-left-color: $tooltip-arrow-color;
     }
@@ -90,17 +90,17 @@
 }
 
 .bs-tooltip-auto {
-  &[x-placement^="top"] {
+  &[data-popper-placement^="top"] {
     @extend .bs-tooltip-top;
   }
-  &[x-placement^="right"] {
-    @extend .bs-tooltip-right;
+  &[data-popper-placement^="right"] {
+    @extend .bs-tooltip-end;
   }
-  &[x-placement^="bottom"] {
+  &[data-popper-placement^="bottom"] {
     @extend .bs-tooltip-bottom;
   }
-  &[x-placement^="left"] {
-    @extend .bs-tooltip-left;
+  &[data-popper-placement^="left"] {
+    @extend .bs-tooltip-start;
   }
 }
 
diff --git a/assets/stylesheets/bootstrap/_utilities.scss b/assets/stylesheets/bootstrap/_utilities.scss
index 03c71d1..89bf168 100644
--- a/assets/stylesheets/bootstrap/_utilities.scss
+++ b/assets/stylesheets/bootstrap/_utilities.scss
@@ -12,7 +12,11 @@ $utilities: map-merge(
     "float": (
       responsive: true,
       property: float,
-      values: left right none
+      values: (
+        start: left,
+        end: right,
+        none: none,
+      )
     ),
     "overflow": (
       property: overflow,
@@ -47,19 +51,23 @@ $utilities: map-merge(
       property: bottom,
       values: $position-values
     ),
-    "left": (
+    "start": (
       property: left,
+      class: start,
       values: $position-values
     ),
-    "right": (
+    "end": (
       property: right,
+      class: end,
       values: $position-values
     ),
     "translate-middle": (
       property: transform,
       class: translate-middle,
       values: (
-        null: (translateX(-50%) translateY(-50%))
+        null: translate(-50%, -50%),
+        x: translateX(-50%),
+        y: translateY(-50%),
       )
     ),
     "border": (
@@ -76,8 +84,9 @@ $utilities: map-merge(
         0: 0,
       )
     ),
-    "border-right": (
+    "border-end": (
       property: border-right,
+      class: border-end,
       values: (
         null: $border-width solid $border-color,
         0: 0,
@@ -90,8 +99,9 @@ $utilities: map-merge(
         0: 0,
       )
     ),
-    "border-left": (
+    "border-start": (
       property: border-left,
+      class: border-start,
       values: (
         null: $border-width solid $border-color,
         0: 0,
@@ -288,10 +298,10 @@ $utilities: map-merge(
       class: mt,
       values: map-merge($spacers, (auto: auto))
     ),
-    "margin-right": (
+    "margin-end": (
       responsive: true,
       property: margin-right,
-      class: mr,
+      class: me,
       values: map-merge($spacers, (auto: auto))
     ),
     "margin-bottom": (
@@ -300,10 +310,10 @@ $utilities: map-merge(
       class: mb,
       values: map-merge($spacers, (auto: auto))
     ),
-    "margin-left": (
+    "margin-start": (
       responsive: true,
       property: margin-left,
-      class: ml,
+      class: ms,
       values: map-merge($spacers, (auto: auto))
     ),
     // Negative margin utilities
@@ -331,10 +341,10 @@ $utilities: map-merge(
       class: mt,
       values: $negative-spacers
     ),
-    "negative-margin-right": (
+    "negative-margin-end": (
       responsive: true,
       property: margin-right,
-      class: mr,
+      class: me,
       values: $negative-spacers
     ),
     "negative-margin-bottom": (
@@ -343,10 +353,10 @@ $utilities: map-merge(
       class: mb,
       values: $negative-spacers
     ),
-    "negative-margin-left": (
+    "negative-margin-start": (
       responsive: true,
       property: margin-left,
-      class: ml,
+      class: ms,
       values: $negative-spacers
     ),
     // Padding utilities
@@ -374,10 +384,10 @@ $utilities: map-merge(
       class: pt,
       values: $spacers
     ),
-    "padding-right": (
+    "padding-end": (
       responsive: true,
       property: padding-right,
-      class: pr,
+      class: pe,
       values: $spacers
     ),
     "padding-bottom": (
@@ -386,10 +396,10 @@ $utilities: map-merge(
       class: pb,
       values: $spacers
     ),
-    "padding-left": (
+    "padding-start": (
       responsive: true,
       property: padding-left,
-      class: pl,
+      class: ps,
       values: $spacers
     ),
     // Text
@@ -424,7 +434,11 @@ $utilities: map-merge(
       responsive: true,
       property: text-align,
       class: text,
-      values: left right center
+      values: (
+        start: left,
+        end: right,
+        center: center,
+      )
     ),
     "color": (
       property: color,
@@ -483,7 +497,8 @@ $utilities: map-merge(
     "word-wrap": (
       property: word-wrap word-break,
       class: text,
-      values: (break: break-word)
+      values: (break: break-word),
+      rtl: false
     ),
     "font-family": (
       property: font-family,
@@ -517,9 +532,9 @@ $utilities: map-merge(
       class: rounded-top,
       values: (null: $border-radius)
     ),
-    "rounded-right": (
+    "rounded-end": (
       property: border-top-right-radius border-bottom-right-radius,
-      class: rounded-right,
+      class: rounded-end,
       values: (null: $border-radius)
     ),
     "rounded-bottom": (
@@ -527,9 +542,9 @@ $utilities: map-merge(
       class: rounded-bottom,
       values: (null: $border-radius)
     ),
-    "rounded-left": (
+    "rounded-start": (
       property: border-bottom-left-radius border-top-left-radius,
-      class: rounded-left,
+      class: rounded-start,
       values: (null: $border-radius)
     ),
     "visibility": (
diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss
index 2a8b45e..d9acaca 100644
--- a/assets/stylesheets/bootstrap/_variables.scss
+++ b/assets/stylesheets/bootstrap/_variables.scss
@@ -275,7 +275,7 @@ $body-text-align:           null !default;
 $link-color:                              $primary !default;
 $link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
-$link-hover-color:                        scale-color($link-color, $link-shade-percentage) !default;
+$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
 $link-hover-decoration:                   null !default;
 
 $stretched-link-pseudo-element:           after !default;
@@ -337,7 +337,7 @@ $gutters: $spacers !default;
 
 // Container padding
 
-$container-padding-x: $grid-gutter-width !default;
+$container-padding-x: $grid-gutter-width / 2 !default;
 
 
 // Components
@@ -535,12 +535,12 @@ $table-caption-color:         $text-muted !default;
 $table-bg-scale:              -80% !default;
 
 $table-variants: (
-  "primary":    scale-color($primary, $table-bg-scale),
-  "secondary":  scale-color($secondary, $table-bg-scale),
-  "success":    scale-color($success, $table-bg-scale),
-  "info":       scale-color($info, $table-bg-scale),
-  "warning":    scale-color($warning, $table-bg-scale),
-  "danger":     scale-color($danger, $table-bg-scale),
+  "primary":    shift-color($primary, $table-bg-scale),
+  "secondary":  shift-color($secondary, $table-bg-scale),
+  "success":    shift-color($success, $table-bg-scale),
+  "info":       shift-color($info, $table-bg-scale),
+  "warning":    shift-color($warning, $table-bg-scale),
+  "danger":     shift-color($danger, $table-bg-scale),
   "light":      $light,
   "dark":       $dark,
 ) !default;
@@ -679,7 +679,7 @@ $input-transition:                      border-color .15s ease-in-out, box-shado
 
 $form-check-input-width:                  1em !default;
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
-$form-check-padding-left:                 $form-check-input-width + .5em !default;
+$form-check-padding-start:                $form-check-input-width + .5em !default;
 $form-check-margin-bottom:                .125rem !default;
 $form-check-label-color:                  null !default;
 $form-check-label-cursor:                 null !default;
@@ -711,7 +711,7 @@ $form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;
 
 $form-switch-color:               rgba(0, 0, 0, .25) !default;
 $form-switch-width:               2em !default;
-$form-switch-padding-left:        $form-switch-width + .5em !default;
+$form-switch-padding-start:       $form-switch-width + .5em !default;
 $form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
 $form-switch-border-radius:       $form-switch-width !default;
 
@@ -722,7 +722,7 @@ $form-switch-checked-color:       $component-active-color !default;
 $form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
 $form-switch-checked-bg-position: right center !default;
 
-$form-check-inline-margin-right:        1rem !default;
+$form-check-inline-margin-end:    1rem !default;
 
 $input-group-addon-padding-y:           $input-padding-y !default;
 $input-group-addon-padding-x:           $input-padding-x !default;
@@ -748,9 +748,9 @@ $form-select-bg-size:               16px 12px !default; // In pixels because ima
 $form-select-indicator-color:       $gray-800 !default;
 $form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
 
-$form-select-feedback-icon-padding-right: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default;
-$form-select-feedback-icon-position:      center right ($form-select-padding-x + $form-select-indicator-padding) !default;
-$form-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
+$form-select-feedback-icon-padding-end: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default;
+$form-select-feedback-icon-position:    center right ($form-select-padding-x + $form-select-indicator-padding) !default;
+$form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half !default;
 
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
@@ -879,7 +879,7 @@ $navbar-brand-font-size:            $font-size-lg !default;
 $nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
 $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
-$navbar-brand-margin-right:         1rem !default;
+$navbar-brand-margin-end:           1rem !default;
 
 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
@@ -969,7 +969,7 @@ $pagination-color:                  $link-color !default;
 $pagination-bg:                     $white !default;
 $pagination-border-width:           $border-width !default;
 $pagination-border-radius:          $border-radius !default;
-$pagination-margin-left:            -$pagination-border-width !default;
+$pagination-margin-start:           -$pagination-border-width !default;
 $pagination-border-color:           $gray-300 !default;
 
 $pagination-focus-color:            $link-hover-color !default;
@@ -1108,6 +1108,7 @@ $toast-border-width:                1px !default;
 $toast-border-color:                rgba(0, 0, 0, .1) !default;
 $toast-border-radius:               $border-radius !default;
 $toast-box-shadow:                  $box-shadow !default;
+$toast-spacing:                     $container-padding-x !default;
 
 $toast-header-color:                $gray-600 !default;
 $toast-header-background-color:     rgba($white, .85) !default;
@@ -1245,15 +1246,16 @@ $figure-caption-color:              $gray-600 !default;
 // Breadcrumbs
 
 $breadcrumb-font-size:              null !default;
-$breadcrumb-padding-y:              $spacer / 2 !default;
-$breadcrumb-padding-x:              $spacer !default;
+$breadcrumb-padding-y:              0 !default;
+$breadcrumb-padding-x:              0 !default;
 $breadcrumb-item-padding-x:         .5rem !default;
 $breadcrumb-margin-bottom:          1rem !default;
-$breadcrumb-bg:                     $gray-200 !default;
+$breadcrumb-bg:                     null !default;
 $breadcrumb-divider-color:          $gray-600 !default;
 $breadcrumb-active-color:           $gray-600 !default;
 $breadcrumb-divider:                quote("/") !default;
-$breadcrumb-border-radius:          $border-radius !default;
+$breadcrumb-divider-flipped:        $breadcrumb-divider !default;
+$breadcrumb-border-radius:          null !default;
 
 // Carousel
 
diff --git a/assets/stylesheets/bootstrap/bootstrap-utilities.scss b/assets/stylesheets/bootstrap/bootstrap-utilities.scss
index 9ae1684..8d96cf9 100644
--- a/assets/stylesheets/bootstrap/bootstrap-utilities.scss
+++ b/assets/stylesheets/bootstrap/bootstrap-utilities.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Utilities v5.0.0-alpha3 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.0.0-beta1 (https://getbootstrap.com/)
  * Copyright 2011-2020 The Bootstrap Authors
  * Copyright 2011-2020 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/assets/stylesheets/bootstrap/forms/_form-check.scss b/assets/stylesheets/bootstrap/forms/_form-check.scss
index 77af825..1d6d873 100644
--- a/assets/stylesheets/bootstrap/forms/_form-check.scss
+++ b/assets/stylesheets/bootstrap/forms/_form-check.scss
@@ -5,12 +5,12 @@
 .form-check {
   display: block;
   min-height: $form-check-min-height;
-  padding-left: $form-check-padding-left;
+  padding-left: $form-check-padding-start;
   margin-bottom: $form-check-margin-bottom;
 
   .form-check-input {
     float: left;
-    margin-left: $form-check-padding-left * -1;
+    margin-left: $form-check-padding-start * -1;
   }
 }
 
@@ -105,11 +105,11 @@
 //
 
 .form-switch {
-  padding-left: $form-switch-padding-left;
+  padding-left: $form-switch-padding-start;
 
   .form-check-input {
     width: $form-switch-width;
-    margin-left: $form-switch-padding-left * -1;
+    margin-left: $form-switch-padding-start * -1;
     background-image: escape-svg($form-switch-bg-image);
     background-position: left center;
     @include border-radius($form-switch-border-radius);
@@ -132,7 +132,7 @@
 
 .form-check-inline {
   display: inline-block;
-  margin-right: $form-check-inline-margin-right;
+  margin-right: $form-check-inline-margin-end;
 }
 
 .btn-check {
diff --git a/assets/stylesheets/bootstrap/forms/_input-group.scss b/assets/stylesheets/bootstrap/forms/_input-group.scss
index 2729ecc..1400529 100644
--- a/assets/stylesheets/bootstrap/forms/_input-group.scss
+++ b/assets/stylesheets/bootstrap/forms/_input-group.scss
@@ -98,14 +98,14 @@
   &:not(.has-validation) {
     > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
     > .dropdown-toggle:nth-last-child(n + 3) {
-      @include border-right-radius(0);
+      @include border-end-radius(0);
     }
   }
 
   &.has-validation {
     > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
     > .dropdown-toggle:nth-last-child(n + 4) {
-      @include border-right-radius(0);
+      @include border-end-radius(0);
     }
   }
 
@@ -116,6 +116,6 @@
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
     margin-left: -$input-border-width;
-    @include border-left-radius(0);
+    @include border-start-radius(0);
   }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_border-radius.scss b/assets/stylesheets/bootstrap/mixins/_border-radius.scss
index 70f5720..819b8ab 100644
--- a/assets/stylesheets/bootstrap/mixins/_border-radius.scss
+++ b/assets/stylesheets/bootstrap/mixins/_border-radius.scss
@@ -30,7 +30,7 @@
   }
 }
 
-@mixin border-right-radius($radius: $border-radius) {
+@mixin border-end-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-right-radius: valid-radius($radius);
     border-bottom-right-radius: valid-radius($radius);
@@ -44,32 +44,32 @@
   }
 }
 
-@mixin border-left-radius($radius: $border-radius) {
+@mixin border-start-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-left-radius: valid-radius($radius);
     border-bottom-left-radius: valid-radius($radius);
   }
 }
 
-@mixin border-top-left-radius($radius: $border-radius) {
+@mixin border-top-start-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-left-radius: valid-radius($radius);
   }
 }
 
-@mixin border-top-right-radius($radius: $border-radius) {
+@mixin border-top-end-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-bottom-right-radius($radius: $border-radius) {
+@mixin border-bottom-end-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-bottom-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-bottom-left-radius($radius: $border-radius) {
+@mixin border-bottom-start-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-bottom-left-radius: valid-radius($radius);
   }
diff --git a/assets/stylesheets/bootstrap/mixins/_caret.scss b/assets/stylesheets/bootstrap/mixins/_caret.scss
index 07d7228..fc10669 100644
--- a/assets/stylesheets/bootstrap/mixins/_caret.scss
+++ b/assets/stylesheets/bootstrap/mixins/_caret.scss
@@ -12,14 +12,14 @@
   border-left: $caret-width solid transparent;
 }
 
-@mixin caret-right {
+@mixin caret-end {
   border-top: $caret-width solid transparent;
   border-right: 0;
   border-bottom: $caret-width solid transparent;
   border-left: $caret-width solid;
 }
 
-@mixin caret-left {
+@mixin caret-start {
   border-top: $caret-width solid transparent;
   border-right: $caret-width solid;
   border-bottom: $caret-width solid transparent;
@@ -36,12 +36,12 @@
         @include caret-down();
       } @else if $direction == up {
         @include caret-up();
-      } @else if $direction == right {
-        @include caret-right();
+      } @else if $direction == end {
+        @include caret-end();
       }
     }
 
-    @if $direction == left {
+    @if $direction == start {
       &::after {
         display: none;
       }
@@ -51,7 +51,7 @@
         margin-right: $caret-spacing;
         vertical-align: $caret-vertical-align;
         content: "";
-        @include caret-left();
+        @include caret-start();
       }
     }
 
diff --git a/assets/stylesheets/bootstrap/mixins/_container.scss b/assets/stylesheets/bootstrap/mixins/_container.scss
index f391c22..ee6044d 100644
--- a/assets/stylesheets/bootstrap/mixins/_container.scss
+++ b/assets/stylesheets/bootstrap/mixins/_container.scss
@@ -1,11 +1,9 @@
 // Container mixins
 
 @mixin make-container($gutter: $container-padding-x) {
-  --bs-gutter-x: #{$gutter};
-
   width: 100%;
-  padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+  padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
+  padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
   margin-right: auto;
   margin-left: auto;
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss
index 9adc0de..5e4cfd4 100644
--- a/assets/stylesheets/bootstrap/mixins/_forms.scss
+++ b/assets/stylesheets/bootstrap/mixins/_forms.scss
@@ -79,7 +79,7 @@
       border-color: $color;
 
       @if $enable-validation-icons {
-        padding-right: $form-select-feedback-icon-padding-right;
+        padding-right: $form-select-feedback-icon-padding-end;
         background-image: escape-svg($form-select-indicator), escape-svg($icon);
         background-position: $form-select-bg-position, $form-select-feedback-icon-position;
         background-size: $form-select-bg-size, $form-select-feedback-icon-size;
diff --git a/assets/stylesheets/bootstrap/mixins/_pagination.scss b/assets/stylesheets/bootstrap/mixins/_pagination.scss
index 52ad1e1..9cb7fd8 100644
--- a/assets/stylesheets/bootstrap/mixins/_pagination.scss
+++ b/assets/stylesheets/bootstrap/mixins/_pagination.scss
@@ -7,16 +7,16 @@
   }
 
   .page-item {
-    @if $pagination-margin-left == (-$pagination-border-width) {
+    @if $pagination-margin-start == (-$pagination-border-width) {
       &:first-child {
         .page-link {
-          @include border-left-radius($border-radius);
+          @include border-start-radius($border-radius);
         }
       }
 
       &:last-child {
         .page-link {
-          @include border-right-radius($border-radius);
+          @include border-end-radius($border-radius);
         }
       }
     } @else {
diff --git a/assets/stylesheets/bootstrap/mixins/_utilities.scss b/assets/stylesheets/bootstrap/mixins/_utilities.scss
index cd9f930..4d2370a 100644
--- a/assets/stylesheets/bootstrap/mixins/_utilities.scss
+++ b/assets/stylesheets/bootstrap/mixins/_utilities.scss
@@ -20,6 +20,9 @@
     $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
     $property-class: if($property-class == null, "", $property-class);
 
+    // State params to generate pseudo-classes
+    $state: if(map-has-key($utility, state), map-get($utility, state), ());
+
     $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
 
     // Don't prefix if value key is null (eg. with shadow class)
@@ -38,12 +41,28 @@
       }
     }
 
+    $is-rtl: map-get($utility, rtl);
+
     @if $value != null {
+      @if $is-rtl == false {
+        /* rtl:begin:remove */
+      }
       .#{$property-class + $infix + $property-class-modifier} {
         @each $property in $properties {
           #{$property}: $value if($enable-important-utilities, !important, null);
         }
       }
+
+      @each $pseudo in $state {
+        .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+          @each $property in $properties {
+            #{$property}: $value if($enable-important-utilities, !important, null);
+          }
+        }
+      }
+      @if $is-rtl == false {
+        /* rtl:end:remove */
+      }
     }
   }
 }