diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index fab27c7429..591ebfe654 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -10,153 +10,154 @@
 //
 // Base styles
 //
-
-.accordion {
-  // scss-docs-start accordion-css-vars
-  --#{$prefix}accordion-color: #{$accordion-color};
-  --#{$prefix}accordion-bg: #{$accordion-bg};
-  --#{$prefix}accordion-transition: #{$accordion-transition};
-  --#{$prefix}accordion-border-color: #{$accordion-border-color};
-  --#{$prefix}accordion-border-width: #{$accordion-border-width};
-  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
-  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
-  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
-  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
-  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
-  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
-  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
-  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
-  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
-  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
-  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
-  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
-  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
-  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
-  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
-  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
-  // scss-docs-end accordion-css-vars
-}
-
-.accordion-button {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
-  @include font-size($font-size-base);
-  color: var(--#{$prefix}accordion-btn-color);
-  text-align: left; // Reset button style
-  background-color: var(--#{$prefix}accordion-btn-bg);
-  border: 0;
-  @include border-radius(0);
-  overflow-anchor: none;
-  @include transition(var(--#{$prefix}accordion-transition));
-
-  &:not(.collapsed) {
-    color: var(--#{$prefix}accordion-active-color);
-    background-color: var(--#{$prefix}accordion-active-bg);
-    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
-
-    &::after {
-      background-image: var(--#{$prefix}accordion-btn-active-icon);
-      transform: var(--#{$prefix}accordion-btn-icon-transform);
-    }
+@layer components {
+  .accordion {
+    // scss-docs-start accordion-css-vars
+    --#{$prefix}accordion-color: #{$accordion-color};
+    --#{$prefix}accordion-bg: #{$accordion-bg};
+    --#{$prefix}accordion-transition: #{$accordion-transition};
+    --#{$prefix}accordion-border-color: #{$accordion-border-color};
+    --#{$prefix}accordion-border-width: #{$accordion-border-width};
+    --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+    --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+    --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
+    --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+    --#{$prefix}accordion-btn-color: #{$accordion-button-color};
+    --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+    --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+    --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
+    --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
+    --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
+    --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
+    --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+    --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
+    --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+    --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+    --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+    // scss-docs-end accordion-css-vars
   }
 
-  // Accordion icon
-  &::after {
-    flex-shrink: 0;
-    width: var(--#{$prefix}accordion-btn-icon-width);
-    height: var(--#{$prefix}accordion-btn-icon-width);
-    margin-left: auto;
-    content: "";
-    background-image: var(--#{$prefix}accordion-btn-icon);
-    background-repeat: no-repeat;
-    background-size: var(--#{$prefix}accordion-btn-icon-width);
-    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
-  }
+  .accordion-button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
+    @include font-size($font-size-base);
+    color: var(--#{$prefix}accordion-btn-color);
+    text-align: left; // Reset button style
+    background-color: var(--#{$prefix}accordion-btn-bg);
+    border: 0;
+    @include border-radius(0);
+    overflow-anchor: none;
+    @include transition(var(--#{$prefix}accordion-transition));
 
-  &:hover {
-    z-index: 2;
-  }
+    &:not(.collapsed) {
+      color: var(--#{$prefix}accordion-active-color);
+      background-color: var(--#{$prefix}accordion-active-bg);
+      box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
 
-  &:focus {
-    z-index: 3;
-    outline: 0;
-    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
-  }
-}
-
-.accordion-header {
-  margin-bottom: 0;
-}
-
-.accordion-item {
-  color: var(--#{$prefix}accordion-color);
-  background-color: var(--#{$prefix}accordion-bg);
-  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
-
-  &:first-of-type {
-    @include border-top-radius(var(--#{$prefix}accordion-border-radius));
-
-    > .accordion-header .accordion-button {
-      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
-    }
-  }
-
-  &:not(:first-of-type) {
-    border-top: 0;
-  }
-
-  // Only set a border-radius on the last item if the accordion is collapsed
-  &:last-of-type {
-    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
-
-    > .accordion-header .accordion-button {
-      &.collapsed {
-        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+      &::after {
+        background-image: var(--#{$prefix}accordion-btn-active-icon);
+        transform: var(--#{$prefix}accordion-btn-icon-transform);
       }
     }
 
-    > .accordion-collapse {
+    // Accordion icon
+    &::after {
+      flex-shrink: 0;
+      width: var(--#{$prefix}accordion-btn-icon-width);
+      height: var(--#{$prefix}accordion-btn-icon-width);
+      margin-left: auto;
+      content: "";
+      background-image: var(--#{$prefix}accordion-btn-icon);
+      background-repeat: no-repeat;
+      background-size: var(--#{$prefix}accordion-btn-icon-width);
+      @include transition(var(--#{$prefix}accordion-btn-icon-transition));
+    }
+
+    &:hover {
+      z-index: 2;
+    }
+
+    &:focus {
+      z-index: 3;
+      outline: 0;
+      box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+    }
+  }
+
+  .accordion-header {
+    margin-bottom: 0;
+  }
+
+  .accordion-item {
+    color: var(--#{$prefix}accordion-color);
+    background-color: var(--#{$prefix}accordion-bg);
+    border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+
+    &:first-of-type {
+      @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+
+      > .accordion-header .accordion-button {
+        @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+      }
+    }
+
+    &:not(:first-of-type) {
+      border-top: 0;
+    }
+
+    // Only set a border-radius on the last item if the accordion is collapsed
+    &:last-of-type {
       @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+
+      > .accordion-header .accordion-button {
+        &.collapsed {
+          @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+        }
+      }
+
+      > .accordion-collapse {
+        @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+      }
     }
   }
-}
 
-.accordion-body {
-  padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
-}
+  .accordion-body {
+    padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
+  }
 
 
-// Flush accordion items
-//
-// Remove borders and border-radius to keep accordion items edge-to-edge.
+  // Flush accordion items
+  //
+  // Remove borders and border-radius to keep accordion items edge-to-edge.
 
-.accordion-flush {
-  > .accordion-item {
-    border-right: 0;
-    border-left: 0;
-    @include border-radius(0);
-
-    &:first-child { border-top: 0; }
-    &:last-child { border-bottom: 0; }
-
-    // stylelint-disable selector-max-class
-    > .accordion-collapse,
-    > .accordion-header .accordion-button,
-    > .accordion-header .accordion-button.collapsed {
+  .accordion-flush {
+    > .accordion-item {
+      border-right: 0;
+      border-left: 0;
       @include border-radius(0);
-    }
-    // stylelint-enable selector-max-class
-  }
-}
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .accordion-button::after {
-      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
-      --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+      &:first-child { border-top: 0; }
+      &:last-child { border-bottom: 0; }
+
+      // stylelint-disable selector-max-class
+      > .accordion-collapse,
+      > .accordion-header .accordion-button,
+      > .accordion-header .accordion-button.collapsed {
+        @include border-radius(0);
+      }
+      // stylelint-enable selector-max-class
+    }
+  }
+
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      .accordion-button::after {
+        --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+        --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+      }
     }
   }
 }
diff --git a/scss/_alert.scss b/scss/_alert.scss
index ef504ca4d9..1003f6a440 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -7,67 +7,69 @@
 // Base styles
 //
 
-.alert {
-  // scss-docs-start alert-css-vars
-  --#{$prefix}alert-bg: transparent;
-  --#{$prefix}alert-padding-x: #{$alert-padding-x};
-  --#{$prefix}alert-padding-y: #{$alert-padding-y};
-  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-  --#{$prefix}alert-color: inherit;
-  --#{$prefix}alert-border-color: transparent;
-  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
-  --#{$prefix}alert-border-radius: #{$alert-border-radius};
-  --#{$prefix}alert-link-color: inherit;
-  // scss-docs-end alert-css-vars
+@layer components {
+  .alert {
+    // scss-docs-start alert-css-vars
+    --#{$prefix}alert-bg: transparent;
+    --#{$prefix}alert-padding-x: #{$alert-padding-x};
+    --#{$prefix}alert-padding-y: #{$alert-padding-y};
+    --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
+    --#{$prefix}alert-color: inherit;
+    --#{$prefix}alert-border-color: transparent;
+    --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
+    --#{$prefix}alert-border-radius: #{$alert-border-radius};
+    --#{$prefix}alert-link-color: inherit;
+    // scss-docs-end alert-css-vars
 
-  position: relative;
-  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
-  margin-bottom: var(--#{$prefix}alert-margin-bottom);
-  color: var(--#{$prefix}alert-color);
-  background-color: var(--#{$prefix}alert-bg);
-  border: var(--#{$prefix}alert-border);
-  @include border-radius(var(--#{$prefix}alert-border-radius));
-}
-
-// Headings for larger alerts
-.alert-heading {
-  // Specified to prevent conflicts of changing $headings-color
-  color: inherit;
-}
-
-// Provide class for links that match alerts
-.alert-link {
-  font-weight: $alert-link-font-weight;
-  color: var(--#{$prefix}alert-link-color);
-}
-
-
-// Dismissible alerts
-//
-// Expand the right padding and account for the close button's positioning.
-
-.alert-dismissible {
-  padding-right: $alert-dismissible-padding-r;
-
-  // Adjust close link position
-  .btn-close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: $stretched-link-z-index + 1;
-    padding: $alert-padding-y * 1.25 $alert-padding-x;
+    position: relative;
+    padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+    margin-bottom: var(--#{$prefix}alert-margin-bottom);
+    color: var(--#{$prefix}alert-color);
+    background-color: var(--#{$prefix}alert-bg);
+    border: var(--#{$prefix}alert-border);
+    @include border-radius(var(--#{$prefix}alert-border-radius));
   }
-}
 
-
-// scss-docs-start alert-modifiers
-// Generate contextual modifier classes for colorizing the alert
-@each $state in map.keys($theme-colors) {
-  .alert-#{$state} {
-    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
-    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
-    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
-    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
+  // Headings for larger alerts
+  .alert-heading {
+    // Specified to prevent conflicts of changing $headings-color
+    color: inherit;
   }
+
+  // Provide class for links that match alerts
+  .alert-link {
+    font-weight: $alert-link-font-weight;
+    color: var(--#{$prefix}alert-link-color);
+  }
+
+
+  // Dismissible alerts
+  //
+  // Expand the right padding and account for the close button's positioning.
+
+  .alert-dismissible {
+    padding-right: $alert-dismissible-padding-r;
+
+    // Adjust close link position
+    .btn-close {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: $stretched-link-z-index + 1;
+      padding: $alert-padding-y * 1.25 $alert-padding-x;
+    }
+  }
+
+
+  // scss-docs-start alert-modifiers
+  // Generate contextual modifier classes for colorizing the alert
+  @each $state in map.keys($theme-colors) {
+    .alert-#{$state} {
+      --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+      --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+      --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
+      --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
+    }
+  }
+  // scss-docs-end alert-modifiers
 }
-// scss-docs-end alert-modifiers
diff --git a/scss/_badge.scss b/scss/_badge.scss
index 0abaff6523..0f7f55c8c9 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -9,36 +9,38 @@
 // Requires one of the contextual, color modifier classes for `color` and
 // `background-color`.
 
-.badge {
-  // scss-docs-start badge-css-vars
-  --#{$prefix}badge-padding-x: #{$badge-padding-x};
-  --#{$prefix}badge-padding-y: #{$badge-padding-y};
-  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
-  --#{$prefix}badge-font-weight: #{$badge-font-weight};
-  --#{$prefix}badge-color: #{$badge-color};
-  --#{$prefix}badge-border-radius: #{$badge-border-radius};
-  // scss-docs-end badge-css-vars
+@layer components {
+  .badge {
+    // scss-docs-start badge-css-vars
+    --#{$prefix}badge-padding-x: #{$badge-padding-x};
+    --#{$prefix}badge-padding-y: #{$badge-padding-y};
+    @include rfs($badge-font-size, --#{$prefix}badge-font-size);
+    --#{$prefix}badge-font-weight: #{$badge-font-weight};
+    --#{$prefix}badge-color: #{$badge-color};
+    --#{$prefix}badge-border-radius: #{$badge-border-radius};
+    // scss-docs-end badge-css-vars
 
-  display: inline-block;
-  padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
-  @include font-size(var(--#{$prefix}badge-font-size));
-  font-weight: var(--#{$prefix}badge-font-weight);
-  line-height: 1;
-  color: var(--#{$prefix}badge-color);
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  @include border-radius(var(--#{$prefix}badge-border-radius));
-  @include gradient-bg();
+    display: inline-block;
+    padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+    @include font-size(var(--#{$prefix}badge-font-size));
+    font-weight: var(--#{$prefix}badge-font-weight);
+    line-height: 1;
+    color: var(--#{$prefix}badge-color);
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    @include border-radius(var(--#{$prefix}badge-border-radius));
+    @include gradient-bg();
 
-  // Empty badges collapse automatically
-  &:empty {
-    display: none;
+    // Empty badges collapse automatically
+    &:empty {
+      display: none;
+    }
+  }
+
+  // Quick fix for badges in buttons
+  .btn .badge {
+    position: relative;
+    top: -1px;
   }
 }
-
-// Quick fix for badges in buttons
-.btn .badge {
-  position: relative;
-  top: -1px;
-}
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 27e1905305..be8e4623f0 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -3,43 +3,45 @@
 @use "mixins/border-radius" as *;
 @use "vendor/rfs" as *;
 
-.breadcrumb {
-  // scss-docs-start breadcrumb-css-vars
-  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
-  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
-  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
-  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
-  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
-  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
-  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
-  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
-  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
-  // scss-docs-end breadcrumb-css-vars
+@layer components {
+  .breadcrumb {
+    // scss-docs-start breadcrumb-css-vars
+    --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
+    --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
+    --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
+    @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
+    --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
+    --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
+    --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
+    --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
+    --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
+    // scss-docs-end breadcrumb-css-vars
 
-  display: flex;
-  flex-wrap: wrap;
-  padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
-  margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
-  @include font-size(var(--#{$prefix}breadcrumb-font-size));
-  list-style: none;
-  background-color: var(--#{$prefix}breadcrumb-bg);
-  @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
-}
+    display: flex;
+    flex-wrap: wrap;
+    padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
+    margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
+    @include font-size(var(--#{$prefix}breadcrumb-font-size));
+    list-style: none;
+    background-color: var(--#{$prefix}breadcrumb-bg);
+    @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
+  }
 
-.breadcrumb-item {
-  // The separator between breadcrumbs (by default, a forward-slash: "/")
-  + .breadcrumb-item {
-    padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+  .breadcrumb-item {
+    // The separator between breadcrumbs (by default, a forward-slash: "/")
+    + .breadcrumb-item {
+      padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
 
-    &::before {
-      float: left; // Suppress inline spacings and underlining of the separator
-      padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
-      color: var(--#{$prefix}breadcrumb-divider-color);
-      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+      &::before {
+        float: left; // Suppress inline spacings and underlining of the separator
+        padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+        color: var(--#{$prefix}breadcrumb-divider-color);
+        content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+      }
+    }
+
+    &.active {
+      color: var(--#{$prefix}breadcrumb-item-active-color);
     }
   }
-
-  &.active {
-    color: var(--#{$prefix}breadcrumb-item-active-color);
-  }
 }
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 04b4c68272..9162e12e20 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -3,150 +3,152 @@
 @use "mixins/border-radius" as *;
 @use "mixins/box-shadow" as *;
 
-// Make the div behave like a button
-.btn-group,
-.btn-group-vertical {
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle; // match .btn alignment given font-size hack above
-
-  > .btn {
+@layer components {
+  // Make the div behave like a button
+  .btn-group,
+  .btn-group-vertical {
     position: relative;
-    flex: 1 1 auto;
+    display: inline-flex;
+    vertical-align: middle; // match .btn alignment given font-size hack above
+
+    > .btn {
+      position: relative;
+      flex: 1 1 auto;
+    }
+
+    // Bring the hover, focused, and "active" buttons to the front to overlay
+    // the borders properly
+    > .btn-check:checked + .btn,
+    > .btn-check:focus + .btn,
+    > .btn:hover,
+    > .btn:focus,
+    > .btn:active,
+    > .btn.active {
+      z-index: 1;
+    }
   }
 
-  // Bring the hover, focused, and "active" buttons to the front to overlay
-  // the borders properly
-  > .btn-check:checked + .btn,
-  > .btn-check:focus + .btn,
-  > .btn:hover,
-  > .btn:focus,
-  > .btn:active,
-  > .btn.active {
-    z-index: 1;
-  }
-}
-
-// Optional: Group multiple button groups together for a toolbar
-.btn-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  .input-group {
-    width: auto;
-  }
-}
-
-.btn-group {
-  @include border-radius($btn-border-radius);
-
-  // Prevent double borders when buttons are next to each other
-  > :not(.btn-check:first-child) + .btn,
-  > .btn-group:not(:first-child) {
-    margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
-  }
-
-  // Reset rounded corners
-  > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn.dropdown-toggle-split:first-child,
-  > .btn-group:not(:last-child) > .btn {
-    @include border-end-radius(0);
-  }
-
-  // The left radius should be 0 if the button is:
-  // - the "third or more" child
-  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
-  // - part of a btn-group which isn't the first child
-  > .btn:nth-child(n + 3),
-  > :not(.btn-check) + .btn,
-  > .btn-group:not(:first-child) > .btn {
-    @include border-start-radius(0);
-  }
-}
-
-// Sizing
-//
-// Remix the default button sizing classes into new ones for easier manipulation.
-
-.btn-group-sm > .btn { @extend .btn-sm; }
-.btn-group-lg > .btn { @extend .btn-lg; }
-
-
-//
-// Split button dropdowns
-//
-
-.dropdown-toggle-split {
-  padding-right: $btn-padding-x * .75;
-  padding-left: $btn-padding-x * .75;
-
-  &::after,
-  .dropup &::after,
-  .dropend &::after {
-    margin-left: 0;
-  }
-
-  .dropstart &::before {
-    margin-right: 0;
-  }
-}
-
-.btn-sm + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-sm * .75;
-  padding-left: $btn-padding-x-sm * .75;
-}
-
-.btn-lg + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-lg * .75;
-  padding-left: $btn-padding-x-lg * .75;
-}
-
-
-// The clickable button for toggling the menu
-// Set the same inset shadow as the :active state
-.btn-group.show .dropdown-toggle {
-  @include box-shadow($btn-active-box-shadow);
-
-  // Show no shadow for `.btn-link` since it has no other button styles.
-  &.btn-link {
-    @include box-shadow(none);
-  }
-}
-
-
-//
-// Vertical button groups
-//
-
-.btn-group-vertical {
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-
-  > .btn,
-  > .btn-group {
-    width: 100%;
-  }
-
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) {
-    margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
-  }
-
-  // Reset rounded corners
-  > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn {
-    @include border-bottom-radius(0);
-  }
-
-  // The top radius should be 0 if the button is:
-  // - the "third or more" child
-  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
-  // - part of a btn-group which isn't the first child
-  > .btn:nth-child(n + 3),
-  > :not(.btn-check) + .btn,
-  > .btn-group:not(:first-child) > .btn {
-    @include border-top-radius(0);
+  // Optional: Group multiple button groups together for a toolbar
+  .btn-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    .input-group {
+      width: auto;
+    }
+  }
+
+  .btn-group {
+    @include border-radius($btn-border-radius);
+
+    // Prevent double borders when buttons are next to each other
+    > :not(.btn-check:first-child) + .btn,
+    > .btn-group:not(:first-child) {
+      margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+    }
+
+    // Reset rounded corners
+    > .btn:not(:last-child):not(.dropdown-toggle),
+    > .btn.dropdown-toggle-split:first-child,
+    > .btn-group:not(:last-child) > .btn {
+      @include border-end-radius(0);
+    }
+
+    // The left radius should be 0 if the button is:
+    // - the "third or more" child
+    // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+    // - part of a btn-group which isn't the first child
+    > .btn:nth-child(n + 3),
+    > :not(.btn-check) + .btn,
+    > .btn-group:not(:first-child) > .btn {
+      @include border-start-radius(0);
+    }
+  }
+
+  // Sizing
+  //
+  // Remix the default button sizing classes into new ones for easier manipulation.
+
+  .btn-group-sm > .btn { @extend .btn-sm; }
+  .btn-group-lg > .btn { @extend .btn-lg; }
+
+
+  //
+  // Split button dropdowns
+  //
+
+  .dropdown-toggle-split {
+    padding-right: $btn-padding-x * .75;
+    padding-left: $btn-padding-x * .75;
+
+    &::after,
+    .dropup &::after,
+    .dropend &::after {
+      margin-left: 0;
+    }
+
+    .dropstart &::before {
+      margin-right: 0;
+    }
+  }
+
+  .btn-sm + .dropdown-toggle-split {
+    padding-right: $btn-padding-x-sm * .75;
+    padding-left: $btn-padding-x-sm * .75;
+  }
+
+  .btn-lg + .dropdown-toggle-split {
+    padding-right: $btn-padding-x-lg * .75;
+    padding-left: $btn-padding-x-lg * .75;
+  }
+
+
+  // The clickable button for toggling the menu
+  // Set the same inset shadow as the :active state
+  .btn-group.show .dropdown-toggle {
+    @include box-shadow($btn-active-box-shadow);
+
+    // Show no shadow for `.btn-link` since it has no other button styles.
+    &.btn-link {
+      @include box-shadow(none);
+    }
+  }
+
+
+  //
+  // Vertical button groups
+  //
+
+  .btn-group-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+
+    > .btn,
+    > .btn-group {
+      width: 100%;
+    }
+
+    > .btn:not(:first-child),
+    > .btn-group:not(:first-child) {
+      margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+    }
+
+    // Reset rounded corners
+    > .btn:not(:last-child):not(.dropdown-toggle),
+    > .btn-group:not(:last-child) > .btn {
+      @include border-bottom-radius(0);
+    }
+
+    // The top radius should be 0 if the button is:
+    // - the "third or more" child
+    // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+    // - part of a btn-group which isn't the first child
+    > .btn:nth-child(n + 3),
+    > :not(.btn-check) + .btn,
+    > .btn-group:not(:first-child) > .btn {
+      @include border-top-radius(0);
+    }
   }
 }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 34f08cb55a..5a4db9f638 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -13,166 +13,177 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-// scss-docs-start btn-variant-mixin
-@mixin button-variant(
-  $background,
-  $border,
-  $color: color-contrast($background),
-  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
-  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
-  $hover-color: color-contrast($hover-background),
-  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
-  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
-  $active-color: color-contrast($active-background),
-  $disabled-background: $background,
-  $disabled-border: $border,
-  $disabled-color: color-contrast($disabled-background)
-) {
-  --#{$prefix}btn-color: #{$color};
-  --#{$prefix}btn-bg: #{$background};
-  --#{$prefix}btn-border-color: #{$border};
-  --#{$prefix}btn-hover-color: #{$hover-color};
-  --#{$prefix}btn-hover-bg: #{$hover-background};
-  --#{$prefix}btn-hover-border-color: #{$hover-border};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
-  --#{$prefix}btn-active-color: #{$active-color};
-  --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border};
-  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-  --#{$prefix}btn-disabled-color: #{$disabled-color};
-  --#{$prefix}btn-disabled-bg: #{$disabled-background};
-  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
-}
-// scss-docs-end btn-variant-mixin
-
-// scss-docs-start btn-outline-variant-mixin
-@mixin button-outline-variant(
-  $color,
-  $color-hover: color-contrast($color),
-  $active-background: $color,
-  $active-border: $color,
-  $active-color: color-contrast($active-background)
-) {
-  --#{$prefix}btn-color: #{$color};
-  --#{$prefix}btn-border-color: #{$color};
-  --#{$prefix}btn-hover-color: #{$color-hover};
-  --#{$prefix}btn-hover-bg: #{$active-background};
-  --#{$prefix}btn-hover-border-color: #{$active-border};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
-  --#{$prefix}btn-active-color: #{$active-color};
-  --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border};
-  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-  --#{$prefix}btn-disabled-color: #{$color};
-  --#{$prefix}btn-disabled-bg: transparent;
-  --#{$prefix}btn-disabled-border-color: #{$color};
-  --#{$prefix}gradient: none;
-}
-// scss-docs-end btn-outline-variant-mixin
-
-// scss-docs-start btn-size-mixin
-@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --#{$prefix}btn-padding-y: #{$padding-y};
-  --#{$prefix}btn-padding-x: #{$padding-x};
-  @include rfs($font-size, --#{$prefix}btn-font-size);
-  --#{$prefix}btn-border-radius: #{$border-radius};
-}
-// scss-docs-end btn-size-mixin
-
-
-//
-// Base styles
-//
-
-.btn {
-  // scss-docs-start btn-css-vars
-  --#{$prefix}btn-padding-x: #{$btn-padding-x};
-  --#{$prefix}btn-padding-y: #{$btn-padding-y};
-  --#{$prefix}btn-font-family: #{$btn-font-family};
-  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
-  --#{$prefix}btn-font-weight: #{$btn-font-weight};
-  --#{$prefix}btn-line-height: #{$btn-line-height};
-  --#{$prefix}btn-color: #{$btn-color};
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-width: #{$btn-border-width};
-  --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-border-radius: #{$btn-border-radius};
-  --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
-  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
-  // scss-docs-end btn-css-vars
-
-  display: inline-block;
-  padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
-  font-family: var(--#{$prefix}btn-font-family);
-  @include font-size(var(--#{$prefix}btn-font-size));
-  font-weight: var(--#{$prefix}btn-font-weight);
-  line-height: var(--#{$prefix}btn-line-height);
-  color: var(--#{$prefix}btn-color);
-  text-align: center;
-  text-decoration: if($link-decoration == none, null, none);
-  white-space: $btn-white-space;
-  vertical-align: middle;
-  cursor: if($enable-button-pointers, pointer, null);
-  user-select: none;
-  border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
-  @include border-radius(var(--#{$prefix}btn-border-radius));
-  @include gradient-bg(var(--#{$prefix}btn-bg));
-  @include box-shadow(var(--#{$prefix}btn-box-shadow));
-  @include transition($btn-transition);
-
-  &:hover {
-    color: var(--#{$prefix}btn-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: var(--#{$prefix}btn-hover-bg);
-    border-color: var(--#{$prefix}btn-hover-border-color);
+@layer components {
+  // scss-docs-start btn-variant-mixin
+  @mixin button-variant(
+    $background,
+    $border,
+    $color: color-contrast($background),
+    $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+    $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+    $hover-color: color-contrast($hover-background),
+    $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+    $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+    $active-color: color-contrast($active-background),
+    $disabled-background: $background,
+    $disabled-border: $border,
+    $disabled-color: color-contrast($disabled-background)
+  ) {
+    --#{$prefix}btn-color: #{$color};
+    --#{$prefix}btn-bg: #{$background};
+    --#{$prefix}btn-border-color: #{$border};
+    --#{$prefix}btn-hover-color: #{$hover-color};
+    --#{$prefix}btn-hover-bg: #{$hover-background};
+    --#{$prefix}btn-hover-border-color: #{$hover-border};
+    --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+    --#{$prefix}btn-active-color: #{$active-color};
+    --#{$prefix}btn-active-bg: #{$active-background};
+    --#{$prefix}btn-active-border-color: #{$active-border};
+    --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+    --#{$prefix}btn-disabled-color: #{$disabled-color};
+    --#{$prefix}btn-disabled-bg: #{$disabled-background};
+    --#{$prefix}btn-disabled-border-color: #{$disabled-border};
   }
+  // scss-docs-end btn-variant-mixin
 
-  .btn-check + &:hover {
-    // override for the checkbox/radio buttons
+  // scss-docs-start btn-outline-variant-mixin
+  @mixin button-outline-variant(
+    $color,
+    $color-hover: color-contrast($color),
+    $active-background: $color,
+    $active-border: $color,
+    $active-color: color-contrast($active-background)
+  ) {
+    --#{$prefix}btn-color: #{$color};
+    --#{$prefix}btn-border-color: #{$color};
+    --#{$prefix}btn-hover-color: #{$color-hover};
+    --#{$prefix}btn-hover-bg: #{$active-background};
+    --#{$prefix}btn-hover-border-color: #{$active-border};
+    --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+    --#{$prefix}btn-active-color: #{$active-color};
+    --#{$prefix}btn-active-bg: #{$active-background};
+    --#{$prefix}btn-active-border-color: #{$active-border};
+    --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+    --#{$prefix}btn-disabled-color: #{$color};
+    --#{$prefix}btn-disabled-bg: transparent;
+    --#{$prefix}btn-disabled-border-color: #{$color};
+    --#{$prefix}gradient: none;
+  }
+  // scss-docs-end btn-outline-variant-mixin
+
+  // scss-docs-start btn-size-mixin
+  @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+    --#{$prefix}btn-padding-y: #{$padding-y};
+    --#{$prefix}btn-padding-x: #{$padding-x};
+    @include rfs($font-size, --#{$prefix}btn-font-size);
+    --#{$prefix}btn-border-radius: #{$border-radius};
+  }
+  // scss-docs-end btn-size-mixin
+
+
+  //
+  // Base styles
+  //
+
+  .btn {
+    // scss-docs-start btn-css-vars
+    --#{$prefix}btn-padding-x: #{$btn-padding-x};
+    --#{$prefix}btn-padding-y: #{$btn-padding-y};
+    --#{$prefix}btn-font-family: #{$btn-font-family};
+    @include rfs($btn-font-size, --#{$prefix}btn-font-size);
+    --#{$prefix}btn-font-weight: #{$btn-font-weight};
+    --#{$prefix}btn-line-height: #{$btn-line-height};
+    --#{$prefix}btn-color: #{$btn-color};
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-width: #{$btn-border-width};
+    --#{$prefix}btn-border-color: transparent;
+    --#{$prefix}btn-border-radius: #{$btn-border-radius};
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+    --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+    --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
+    // scss-docs-end btn-css-vars
+
+    display: inline-block;
+    padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
+    font-family: var(--#{$prefix}btn-font-family);
+    @include font-size(var(--#{$prefix}btn-font-size));
+    font-weight: var(--#{$prefix}btn-font-weight);
+    line-height: var(--#{$prefix}btn-line-height);
     color: var(--#{$prefix}btn-color);
-    background-color: var(--#{$prefix}btn-bg);
-    border-color: var(--#{$prefix}btn-border-color);
-  }
+    text-align: center;
+    text-decoration: if($link-decoration == none, null, none);
+    white-space: $btn-white-space;
+    vertical-align: middle;
+    cursor: if($enable-button-pointers, pointer, null);
+    user-select: none;
+    border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
+    @include border-radius(var(--#{$prefix}btn-border-radius));
+    @include gradient-bg(var(--#{$prefix}btn-bg));
+    @include box-shadow(var(--#{$prefix}btn-box-shadow));
+    @include transition($btn-transition);
 
-  &:focus-visible {
-    color: var(--#{$prefix}btn-hover-color);
-    @include gradient-bg(var(--#{$prefix}btn-hover-bg));
-    border-color: var(--#{$prefix}btn-hover-border-color);
-    outline: 0;
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
-    } @else {
-      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    &:hover {
+      color: var(--#{$prefix}btn-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
+      background-color: var(--#{$prefix}btn-hover-bg);
+      border-color: var(--#{$prefix}btn-hover-border-color);
     }
-  }
 
-  .btn-check:focus-visible + & {
-    border-color: var(--#{$prefix}btn-hover-border-color);
-    outline: 0;
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
-    } @else {
-      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    .btn-check + &:hover {
+      // override for the checkbox/radio buttons
+      color: var(--#{$prefix}btn-color);
+      background-color: var(--#{$prefix}btn-bg);
+      border-color: var(--#{$prefix}btn-border-color);
     }
-  }
-
-  .btn-check:checked + &,
-  :not(.btn-check) + &:active,
-  &:first-child:active,
-  &.active,
-  &.show {
-    color: var(--#{$prefix}btn-active-color);
-    background-color: var(--#{$prefix}btn-active-bg);
-    // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
-    border-color: var(--#{$prefix}btn-active-border-color);
-    @include box-shadow(var(--#{$prefix}btn-active-shadow));
 
     &:focus-visible {
+      color: var(--#{$prefix}btn-hover-color);
+      @include gradient-bg(var(--#{$prefix}btn-hover-bg));
+      border-color: var(--#{$prefix}btn-hover-border-color);
+      outline: 0;
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+      } @else {
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+      }
+    }
+
+    .btn-check:focus-visible + & {
+      border-color: var(--#{$prefix}btn-hover-border-color);
+      outline: 0;
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+      } @else {
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+      }
+    }
+
+    .btn-check:checked + &,
+    :not(.btn-check) + &:active,
+    &:first-child:active,
+    &.active,
+    &.show {
+      color: var(--#{$prefix}btn-active-color);
+      background-color: var(--#{$prefix}btn-active-bg);
+      // Remove CSS gradients if they're enabled
+      background-image: if($enable-gradients, none, null);
+      border-color: var(--#{$prefix}btn-active-border-color);
+      @include box-shadow(var(--#{$prefix}btn-active-shadow));
+
+      &:focus-visible {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        @if $enable-shadows {
+          box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+        } @else {
+          box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+        }
+      }
+    }
+
+    .btn-check:checked:focus-visible + & {
       // Avoid using mixin so we can pass custom focus shadow properly
       @if $enable-shadows {
         box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
@@ -180,119 +191,110 @@
         box-shadow: var(--#{$prefix}btn-focus-box-shadow);
       }
     }
-  }
 
-  .btn-check:checked:focus-visible + & {
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
-    } @else {
-      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    &:disabled,
+    &.disabled,
+    fieldset:disabled & {
+      color: var(--#{$prefix}btn-disabled-color);
+      pointer-events: none;
+      background-color: var(--#{$prefix}btn-disabled-bg);
+      background-image: if($enable-gradients, none, null);
+      border-color: var(--#{$prefix}btn-disabled-border-color);
+      opacity: var(--#{$prefix}btn-disabled-opacity);
+      @include box-shadow(none);
     }
   }
 
-  &:disabled,
-  &.disabled,
-  fieldset:disabled & {
-    color: var(--#{$prefix}btn-disabled-color);
-    pointer-events: none;
-    background-color: var(--#{$prefix}btn-disabled-bg);
-    background-image: if($enable-gradients, none, null);
-    border-color: var(--#{$prefix}btn-disabled-border-color);
-    opacity: var(--#{$prefix}btn-disabled-opacity);
-    @include box-shadow(none);
-  }
-}
 
+  //
+  // Alternate buttons
+  //
 
-//
-// Alternate buttons
-//
-
-// scss-docs-start btn-variant-loops
-@each $color, $value in $theme-colors {
-  .btn-#{$color} {
-    @if $color == "light" {
-      @include button-variant(
-        $value,
-        $value,
-        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
-        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
-        $active-background: shade-color($value, $btn-active-bg-shade-amount),
-        $active-border: shade-color($value, $btn-active-border-shade-amount)
-      );
-    } @else if $color == "dark" {
-      @include button-variant(
-        $value,
-        $value,
-        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
-        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
-        $active-background: tint-color($value, $btn-active-bg-tint-amount),
-        $active-border: tint-color($value, $btn-active-border-tint-amount)
-      );
-    } @else {
-      @include button-variant($value, $value);
+  // scss-docs-start btn-variant-loops
+  @each $color, $value in $theme-colors {
+    .btn-#{$color} {
+      @if $color == "light" {
+        @include button-variant(
+          $value,
+          $value,
+          $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+          $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+          $active-background: shade-color($value, $btn-active-bg-shade-amount),
+          $active-border: shade-color($value, $btn-active-border-shade-amount)
+        );
+      } @else if $color == "dark" {
+        @include button-variant(
+          $value,
+          $value,
+          $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+          $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+          $active-background: tint-color($value, $btn-active-bg-tint-amount),
+          $active-border: tint-color($value, $btn-active-border-tint-amount)
+        );
+      } @else {
+        @include button-variant($value, $value);
+      }
     }
   }
-}
 
-@each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    @include button-outline-variant($value);
+  @each $color, $value in $theme-colors {
+    .btn-outline-#{$color} {
+      @include button-outline-variant($value);
+    }
   }
-}
-// scss-docs-end btn-variant-loops
+  // scss-docs-end btn-variant-loops
 
 
-//
-// Link buttons
-//
+  //
+  // Link buttons
+  //
 
-// Make a button look and behave like a link
-.btn-link {
-  --#{$prefix}btn-font-weight: #{$font-weight-normal};
-  --#{$prefix}btn-color: #{$btn-link-color};
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
-  --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-active-color: #{$btn-link-hover-color};
-  --#{$prefix}btn-active-border-color: transparent;
-  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
-  --#{$prefix}btn-disabled-border-color: transparent;
-  --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
-  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
+  // Make a button look and behave like a link
+  .btn-link {
+    --#{$prefix}btn-font-weight: #{$font-weight-normal};
+    --#{$prefix}btn-color: #{$btn-link-color};
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-color: transparent;
+    --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-active-color: #{$btn-link-hover-color};
+    --#{$prefix}btn-active-border-color: transparent;
+    --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
+    --#{$prefix}btn-disabled-border-color: transparent;
+    --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
+    --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
 
-  text-decoration: $link-decoration;
-  @if $enable-gradients {
-    background-image: none;
+    text-decoration: $link-decoration;
+    @if $enable-gradients {
+      background-image: none;
+    }
+
+    &:hover,
+    &:focus-visible {
+      text-decoration: $link-hover-decoration;
+    }
+
+    &:focus-visible {
+      color: var(--#{$prefix}btn-color);
+    }
+
+    &:hover {
+      color: var(--#{$prefix}btn-hover-color);
+    }
+
+    // No need for an active state here
   }
 
-  &:hover,
-  &:focus-visible {
-    text-decoration: $link-hover-decoration;
+
+  //
+  // Button Sizes
+  //
+
+  .btn-lg {
+    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
   }
 
-  &:focus-visible {
-    color: var(--#{$prefix}btn-color);
+  .btn-sm {
+    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
   }
-
-  &:hover {
-    color: var(--#{$prefix}btn-hover-color);
-  }
-
-  // No need for an active state here
-}
-
-
-//
-// Button Sizes
-//
-
-.btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
-}
-
-.btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
 }
diff --git a/scss/_card.scss b/scss/_card.scss
index fd937a5ede..530170a885 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -8,234 +8,236 @@
 // Base styles
 //
 
-.card {
-  // scss-docs-start card-css-vars
-  --#{$prefix}card-spacer-y: #{$card-spacer-y};
-  --#{$prefix}card-spacer-x: #{$card-spacer-x};
-  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
-  --#{$prefix}card-title-color: #{$card-title-color};
-  --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
-  --#{$prefix}card-border-width: #{$card-border-width};
-  --#{$prefix}card-border-color: #{$card-border-color};
-  --#{$prefix}card-border-radius: #{$card-border-radius};
-  --#{$prefix}card-box-shadow: #{$card-box-shadow};
-  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
-  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
-  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
-  --#{$prefix}card-cap-bg: #{$card-cap-bg};
-  --#{$prefix}card-cap-color: #{$card-cap-color};
-  --#{$prefix}card-height: #{$card-height};
-  --#{$prefix}card-color: #{$card-color};
-  --#{$prefix}card-bg: #{$card-bg};
-  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
-  --#{$prefix}card-group-margin: #{$card-group-margin};
-  // scss-docs-end card-css-vars
+@layer components {
+  .card {
+    // scss-docs-start card-css-vars
+    --#{$prefix}card-spacer-y: #{$card-spacer-y};
+    --#{$prefix}card-spacer-x: #{$card-spacer-x};
+    --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
+    --#{$prefix}card-title-color: #{$card-title-color};
+    --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
+    --#{$prefix}card-border-width: #{$card-border-width};
+    --#{$prefix}card-border-color: #{$card-border-color};
+    --#{$prefix}card-border-radius: #{$card-border-radius};
+    --#{$prefix}card-box-shadow: #{$card-box-shadow};
+    --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
+    --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
+    --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
+    --#{$prefix}card-cap-bg: #{$card-cap-bg};
+    --#{$prefix}card-cap-color: #{$card-cap-color};
+    --#{$prefix}card-height: #{$card-height};
+    --#{$prefix}card-color: #{$card-color};
+    --#{$prefix}card-bg: #{$card-bg};
+    --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
+    --#{$prefix}card-group-margin: #{$card-group-margin};
+    // scss-docs-end card-css-vars
 
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-  height: var(--#{$prefix}card-height);
-  color: var(--#{$prefix}body-color);
-  word-wrap: break-word;
-  background-color: var(--#{$prefix}card-bg);
-  background-clip: border-box;
-  border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
-  @include border-radius(var(--#{$prefix}card-border-radius));
-  @include box-shadow(var(--#{$prefix}card-box-shadow));
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+    height: var(--#{$prefix}card-height);
+    color: var(--#{$prefix}body-color);
+    word-wrap: break-word;
+    background-color: var(--#{$prefix}card-bg);
+    background-clip: border-box;
+    border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+    @include border-radius(var(--#{$prefix}card-border-radius));
+    @include box-shadow(var(--#{$prefix}card-box-shadow));
 
-  > hr {
-    margin-right: 0;
-    margin-left: 0;
+    > hr {
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    > .list-group {
+      border-top: inherit;
+      border-bottom: inherit;
+
+      &:first-child {
+        border-top-width: 0;
+        @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+      }
+
+      &:last-child  {
+        border-bottom-width: 0;
+        @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+      }
+    }
+
+    // Due to specificity of the above selector (`.card > .list-group`), we must
+    // use a child selector here to prevent double borders.
+    > .card-header + .list-group,
+    > .list-group + .card-footer {
+      border-top: 0;
+    }
   }
 
-  > .list-group {
-    border-top: inherit;
-    border-bottom: inherit;
+  .card-body {
+    // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+    // as much space as possible, ensuring footers are aligned to the bottom.
+    flex: 1 1 auto;
+    padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
+    color: var(--#{$prefix}card-color);
+  }
+
+  .card-title {
+    margin-bottom: var(--#{$prefix}card-title-spacer-y);
+    color: var(--#{$prefix}card-title-color);
+  }
+
+  .card-subtitle {
+    margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
+    margin-bottom: 0;
+    color: var(--#{$prefix}card-subtitle-color);
+  }
+
+  .card-text:last-child {
+    margin-bottom: 0;
+  }
+
+  .card-link {
+    &:hover {
+      text-decoration: if($link-hover-decoration == underline, none, null);
+    }
+
+    + .card-link {
+      margin-left: var(--#{$prefix}card-spacer-x);
+    }
+  }
+
+  //
+  // Optional textual caps
+  //
+
+  .card-header {
+    padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
+    margin-bottom: 0; // Removes the default margin-bottom of <hN>
+    color: var(--#{$prefix}card-cap-color);
+    background-color: var(--#{$prefix}card-cap-bg);
+    border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
 
     &:first-child {
-      border-top-width: 0;
-      @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
-    }
-
-    &:last-child  {
-      border-bottom-width: 0;
-      @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+      @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
     }
   }
 
-  // Due to specificity of the above selector (`.card > .list-group`), we must
-  // use a child selector here to prevent double borders.
-  > .card-header + .list-group,
-  > .list-group + .card-footer {
-    border-top: 0;
-  }
-}
+  .card-footer {
+    padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
+    color: var(--#{$prefix}card-cap-color);
+    background-color: var(--#{$prefix}card-cap-bg);
+    border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
 
-.card-body {
-  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
-  // as much space as possible, ensuring footers are aligned to the bottom.
-  flex: 1 1 auto;
-  padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
-  color: var(--#{$prefix}card-color);
-}
-
-.card-title {
-  margin-bottom: var(--#{$prefix}card-title-spacer-y);
-  color: var(--#{$prefix}card-title-color);
-}
-
-.card-subtitle {
-  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
-  margin-bottom: 0;
-  color: var(--#{$prefix}card-subtitle-color);
-}
-
-.card-text:last-child {
-  margin-bottom: 0;
-}
-
-.card-link {
-  &:hover {
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    &:last-child {
+      @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
+    }
   }
 
-  + .card-link {
-    margin-left: var(--#{$prefix}card-spacer-x);
-  }
-}
 
-//
-// Optional textual caps
-//
+  //
+  // Header navs
+  //
 
-.card-header {
-  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
-  margin-bottom: 0; // Removes the default margin-bottom of <hN>
-  color: var(--#{$prefix}card-cap-color);
-  background-color: var(--#{$prefix}card-cap-bg);
-  border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+  .card-header-tabs {
+    margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+    margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+    border-bottom: 0;
 
-  &:first-child {
-    @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
-  }
-}
-
-.card-footer {
-  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
-  color: var(--#{$prefix}card-cap-color);
-  background-color: var(--#{$prefix}card-cap-bg);
-  border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
-
-  &:last-child {
-    @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
-  }
-}
-
-
-//
-// Header navs
-//
-
-.card-header-tabs {
-  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-  margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-  border-bottom: 0;
-
-  .nav-link.active {
-    background-color: var(--#{$prefix}card-bg);
-    border-bottom-color: var(--#{$prefix}card-bg);
-  }
-}
-
-.card-header-pills {
-  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-}
-
-// Card image
-.card-img-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: var(--#{$prefix}card-img-overlay-padding);
-  @include border-radius(var(--#{$prefix}card-inner-border-radius));
-}
-
-.card-img,
-.card-img-top,
-.card-img-bottom {
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-}
-
-.card-img,
-.card-img-top {
-  @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
-}
-
-.card-img,
-.card-img-bottom {
-  @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
-}
-
-
-//
-// Card groups
-//
-
-.card-group {
-  // The child selector allows nested `.card` within `.card-group`
-  // to display properly.
-  > .card {
-    margin-bottom: var(--#{$prefix}card-group-margin);
+    .nav-link.active {
+      background-color: var(--#{$prefix}card-bg);
+      border-bottom-color: var(--#{$prefix}card-bg);
+    }
   }
 
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
+  .card-header-pills {
+    margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  }
+
+  // Card image
+  .card-img-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: var(--#{$prefix}card-img-overlay-padding);
+    @include border-radius(var(--#{$prefix}card-inner-border-radius));
+  }
+
+  .card-img,
+  .card-img-top,
+  .card-img-bottom {
+    width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  }
+
+  .card-img,
+  .card-img-top {
+    @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+  }
+
+  .card-img,
+  .card-img-bottom {
+    @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+  }
+
+
+  //
+  // Card groups
+  //
+
+  .card-group {
     // The child selector allows nested `.card` within `.card-group`
     // to display properly.
     > .card {
-      flex: 1 0 0;
-      margin-bottom: 0;
+      margin-bottom: var(--#{$prefix}card-group-margin);
+    }
 
-      + .card {
-        margin-left: 0;
-        border-left: 0;
-      }
+    @include media-breakpoint-up(sm) {
+      display: flex;
+      flex-flow: row wrap;
+      // The child selector allows nested `.card` within `.card-group`
+      // to display properly.
+      > .card {
+        flex: 1 0 0;
+        margin-bottom: 0;
 
-      // Handle rounded corners
-      @if $enable-rounded {
-        &:not(:last-child) {
-          @include border-end-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-right-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-right-radius: 0;
-          }
+        + .card {
+          margin-left: 0;
+          border-left: 0;
         }
 
-        &:not(:first-child) {
-          @include border-start-radius(0);
+        // Handle rounded corners
+        @if $enable-rounded {
+          &:not(:last-child) {
+            @include border-end-radius(0);
 
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-left-radius: 0;
+            .card-img-top,
+            .card-header {
+              // stylelint-disable-next-line property-disallowed-list
+              border-top-right-radius: 0;
+            }
+            .card-img-bottom,
+            .card-footer {
+              // stylelint-disable-next-line property-disallowed-list
+              border-bottom-right-radius: 0;
+            }
           }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-left-radius: 0;
+
+          &:not(:first-child) {
+            @include border-start-radius(0);
+
+            .card-img-top,
+            .card-header {
+              // stylelint-disable-next-line property-disallowed-list
+              border-top-left-radius: 0;
+            }
+            .card-img-bottom,
+            .card-footer {
+              // stylelint-disable-next-line property-disallowed-list
+              border-bottom-left-radius: 0;
+            }
           }
         }
       }
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 68f1e54f33..be70911447 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -19,216 +19,218 @@
 // 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
 //    is the upcoming slide in transition.
 
-.carousel {
-  position: relative;
-}
+@layer components {
+  .carousel {
+    position: relative;
+  }
 
-.carousel.pointer-event {
-  touch-action: pan-y;
-}
+  .carousel.pointer-event {
+    touch-action: pan-y;
+  }
 
-.carousel-inner {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  @include clearfix();
-}
+  .carousel-inner {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    @include clearfix();
+  }
 
-.carousel-item {
-  position: relative;
-  display: none;
-  float: left;
-  width: 100%;
-  margin-right: -100%;
-  backface-visibility: hidden;
-  @include transition($carousel-transition);
-}
-
-.carousel-item.active,
-.carousel-item-next,
-.carousel-item-prev {
-  display: block;
-}
-
-.carousel-item-next:not(.carousel-item-start),
-.active.carousel-item-end {
-  transform: translateX(100%);
-}
-
-.carousel-item-prev:not(.carousel-item-end),
-.active.carousel-item-start {
-  transform: translateX(-100%);
-}
-
-
-//
-// Alternate transitions
-//
-
-.carousel-fade {
   .carousel-item {
-    opacity: 0;
-    transition-property: opacity;
-    transform: none;
+    position: relative;
+    display: none;
+    float: left;
+    width: 100%;
+    margin-right: -100%;
+    backface-visibility: hidden;
+    @include transition($carousel-transition);
   }
 
   .carousel-item.active,
-  .carousel-item-next.carousel-item-start,
-  .carousel-item-prev.carousel-item-end {
-    z-index: 1;
-    opacity: 1;
+  .carousel-item-next,
+  .carousel-item-prev {
+    display: block;
   }
 
-  .active.carousel-item-start,
+  .carousel-item-next:not(.carousel-item-start),
   .active.carousel-item-end {
-    z-index: 0;
-    opacity: 0;
-    @include transition(opacity 0s $carousel-transition-duration);
+    transform: translateX(100%);
   }
-}
 
-
-//
-// Left/right controls for nav
-//
-
-.carousel-control-prev,
-.carousel-control-next {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  // Use flex for alignment (1-3)
-  display: flex; // 1. allow flex styles
-  align-items: center; // 2. vertically center contents
-  justify-content: center; // 3. horizontally center contents
-  width: $carousel-control-width;
-  padding: 0;
-  color: $carousel-control-color;
-  text-align: center;
-  background: none;
-  filter: var(--#{$prefix}carousel-control-icon-filter);
-  border: 0;
-  opacity: $carousel-control-opacity;
-  @include transition($carousel-control-transition);
-
-  // Hover/focus state
-  &:hover,
-  &:focus {
-    color: $carousel-control-color;
-    text-decoration: none;
-    outline: 0;
-    opacity: $carousel-control-hover-opacity;
+  .carousel-item-prev:not(.carousel-item-end),
+  .active.carousel-item-start {
+    transform: translateX(-100%);
   }
-}
-.carousel-control-prev {
-  left: 0;
-  background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
-}
-.carousel-control-next {
-  right: 0;
-  background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
-}
 
-// Icons for within
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  display: inline-block;
-  width: $carousel-control-icon-width;
-  height: $carousel-control-icon-width;
-  background-repeat: no-repeat;
-  background-position: 50%;
-  background-size: 100% 100%;
-}
 
-.carousel-control-prev-icon {
-  background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
-}
-.carousel-control-next-icon {
-  background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
-}
+  //
+  // Alternate transitions
+  //
 
-// Optional indicator pips/controls
-//
-// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
-// like a button) with data-bs-target for each slide your carousel holds.
+  .carousel-fade {
+    .carousel-item {
+      opacity: 0;
+      transition-property: opacity;
+      transform: none;
+    }
 
-.carousel-indicators {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-  display: flex;
-  justify-content: center;
-  padding: 0;
-  // Use the .carousel-control's width as margin so we don't overlay those
-  margin-right: $carousel-control-width;
-  margin-bottom: 1rem;
-  margin-left: $carousel-control-width;
+    .carousel-item.active,
+    .carousel-item-next.carousel-item-start,
+    .carousel-item-prev.carousel-item-end {
+      z-index: 1;
+      opacity: 1;
+    }
 
-  [data-bs-target] {
-    box-sizing: content-box;
-    flex: 0 1 auto;
-    width: $carousel-indicator-width;
-    height: $carousel-indicator-height;
+    .active.carousel-item-start,
+    .active.carousel-item-end {
+      z-index: 0;
+      opacity: 0;
+      @include transition(opacity 0s $carousel-transition-duration);
+    }
+  }
+
+
+  //
+  // Left/right controls for nav
+  //
+
+  .carousel-control-prev,
+  .carousel-control-next {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    // Use flex for alignment (1-3)
+    display: flex; // 1. allow flex styles
+    align-items: center; // 2. vertically center contents
+    justify-content: center; // 3. horizontally center contents
+    width: $carousel-control-width;
     padding: 0;
-    margin-right: $carousel-indicator-spacer;
-    margin-left: $carousel-indicator-spacer;
-    text-indent: -999px;
-    cursor: pointer;
-    background-color: var(--#{$prefix}carousel-indicator-active-bg);
-    background-clip: padding-box;
+    color: $carousel-control-color;
+    text-align: center;
+    background: none;
+    filter: var(--#{$prefix}carousel-control-icon-filter);
     border: 0;
-    // Use transparent borders to increase the hit area by 10px on top and bottom.
-    border-top: $carousel-indicator-hit-area-height solid transparent;
-    border-bottom: $carousel-indicator-hit-area-height solid transparent;
-    opacity: $carousel-indicator-opacity;
-    @include transition($carousel-indicator-transition);
+    opacity: $carousel-control-opacity;
+    @include transition($carousel-control-transition);
+
+    // Hover/focus state
+    &:hover,
+    &:focus {
+      color: $carousel-control-color;
+      text-decoration: none;
+      outline: 0;
+      opacity: $carousel-control-hover-opacity;
+    }
+  }
+  .carousel-control-prev {
+    left: 0;
+    background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
+  }
+  .carousel-control-next {
+    right: 0;
+    background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
   }
 
-  .active {
-    opacity: $carousel-indicator-active-opacity;
+  // Icons for within
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    display: inline-block;
+    width: $carousel-control-icon-width;
+    height: $carousel-control-icon-width;
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: 100% 100%;
+  }
+
+  .carousel-control-prev-icon {
+    background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
+  }
+  .carousel-control-next-icon {
+    background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
+  }
+
+  // Optional indicator pips/controls
+  //
+  // Add a container (such as a list) with the following class and add an item (ideally a focusable control,
+  // like a button) with data-bs-target for each slide your carousel holds.
+
+  .carousel-indicators {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    padding: 0;
+    // Use the .carousel-control's width as margin so we don't overlay those
+    margin-right: $carousel-control-width;
+    margin-bottom: 1rem;
+    margin-left: $carousel-control-width;
+
+    [data-bs-target] {
+      box-sizing: content-box;
+      flex: 0 1 auto;
+      width: $carousel-indicator-width;
+      height: $carousel-indicator-height;
+      padding: 0;
+      margin-right: $carousel-indicator-spacer;
+      margin-left: $carousel-indicator-spacer;
+      text-indent: -999px;
+      cursor: pointer;
+      background-color: var(--#{$prefix}carousel-indicator-active-bg);
+      background-clip: padding-box;
+      border: 0;
+      // Use transparent borders to increase the hit area by 10px on top and bottom.
+      border-top: $carousel-indicator-hit-area-height solid transparent;
+      border-bottom: $carousel-indicator-hit-area-height solid transparent;
+      opacity: $carousel-indicator-opacity;
+      @include transition($carousel-indicator-transition);
+    }
+
+    .active {
+      opacity: $carousel-indicator-active-opacity;
+    }
   }
-}
 
 
-// Optional captions
-//
-//
+  // Optional captions
+  //
+  //
 
-.carousel-caption {
-  position: absolute;
-  right: (100% - $carousel-caption-width) * .5;
-  bottom: $carousel-caption-spacer;
-  left: (100% - $carousel-caption-width) * .5;
-  padding-top: $carousel-caption-padding-y;
-  padding-bottom: $carousel-caption-padding-y;
-  color: var(--#{$prefix}carousel-caption-color);
-  text-align: center;
-}
+  .carousel-caption {
+    position: absolute;
+    right: (100% - $carousel-caption-width) * .5;
+    bottom: $carousel-caption-spacer;
+    left: (100% - $carousel-caption-width) * .5;
+    padding-top: $carousel-caption-padding-y;
+    padding-bottom: $carousel-caption-padding-y;
+    color: var(--#{$prefix}carousel-caption-color);
+    text-align: center;
+  }
 
-// Dark mode carousel
+  // Dark mode carousel
 
-@mixin carousel-dark() {
-  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
-  --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
-  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
-}
+  @mixin carousel-dark() {
+    --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
+    --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
+    --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
+  }
 
-.carousel-dark {
-  @include carousel-dark();
-}
-
-:root,
-[data-bs-theme="light"] {
-  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
-  --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
-  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark, true) {
+  .carousel-dark {
     @include carousel-dark();
   }
+
+  :root,
+  [data-bs-theme="light"] {
+    --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
+    --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
+    --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
+  }
+
+  @if $enable-dark-mode {
+    @include color-mode(dark, true) {
+      @include carousel-dark();
+    }
+  }
 }
diff --git a/scss/_close.scss b/scss/_close.scss
index 98140fb02d..d42018a61a 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -8,64 +8,66 @@
 // If you want the anchor version, it requires `href="#"`.
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
-.btn-close {
-  // scss-docs-start close-css-vars
-  --#{$prefix}btn-close-color: #{$btn-close-color};
-  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
-  --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
-  --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
-  --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
-  --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
-  --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
-  // scss-docs-end close-css-vars
+@layer components {
+  .btn-close {
+    // scss-docs-start close-css-vars
+    --#{$prefix}btn-close-color: #{$btn-close-color};
+    --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+    --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+    --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+    --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
+    --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
+    --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+    // scss-docs-end close-css-vars
 
-  box-sizing: content-box;
-  width: $btn-close-width;
-  height: $btn-close-height;
-  padding: $btn-close-padding-y $btn-close-padding-x;
-  color: var(--#{$prefix}btn-close-color);
-  background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
-  filter: var(--#{$prefix}btn-close-filter);
-  border: 0; // for button elements
-  @include border-radius();
-  opacity: var(--#{$prefix}btn-close-opacity);
-
-  // Override <a>'s hover style
-  &:hover {
+    box-sizing: content-box;
+    width: $btn-close-width;
+    height: $btn-close-height;
+    padding: $btn-close-padding-y $btn-close-padding-x;
     color: var(--#{$prefix}btn-close-color);
-    text-decoration: none;
-    opacity: var(--#{$prefix}btn-close-hover-opacity);
+    background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
+    filter: var(--#{$prefix}btn-close-filter);
+    border: 0; // for button elements
+    @include border-radius();
+    opacity: var(--#{$prefix}btn-close-opacity);
+
+    // Override <a>'s hover style
+    &:hover {
+      color: var(--#{$prefix}btn-close-color);
+      text-decoration: none;
+      opacity: var(--#{$prefix}btn-close-hover-opacity);
+    }
+
+    &:focus {
+      outline: 0;
+      box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+      opacity: var(--#{$prefix}btn-close-focus-opacity);
+    }
+
+    &:disabled,
+    &.disabled {
+      pointer-events: none;
+      user-select: none;
+      opacity: var(--#{$prefix}btn-close-disabled-opacity);
+    }
   }
 
-  &:focus {
-    outline: 0;
-    box-shadow: var(--#{$prefix}btn-close-focus-shadow);
-    opacity: var(--#{$prefix}btn-close-focus-opacity);
+  @mixin btn-close-white() {
+    --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
   }
 
-  &:disabled,
-  &.disabled {
-    pointer-events: none;
-    user-select: none;
-    opacity: var(--#{$prefix}btn-close-disabled-opacity);
-  }
-}
-
-@mixin btn-close-white() {
-  --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
-}
-
-.btn-close-white {
-  @include btn-close-white();
-}
-
-:root,
-[data-bs-theme="light"] {
-  --#{$prefix}btn-close-filter: #{$btn-close-filter};
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark, true) {
+  .btn-close-white {
     @include btn-close-white();
   }
+
+  :root,
+  [data-bs-theme="light"] {
+    --#{$prefix}btn-close-filter: #{$btn-close-filter};
+  }
+
+  @if $enable-dark-mode {
+    @include color-mode(dark, true) {
+      @include btn-close-white();
+    }
+  }
 }
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 70780dd715..07bd13d527 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -9,253 +9,255 @@
 @use "vendor/rfs" as *;
 @use "layout/breakpoints" as *;
 
-// The dropdown wrapper (`<div>`)
-.dropup,
-.dropend,
-.dropdown,
-.dropstart,
-.dropup-center,
-.dropdown-center {
-  position: relative;
-}
-
-.dropdown-toggle {
-  white-space: nowrap;
-
-  // Generate the caret automatically
-  @include caret();
-}
-
-// The dropdown menu
-.dropdown-menu {
-  // scss-docs-start dropdown-css-vars
-  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
-  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
-  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
-  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
-  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
-  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
-  --#{$prefix}dropdown-color: #{$dropdown-color};
-  --#{$prefix}dropdown-bg: #{$dropdown-bg};
-  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
-  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
-  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
-  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
-  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
-  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
-  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
-  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
-  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
-  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
-  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
-  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
-  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
-  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
-  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
-  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
-  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
-  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
-  // scss-docs-end dropdown-css-vars
-
-  position: absolute;
-  z-index: var(--#{$prefix}dropdown-zindex);
-  display: none; // none by default, but block on "open" of the menu
-  min-width: var(--#{$prefix}dropdown-min-width);
-  padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
-  margin: 0; // Override default margin of ul
-  @include font-size(var(--#{$prefix}dropdown-font-size));
-  color: var(--#{$prefix}dropdown-color);
-  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
-  list-style: none;
-  background-color: var(--#{$prefix}dropdown-bg);
-  background-clip: padding-box;
-  border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
-  @include border-radius(var(--#{$prefix}dropdown-border-radius));
-  @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
-
-  &[data-bs-popper] {
-    top: 100%;
-    left: 0;
-    margin-top: var(--#{$prefix}dropdown-spacer);
+@layer components {
+  // The dropdown wrapper (`<div>`)
+  .dropup,
+  .dropend,
+  .dropdown,
+  .dropstart,
+  .dropup-center,
+  .dropdown-center {
+    position: relative;
   }
 
-  @if $dropdown-padding-y == 0 {
-    > .dropdown-item:first-child,
-    > li:first-child .dropdown-item {
-      @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
-    }
-    > .dropdown-item:last-child,
-    > li:last-child .dropdown-item {
-      @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
-    }
+  .dropdown-toggle {
+    white-space: nowrap;
 
+    // Generate the caret automatically
+    @include caret();
   }
-}
 
-// scss-docs-start responsive-breakpoints
-// We deliberately hardcode the `bs-` prefix because we check
-// this custom property in JS to determine Popper's positioning
+  // The dropdown menu
+  .dropdown-menu {
+    // scss-docs-start dropdown-css-vars
+    --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
+    --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
+    --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
+    --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
+    --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
+    @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
+    --#{$prefix}dropdown-color: #{$dropdown-color};
+    --#{$prefix}dropdown-bg: #{$dropdown-bg};
+    --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
+    --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
+    --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
+    --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
+    --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
+    --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
+    --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
+    --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
+    --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
+    --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+    --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
+    --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
+    --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+    --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
+    --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
+    --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
+    --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
+    --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
+    // scss-docs-end dropdown-css-vars
 
-@each $breakpoint in map.keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    position: absolute;
+    z-index: var(--#{$prefix}dropdown-zindex);
+    display: none; // none by default, but block on "open" of the menu
+    min-width: var(--#{$prefix}dropdown-min-width);
+    padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
+    margin: 0; // Override default margin of ul
+    @include font-size(var(--#{$prefix}dropdown-font-size));
+    color: var(--#{$prefix}dropdown-color);
+    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+    list-style: none;
+    background-color: var(--#{$prefix}dropdown-bg);
+    background-clip: padding-box;
+    border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
+    @include border-radius(var(--#{$prefix}dropdown-border-radius));
+    @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
 
-    .dropdown-menu#{$infix}-start {
-      --bs-position: start;
+    &[data-bs-popper] {
+      top: 100%;
+      left: 0;
+      margin-top: var(--#{$prefix}dropdown-spacer);
+    }
 
-      &[data-bs-popper] {
-        right: auto;
-        left: 0;
+    @if $dropdown-padding-y == 0 {
+      > .dropdown-item:first-child,
+      > li:first-child .dropdown-item {
+        @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
       }
+      > .dropdown-item:last-child,
+      > li:last-child .dropdown-item {
+        @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
+      }
+
     }
+  }
 
-    .dropdown-menu#{$infix}-end {
-      --bs-position: end;
+  // scss-docs-start responsive-breakpoints
+  // We deliberately hardcode the `bs-` prefix because we check
+  // this custom property in JS to determine Popper's positioning
 
-      &[data-bs-popper] {
-        right: 0;
-        left: auto;
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      .dropdown-menu#{$infix}-start {
+        --bs-position: start;
+
+        &[data-bs-popper] {
+          right: auto;
+          left: 0;
+        }
+      }
+
+      .dropdown-menu#{$infix}-end {
+        --bs-position: end;
+
+        &[data-bs-popper] {
+          right: 0;
+          left: auto;
+        }
       }
     }
   }
-}
-// scss-docs-end responsive-breakpoints
+  // scss-docs-end responsive-breakpoints
 
-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-// Just add .dropup after the standard .dropdown class and you're set.
-.dropup {
-  .dropdown-menu[data-bs-popper] {
-    top: auto;
-    bottom: 100%;
-    margin-top: 0;
-    margin-bottom: var(--#{$prefix}dropdown-spacer);
-  }
+  // Allow for dropdowns to go bottom up (aka, dropup-menu)
+  // Just add .dropup after the standard .dropdown class and you're set.
+  .dropup {
+    .dropdown-menu[data-bs-popper] {
+      top: auto;
+      bottom: 100%;
+      margin-top: 0;
+      margin-bottom: var(--#{$prefix}dropdown-spacer);
+    }
 
-  .dropdown-toggle {
-    @include caret(up);
-  }
-}
-
-.dropend {
-  .dropdown-menu[data-bs-popper] {
-    top: 0;
-    right: auto;
-    left: 100%;
-    margin-top: 0;
-    margin-left: var(--#{$prefix}dropdown-spacer);
-  }
-
-  .dropdown-toggle {
-    @include caret(end);
-    &::after {
-      vertical-align: 0;
+    .dropdown-toggle {
+      @include caret(up);
     }
   }
-}
 
-.dropstart {
-  .dropdown-menu[data-bs-popper] {
-    top: 0;
-    right: 100%;
-    left: auto;
-    margin-top: 0;
-    margin-right: var(--#{$prefix}dropdown-spacer);
-  }
+  .dropend {
+    .dropdown-menu[data-bs-popper] {
+      top: 0;
+      right: auto;
+      left: 100%;
+      margin-top: 0;
+      margin-left: var(--#{$prefix}dropdown-spacer);
+    }
 
-  .dropdown-toggle {
-    @include caret(start);
-    &::before {
-      vertical-align: 0;
+    .dropdown-toggle {
+      @include caret(end);
+      &::after {
+        vertical-align: 0;
+      }
     }
   }
-}
 
+  .dropstart {
+    .dropdown-menu[data-bs-popper] {
+      top: 0;
+      right: 100%;
+      left: auto;
+      margin-top: 0;
+      margin-right: var(--#{$prefix}dropdown-spacer);
+    }
 
-// Dividers (basically an `<hr>`) within the dropdown
-.dropdown-divider {
-  height: 0;
-  margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
-  overflow: hidden;
-  border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
-  opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
-}
-
-// Links, buttons, and more within the dropdown menu
-//
-// `<button>`-specific styles are denoted with `// For <button>s`
-.dropdown-item {
-  display: block;
-  width: 100%; // For `<button>`s
-  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
-  clear: both;
-  font-weight: $font-weight-normal;
-  color: var(--#{$prefix}dropdown-link-color);
-  text-align: inherit; // For `<button>`s
-  text-decoration: if($link-decoration == none, null, none);
-  white-space: nowrap; // prevent links from randomly breaking onto new lines
-  background-color: transparent; // For `<button>`s
-  border: 0; // For `<button>`s
-  @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
-
-  &:hover,
-  &:focus {
-    color: var(--#{$prefix}dropdown-link-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
-    @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
+    .dropdown-toggle {
+      @include caret(start);
+      &::before {
+        vertical-align: 0;
+      }
+    }
   }
 
-  &.active,
-  &:active {
-    color: var(--#{$prefix}dropdown-link-active-color);
-    text-decoration: none;
-    @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
+
+  // Dividers (basically an `<hr>`) within the dropdown
+  .dropdown-divider {
+    height: 0;
+    margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
+    overflow: hidden;
+    border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
+    opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
   }
 
-  &.disabled,
-  &:disabled {
-    color: var(--#{$prefix}dropdown-link-disabled-color);
-    pointer-events: none;
-    background-color: transparent;
-    // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
+  // Links, buttons, and more within the dropdown menu
+  //
+  // `<button>`-specific styles are denoted with `// For <button>s`
+  .dropdown-item {
+    display: block;
+    width: 100%; // For `<button>`s
+    padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
+    clear: both;
+    font-weight: $font-weight-normal;
+    color: var(--#{$prefix}dropdown-link-color);
+    text-align: inherit; // For `<button>`s
+    text-decoration: if($link-decoration == none, null, none);
+    white-space: nowrap; // prevent links from randomly breaking onto new lines
+    background-color: transparent; // For `<button>`s
+    border: 0; // For `<button>`s
+    @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
+
+    &:hover,
+    &:focus {
+      color: var(--#{$prefix}dropdown-link-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
+      @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
+    }
+
+    &.active,
+    &:active {
+      color: var(--#{$prefix}dropdown-link-active-color);
+      text-decoration: none;
+      @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
+    }
+
+    &.disabled,
+    &:disabled {
+      color: var(--#{$prefix}dropdown-link-disabled-color);
+      pointer-events: none;
+      background-color: transparent;
+      // Remove CSS gradients if they're enabled
+      background-image: if($enable-gradients, none, null);
+    }
+  }
+
+  .dropdown-menu.show {
+    display: block;
+  }
+
+  // Dropdown section headers
+  .dropdown-header {
+    display: block;
+    padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
+    margin-bottom: 0; // for use with heading elements
+    @include font-size($font-size-sm);
+    color: var(--#{$prefix}dropdown-header-color);
+    white-space: nowrap; // as with > li > a
+  }
+
+  // Dropdown text
+  .dropdown-item-text {
+    display: block;
+    padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
+    color: var(--#{$prefix}dropdown-link-color);
+  }
+
+  // Dark dropdowns
+  .dropdown-menu-dark {
+    // scss-docs-start dropdown-dark-css-vars
+    --#{$prefix}dropdown-color: #{$dropdown-dark-color};
+    --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
+    --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
+    --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
+    --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
+    --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
+    --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
+    --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
+    --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
+    --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
+    --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
+    --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
+    // scss-docs-end dropdown-dark-css-vars
   }
 }
-
-.dropdown-menu.show {
-  display: block;
-}
-
-// Dropdown section headers
-.dropdown-header {
-  display: block;
-  padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
-  margin-bottom: 0; // for use with heading elements
-  @include font-size($font-size-sm);
-  color: var(--#{$prefix}dropdown-header-color);
-  white-space: nowrap; // as with > li > a
-}
-
-// Dropdown text
-.dropdown-item-text {
-  display: block;
-  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
-  color: var(--#{$prefix}dropdown-link-color);
-}
-
-// Dark dropdowns
-.dropdown-menu-dark {
-  // scss-docs-start dropdown-dark-css-vars
-  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
-  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
-  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
-  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
-  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
-  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
-  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
-  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
-  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
-  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
-  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
-  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
-  // scss-docs-end dropdown-dark-css-vars
-}
diff --git a/scss/_images.scss b/scss/_images.scss
deleted file mode 100644
index f2858f6585..0000000000
--- a/scss/_images.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@use "config" as *;
-@use "variables" as *;
-@use "vendor/rfs" as *;
-@use "mixins/image" as *;
-@use "mixins/border-radius" as *;
-@use "mixins/box-shadow" as *;
-
-// Responsive images (ensure images don't scale beyond their parents)
-//
-// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
-// We previously tried the "images are responsive by default" approach in Bootstrap v2,
-// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
-// which weren't expecting the images within themselves to be involuntarily resized.
-// See also https://github.com/twbs/bootstrap/issues/18178
-.img-fluid {
-  @include img-fluid();
-}
-
-
-// Image thumbnails
-.img-thumbnail {
-  padding: $thumbnail-padding;
-  background-color: $thumbnail-bg;
-  border: $thumbnail-border-width solid $thumbnail-border-color;
-  @include border-radius($thumbnail-border-radius);
-  @include box-shadow($thumbnail-box-shadow);
-
-  // Keep them at most 100% wide
-  @include img-fluid();
-}
-
-//
-// Figures
-//
-
-.figure {
-  // Ensures the caption's text aligns with the image.
-  display: inline-block;
-}
-
-.figure-img {
-  margin-bottom: $spacer * .5;
-  line-height: 1;
-}
-
-.figure-caption {
-  @include font-size($figure-caption-font-size);
-  color: $figure-caption-color;
-}
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 948b3a4b3c..f7e80b289b 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -10,196 +10,198 @@
 //
 // Easily usable on <ul>, <ol>, or <div>.
 
-.list-group {
-  // scss-docs-start list-group-css-vars
-  --#{$prefix}list-group-color: #{$list-group-color};
-  --#{$prefix}list-group-bg: #{$list-group-bg};
-  --#{$prefix}list-group-border-color: #{$list-group-border-color};
-  --#{$prefix}list-group-border-width: #{$list-group-border-width};
-  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
-  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
-  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
-  --#{$prefix}list-group-action-color: #{$list-group-action-color};
-  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
-  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
-  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
-  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
-  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
-  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
-  --#{$prefix}list-group-active-color: #{$list-group-active-color};
-  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
-  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
-  // scss-docs-end list-group-css-vars
+@layer components {
+  .list-group {
+    // scss-docs-start list-group-css-vars
+    --#{$prefix}list-group-color: #{$list-group-color};
+    --#{$prefix}list-group-bg: #{$list-group-bg};
+    --#{$prefix}list-group-border-color: #{$list-group-border-color};
+    --#{$prefix}list-group-border-width: #{$list-group-border-width};
+    --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
+    --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
+    --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
+    --#{$prefix}list-group-action-color: #{$list-group-action-color};
+    --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
+    --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
+    --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
+    --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
+    --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
+    --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
+    --#{$prefix}list-group-active-color: #{$list-group-active-color};
+    --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
+    --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
+    // scss-docs-end list-group-css-vars
 
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 
-  // No need to set list-style: none; since .list-group-item is block level
-  padding-left: 0; // reset padding because ul and ol
-  margin-bottom: 0;
-  @include border-radius(var(--#{$prefix}list-group-border-radius));
-}
-
-.list-group-numbered {
-  list-style-type: none;
-  counter-reset: section;
-
-  > .list-group-item::before {
-    // Increments only this instance of the section counter
-    content: counters(section, ".") ". ";
-    counter-increment: section;
-  }
-}
-
-// Interactive list items
-//
-// Use anchor or button elements instead of `li`s or `div`s to create interactive
-// list items. Includes an extra `.active` modifier class for selected items.
-
-.list-group-item-action {
-  width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: var(--#{$prefix}list-group-action-color);
-  text-align: inherit; // For `<button>`s (anchors inherit)
-
-  // Hover state
-  &:hover,
-  &:focus {
-    z-index: 1; // Place hover/focus items above their siblings for proper border styling
-    color: var(--#{$prefix}list-group-action-hover-color);
-    text-decoration: none;
-    background-color: var(--#{$prefix}list-group-action-hover-bg);
+    // No need to set list-style: none; since .list-group-item is block level
+    padding-left: 0; // reset padding because ul and ol
+    margin-bottom: 0;
+    @include border-radius(var(--#{$prefix}list-group-border-radius));
   }
 
-  &:active {
-    color: var(--#{$prefix}list-group-action-active-color);
-    background-color: var(--#{$prefix}list-group-action-active-bg);
-  }
-}
+  .list-group-numbered {
+    list-style-type: none;
+    counter-reset: section;
 
-// Individual list items
-//
-// Use on `li`s or `div`s within the `.list-group` parent.
-
-.list-group-item {
-  position: relative;
-  display: block;
-  padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
-  color: var(--#{$prefix}list-group-color);
-  text-decoration: if($link-decoration == none, null, none);
-  background-color: var(--#{$prefix}list-group-bg);
-  border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
-
-  &:first-child {
-    @include border-top-radius(inherit);
-  }
-
-  &:last-child {
-    @include border-bottom-radius(inherit);
-  }
-
-  &.disabled,
-  &:disabled {
-    color: var(--#{$prefix}list-group-disabled-color);
-    pointer-events: none;
-    background-color: var(--#{$prefix}list-group-disabled-bg);
-  }
-
-  // Include both here for `<a>`s and `<button>`s
-  &.active {
-    z-index: 2; // Place active items above their siblings for proper border styling
-    color: var(--#{$prefix}list-group-active-color);
-    background-color: var(--#{$prefix}list-group-active-bg);
-    border-color: var(--#{$prefix}list-group-active-border-color);
-  }
-
-  // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
-  & + .list-group-item {
-    border-top-width: 0;
-
-    &.active {
-      margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
-      border-top-width: var(--#{$prefix}list-group-border-width);
+    > .list-group-item::before {
+      // Increments only this instance of the section counter
+      content: counters(section, ".") ". ";
+      counter-increment: section;
     }
   }
-}
 
-// Horizontal
-//
-// Change the layout of list group items from vertical (default) to horizontal.
+  // Interactive list items
+  //
+  // Use anchor or button elements instead of `li`s or `div`s to create interactive
+  // list items. Includes an extra `.active` modifier class for selected items.
 
-@each $breakpoint in map.keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+  .list-group-item-action {
+    width: 100%; // For `<button>`s (anchors become 100% by default though)
+    color: var(--#{$prefix}list-group-action-color);
+    text-align: inherit; // For `<button>`s (anchors inherit)
 
-    .list-group-horizontal#{$infix} {
-      flex-direction: row;
+    // Hover state
+    &:hover,
+    &:focus {
+      z-index: 1; // Place hover/focus items above their siblings for proper border styling
+      color: var(--#{$prefix}list-group-action-hover-color);
+      text-decoration: none;
+      background-color: var(--#{$prefix}list-group-action-hover-bg);
+    }
 
-      > .list-group-item {
-        &:first-child:not(:last-child) {
-          @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
-          @include border-top-end-radius(0);
-        }
+    &:active {
+      color: var(--#{$prefix}list-group-action-active-color);
+      background-color: var(--#{$prefix}list-group-action-active-bg);
+    }
+  }
 
-        &:last-child:not(:first-child) {
-          @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
-          @include border-bottom-start-radius(0);
-        }
+  // Individual list items
+  //
+  // Use on `li`s or `div`s within the `.list-group` parent.
 
-        &.active {
-          margin-top: 0;
-        }
+  .list-group-item {
+    position: relative;
+    display: block;
+    padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
+    color: var(--#{$prefix}list-group-color);
+    text-decoration: if($link-decoration == none, null, none);
+    background-color: var(--#{$prefix}list-group-bg);
+    border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
 
-        + .list-group-item {
-          border-top-width: var(--#{$prefix}list-group-border-width);
-          border-left-width: 0;
+    &:first-child {
+      @include border-top-radius(inherit);
+    }
+
+    &:last-child {
+      @include border-bottom-radius(inherit);
+    }
+
+    &.disabled,
+    &:disabled {
+      color: var(--#{$prefix}list-group-disabled-color);
+      pointer-events: none;
+      background-color: var(--#{$prefix}list-group-disabled-bg);
+    }
+
+    // Include both here for `<a>`s and `<button>`s
+    &.active {
+      z-index: 2; // Place active items above their siblings for proper border styling
+      color: var(--#{$prefix}list-group-active-color);
+      background-color: var(--#{$prefix}list-group-active-bg);
+      border-color: var(--#{$prefix}list-group-active-border-color);
+    }
+
+    // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
+    & + .list-group-item {
+      border-top-width: 0;
+
+      &.active {
+        margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
+        border-top-width: var(--#{$prefix}list-group-border-width);
+      }
+    }
+  }
+
+  // Horizontal
+  //
+  // Change the layout of list group items from vertical (default) to horizontal.
+
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      .list-group-horizontal#{$infix} {
+        flex-direction: row;
+
+        > .list-group-item {
+          &:first-child:not(:last-child) {
+            @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
+            @include border-top-end-radius(0);
+          }
+
+          &:last-child:not(:first-child) {
+            @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
+            @include border-bottom-start-radius(0);
+          }
 
           &.active {
-            margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
-            border-left-width: var(--#{$prefix}list-group-border-width);
+            margin-top: 0;
+          }
+
+          + .list-group-item {
+            border-top-width: var(--#{$prefix}list-group-border-width);
+            border-left-width: 0;
+
+            &.active {
+              margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
+              border-left-width: var(--#{$prefix}list-group-border-width);
+            }
           }
         }
       }
     }
   }
-}
 
 
-// Flush list items
-//
-// Remove borders and border-radius to keep list group items edge-to-edge. Most
-// useful within other components (e.g., cards).
+  // Flush list items
+  //
+  // Remove borders and border-radius to keep list group items edge-to-edge. Most
+  // useful within other components (e.g., cards).
 
-.list-group-flush {
-  @include border-radius(0);
+  .list-group-flush {
+    @include border-radius(0);
 
-  > .list-group-item {
-    border-width: 0 0 var(--#{$prefix}list-group-border-width);
+    > .list-group-item {
+      border-width: 0 0 var(--#{$prefix}list-group-border-width);
 
-    &:last-child {
-      border-bottom-width: 0;
+      &:last-child {
+        border-bottom-width: 0;
+      }
     }
   }
-}
 
 
-// scss-docs-start list-group-modifiers
-// List group contextual variants
-//
-// Add modifier classes to change text and background color on individual items.
-// Organizationally, this must come after the `:hover` states.
+  // scss-docs-start list-group-modifiers
+  // List group contextual variants
+  //
+  // Add modifier classes to change text and background color on individual items.
+  // Organizationally, this must come after the `:hover` states.
 
-@each $state in map.keys($theme-colors) {
-  .list-group-item-#{$state} {
-    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
-    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
-    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
-    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
-    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
-    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
-    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
-    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
-    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
-    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
+  @each $state in map.keys($theme-colors) {
+    .list-group-item-#{$state} {
+      --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
+      --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
+      --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
+      --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
+      --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
+      --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
+      --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
+      --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
+    }
   }
+  // scss-docs-end list-group-modifiers
 }
-// scss-docs-end list-group-modifiers
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 9211e8c42d..d1a1cb767b 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -16,232 +16,233 @@
 // .modal-dialog    - positioning shell for the actual modal
 // .modal-content   - actual modal w/ bg and corners and stuff
 
-
-// Container that the modal scrolls within
-.modal {
-  // scss-docs-start modal-css-vars
-  --#{$prefix}modal-zindex: #{$zindex-modal};
-  --#{$prefix}modal-width: #{$modal-md};
-  --#{$prefix}modal-padding: #{$modal-inner-padding};
-  --#{$prefix}modal-margin: #{$modal-dialog-margin};
-  --#{$prefix}modal-color: #{$modal-content-color};
-  --#{$prefix}modal-bg: #{$modal-content-bg};
-  --#{$prefix}modal-border-color: #{$modal-content-border-color};
-  --#{$prefix}modal-border-width: #{$modal-content-border-width};
-  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
-  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
-  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
-  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
-  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
-  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
-  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
-  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
-  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
-  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
-  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
-  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
-  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
-  // scss-docs-end modal-css-vars
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: var(--#{$prefix}modal-zindex);
-  display: none;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  // Prevent Chrome on Windows from adding a focus outline. For details, see
-  // https://github.com/twbs/bootstrap/pull/10951.
-  outline: 0;
-  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
-  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
-  // See also https://github.com/twbs/bootstrap/issues/17695
-}
-
-// Shell div to position the modal with bottom padding
-.modal-dialog {
-  position: relative;
-  width: auto;
-  margin: var(--#{$prefix}modal-margin);
-  // allow clicks to pass through for custom click handling to close modal
-  pointer-events: none;
-
-  // When fading in the modal, animate it to slide down
-  .modal.fade & {
-    transform: $modal-fade-transform;
-    @include transition($modal-transition);
-  }
-  .modal.show & {
-    transform: $modal-show-transform;
-  }
-
-  // When trying to close, animate focus to scale
-  .modal.modal-static & {
-    transform: $modal-scale-transform;
-  }
-}
-
-.modal-dialog-scrollable {
-  height: calc(100% - var(--#{$prefix}modal-margin) * 2);
-
-  .modal-content {
-    max-height: 100%;
-    overflow: hidden;
-  }
-
-  .modal-body {
-    overflow-y: auto;
-  }
-}
-
-.modal-dialog-centered {
-  display: flex;
-  align-items: center;
-  min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
-}
-
-// Actual modal
-.modal-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
-  // counteract the pointer-events: none; in the .modal-dialog
-  color: var(--#{$prefix}modal-color);
-  pointer-events: auto;
-  background-color: var(--#{$prefix}modal-bg);
-  background-clip: padding-box;
-  border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
-  @include border-radius(var(--#{$prefix}modal-border-radius));
-  @include box-shadow(var(--#{$prefix}modal-box-shadow));
-  // Remove focus outline from opened modal
-  outline: 0;
-}
-
-// Modal background
-.modal-backdrop {
-  // scss-docs-start modal-backdrop-css-vars
-  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
-  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
-  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
-  // scss-docs-end modal-backdrop-css-vars
-
-  @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
-}
-
-// Modal header
-// Top section of the modal w/ title and dismiss
-.modal-header {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  padding: var(--#{$prefix}modal-header-padding);
-  border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
-  @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
-
-  .btn-close {
-    padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
-    margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
-  }
-}
-
-// Title text within header
-.modal-title {
-  margin-bottom: 0;
-  line-height: var(--#{$prefix}modal-title-line-height);
-}
-
-// Modal body
-// Where all modal content resides (sibling of .modal-header and .modal-footer)
-.modal-body {
-  position: relative;
-  // Enable `flex-grow: 1` so that the body take up as much space as possible
-  // when there should be a fixed height on `.modal-dialog`.
-  flex: 1 1 auto;
-  padding: var(--#{$prefix}modal-padding);
-}
-
-// Footer (for actions)
-.modal-footer {
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  align-items: center; // vertically center
-  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
-  background-color: var(--#{$prefix}modal-footer-bg);
-  border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
-  @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
-
-  // Place margin between footer elements
-  // This solution is far from ideal because of the universal selector usage,
-  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
-  > * {
-    margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
-  }
-}
-
-// Scale up the modal
-@include media-breakpoint-up(sm) {
+@layer components {
+  // Container that the modal scrolls within
   .modal {
-    --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
-    --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
+    // scss-docs-start modal-css-vars
+    --#{$prefix}modal-zindex: #{$zindex-modal};
+    --#{$prefix}modal-width: #{$modal-md};
+    --#{$prefix}modal-padding: #{$modal-inner-padding};
+    --#{$prefix}modal-margin: #{$modal-dialog-margin};
+    --#{$prefix}modal-color: #{$modal-content-color};
+    --#{$prefix}modal-bg: #{$modal-content-bg};
+    --#{$prefix}modal-border-color: #{$modal-content-border-color};
+    --#{$prefix}modal-border-width: #{$modal-content-border-width};
+    --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
+    --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
+    --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
+    --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
+    --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
+    --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
+    --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
+    --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
+    --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
+    --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
+    --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
+    --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
+    --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
+    // scss-docs-end modal-css-vars
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--#{$prefix}modal-zindex);
+    display: none;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    // Prevent Chrome on Windows from adding a focus outline. For details, see
+    // https://github.com/twbs/bootstrap/pull/10951.
+    outline: 0;
+    // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
+    // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
+    // See also https://github.com/twbs/bootstrap/issues/17695
   }
 
-  // Automatically set modal's width for larger viewports
+  // Shell div to position the modal with bottom padding
   .modal-dialog {
-    max-width: var(--#{$prefix}modal-width);
-    margin-right: auto;
-    margin-left: auto;
+    position: relative;
+    width: auto;
+    margin: var(--#{$prefix}modal-margin);
+    // allow clicks to pass through for custom click handling to close modal
+    pointer-events: none;
+
+    // When fading in the modal, animate it to slide down
+    .modal.fade & {
+      transform: $modal-fade-transform;
+      @include transition($modal-transition);
+    }
+    .modal.show & {
+      transform: $modal-show-transform;
+    }
+
+    // When trying to close, animate focus to scale
+    .modal.modal-static & {
+      transform: $modal-scale-transform;
+    }
   }
 
-  .modal-sm {
-    --#{$prefix}modal-width: #{$modal-sm};
+  .modal-dialog-scrollable {
+    height: calc(100% - var(--#{$prefix}modal-margin) * 2);
+
+    .modal-content {
+      max-height: 100%;
+      overflow: hidden;
+    }
+
+    .modal-body {
+      overflow-y: auto;
+    }
   }
-}
 
-@include media-breakpoint-up(lg) {
-  .modal-lg,
-  .modal-xl {
-    --#{$prefix}modal-width: #{$modal-lg};
+  .modal-dialog-centered {
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
   }
-}
 
-@include media-breakpoint-up(xl) {
-  .modal-xl {
-    --#{$prefix}modal-width: #{$modal-xl};
+  // Actual modal
+  .modal-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
+    // counteract the pointer-events: none; in the .modal-dialog
+    color: var(--#{$prefix}modal-color);
+    pointer-events: auto;
+    background-color: var(--#{$prefix}modal-bg);
+    background-clip: padding-box;
+    border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
+    @include border-radius(var(--#{$prefix}modal-border-radius));
+    @include box-shadow(var(--#{$prefix}modal-box-shadow));
+    // Remove focus outline from opened modal
+    outline: 0;
   }
-}
 
-// scss-docs-start modal-fullscreen-loop
-@each $breakpoint in map.keys($grid-breakpoints) {
-  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-  $postfix: if($infix != "", $infix + "-down", "");
+  // Modal background
+  .modal-backdrop {
+    // scss-docs-start modal-backdrop-css-vars
+    --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
+    --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
+    --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
+    // scss-docs-end modal-backdrop-css-vars
 
-  @include media-breakpoint-down($breakpoint) {
-    .modal-fullscreen#{$postfix} {
-      width: 100vw;
-      max-width: none;
-      height: 100%;
-      margin: 0;
+    @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
+  }
 
-      .modal-content {
+  // Modal header
+  // Top section of the modal w/ title and dismiss
+  .modal-header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    padding: var(--#{$prefix}modal-header-padding);
+    border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
+    @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
+
+    .btn-close {
+      padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
+      margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
+    }
+  }
+
+  // Title text within header
+  .modal-title {
+    margin-bottom: 0;
+    line-height: var(--#{$prefix}modal-title-line-height);
+  }
+
+  // Modal body
+  // Where all modal content resides (sibling of .modal-header and .modal-footer)
+  .modal-body {
+    position: relative;
+    // Enable `flex-grow: 1` so that the body take up as much space as possible
+    // when there should be a fixed height on `.modal-dialog`.
+    flex: 1 1 auto;
+    padding: var(--#{$prefix}modal-padding);
+  }
+
+  // Footer (for actions)
+  .modal-footer {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center; // vertically center
+    justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
+    padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
+    background-color: var(--#{$prefix}modal-footer-bg);
+    border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
+    @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
+
+    // Place margin between footer elements
+    // This solution is far from ideal because of the universal selector usage,
+    // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
+    > * {
+      margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
+    }
+  }
+
+  // Scale up the modal
+  @include media-breakpoint-up(sm) {
+    .modal {
+      --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
+      --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
+    }
+
+    // Automatically set modal's width for larger viewports
+    .modal-dialog {
+      max-width: var(--#{$prefix}modal-width);
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    .modal-sm {
+      --#{$prefix}modal-width: #{$modal-sm};
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .modal-lg,
+    .modal-xl {
+      --#{$prefix}modal-width: #{$modal-lg};
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .modal-xl {
+      --#{$prefix}modal-width: #{$modal-xl};
+    }
+  }
+
+  // scss-docs-start modal-fullscreen-loop
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    $postfix: if($infix != "", $infix + "-down", "");
+
+    @include media-breakpoint-down($breakpoint) {
+      .modal-fullscreen#{$postfix} {
+        width: 100vw;
+        max-width: none;
         height: 100%;
-        border: 0;
-        @include border-radius(0);
-      }
+        margin: 0;
 
-      .modal-header,
-      .modal-footer {
-        @include border-radius(0);
-      }
+        .modal-content {
+          height: 100%;
+          border: 0;
+          @include border-radius(0);
+        }
 
-      .modal-body {
-        overflow-y: auto;
+        .modal-header,
+        .modal-footer {
+          @include border-radius(0);
+        }
+
+        .modal-body {
+          overflow-y: auto;
+        }
       }
     }
   }
+  // scss-docs-end modal-fullscreen-loop
 }
-// scss-docs-end modal-fullscreen-loop
diff --git a/scss/_nav.scss b/scss/_nav.scss
index a8b05b7697..4c5531854d 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -10,195 +10,197 @@
 // Kickstart any navigation component with a set of style resets. Works with
 // `<nav>`s, `<ul>`s or `<ol>`s.
 
-.nav {
-  // scss-docs-start nav-css-vars
-  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
-  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
-  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
-  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
-  --#{$prefix}nav-link-color: #{$nav-link-color};
-  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
-  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
-  // scss-docs-end nav-css-vars
+@layer components {
+  .nav {
+    // scss-docs-start nav-css-vars
+    --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
+    --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+    @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+    --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+    --#{$prefix}nav-link-color: #{$nav-link-color};
+    --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
+    --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
+    // scss-docs-end nav-css-vars
 
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-}
-
-.nav-link {
-  display: block;
-  padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
-  @include font-size(var(--#{$prefix}nav-link-font-size));
-  font-weight: var(--#{$prefix}nav-link-font-weight);
-  color: var(--#{$prefix}nav-link-color);
-  text-decoration: if($link-decoration == none, null, none);
-  background: none;
-  border: 0;
-  @include transition($nav-link-transition);
-
-  &:hover,
-  &:focus {
-    color: var(--#{$prefix}nav-link-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
   }
 
-  &:focus-visible {
-    outline: 0;
-    box-shadow: $nav-link-focus-box-shadow;
-  }
-
-  // Disabled state lightens text
-  &.disabled,
-  &:disabled {
-    color: var(--#{$prefix}nav-link-disabled-color);
-    pointer-events: none;
-    cursor: default;
-  }
-}
-
-//
-// Tabs
-//
-
-.nav-tabs {
-  // scss-docs-start nav-tabs-css-vars
-  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
-  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
-  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
-  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
-  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
-  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
-  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
-  // scss-docs-end nav-tabs-css-vars
-
-  border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
-
   .nav-link {
-    margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
-    border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
-    @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
+    display: block;
+    padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
+    @include font-size(var(--#{$prefix}nav-link-font-size));
+    font-weight: var(--#{$prefix}nav-link-font-weight);
+    color: var(--#{$prefix}nav-link-color);
+    text-decoration: if($link-decoration == none, null, none);
+    background: none;
+    border: 0;
+    @include transition($nav-link-transition);
 
     &:hover,
     &:focus {
-      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
-      isolation: isolate;
-      border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
+      color: var(--#{$prefix}nav-link-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
+    }
+
+    &:focus-visible {
+      outline: 0;
+      box-shadow: $nav-link-focus-box-shadow;
+    }
+
+    // Disabled state lightens text
+    &.disabled,
+    &:disabled {
+      color: var(--#{$prefix}nav-link-disabled-color);
+      pointer-events: none;
+      cursor: default;
     }
   }
 
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    color: var(--#{$prefix}nav-tabs-link-active-color);
-    background-color: var(--#{$prefix}nav-tabs-link-active-bg);
-    border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
+  //
+  // Tabs
+  //
+
+  .nav-tabs {
+    // scss-docs-start nav-tabs-css-vars
+    --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
+    --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
+    --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
+    --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+    --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+    --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+    --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+    // scss-docs-end nav-tabs-css-vars
+
+    border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+
+    .nav-link {
+      margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
+      border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
+      @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
+
+      &:hover,
+      &:focus {
+        // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+        isolation: isolate;
+        border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
+      }
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+      color: var(--#{$prefix}nav-tabs-link-active-color);
+      background-color: var(--#{$prefix}nav-tabs-link-active-bg);
+      border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
+    }
+
+    .dropdown-menu {
+      // Make dropdown border overlap tab border
+      margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
+      // Remove the top rounded corners here since there is a hard edge above the menu
+      @include border-top-radius(0);
+    }
   }
 
-  .dropdown-menu {
-    // Make dropdown border overlap tab border
-    margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
-    // Remove the top rounded corners here since there is a hard edge above the menu
-    @include border-top-radius(0);
-  }
-}
 
+  //
+  // Pills
+  //
 
-//
-// Pills
-//
+  .nav-pills {
+    // scss-docs-start nav-pills-css-vars
+    --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
+    --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
+    --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
+    // scss-docs-end nav-pills-css-vars
 
-.nav-pills {
-  // scss-docs-start nav-pills-css-vars
-  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
-  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
-  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
-  // scss-docs-end nav-pills-css-vars
+    .nav-link {
+      @include border-radius(var(--#{$prefix}nav-pills-border-radius));
+    }
 
-  .nav-link {
-    @include border-radius(var(--#{$prefix}nav-pills-border-radius));
+    .nav-link.active,
+    .show > .nav-link {
+      color: var(--#{$prefix}nav-pills-link-active-color);
+      @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
+    }
   }
 
-  .nav-link.active,
-  .show > .nav-link {
-    color: var(--#{$prefix}nav-pills-link-active-color);
-    @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
-  }
-}
 
+  //
+  // Underline
+  //
 
-//
-// Underline
-//
+  .nav-underline {
+    // scss-docs-start nav-underline-css-vars
+    --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
+    --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
+    --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
+    // scss-docs-end nav-underline-css-vars
 
-.nav-underline {
-  // scss-docs-start nav-underline-css-vars
-  --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
-  --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
-  --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
-  // scss-docs-end nav-underline-css-vars
+    gap: var(--#{$prefix}nav-underline-gap);
 
-  gap: var(--#{$prefix}nav-underline-gap);
+    .nav-link {
+      padding-right: 0;
+      padding-left: 0;
+      border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
 
-  .nav-link {
-    padding-right: 0;
-    padding-left: 0;
-    border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
+      &:hover,
+      &:focus {
+        border-bottom-color: currentcolor;
+      }
+    }
 
-    &:hover,
-    &:focus {
+    .nav-link.active,
+    .show > .nav-link {
+      font-weight: $font-weight-bold;
+      color: var(--#{$prefix}nav-underline-link-active-color);
       border-bottom-color: currentcolor;
     }
   }
 
-  .nav-link.active,
-  .show > .nav-link {
-    font-weight: $font-weight-bold;
-    color: var(--#{$prefix}nav-underline-link-active-color);
-    border-bottom-color: currentcolor;
-  }
-}
-
-
-//
-// Justified variants
-//
-
-.nav-fill {
-  > .nav-link,
-  .nav-item {
-    flex: 1 1 auto;
-    text-align: center;
-  }
-}
-
-.nav-justified {
-  > .nav-link,
-  .nav-item {
-    flex-grow: 1;
-    flex-basis: 0;
-    text-align: center;
-  }
-}
-
-.nav-fill,
-.nav-justified {
-  .nav-item .nav-link {
-    width: 100%; // Make sure button will grow
-  }
-}
-
-
-// Tabbable tabs
-//
-// Hide tabbable panes to start, show them when `.active`
-
-.tab-content {
-  > .tab-pane {
-    display: none;
-  }
-  > .active {
-    display: block;
+
+  //
+  // Justified variants
+  //
+
+  .nav-fill {
+    > .nav-link,
+    .nav-item {
+      flex: 1 1 auto;
+      text-align: center;
+    }
+  }
+
+  .nav-justified {
+    > .nav-link,
+    .nav-item {
+      flex-grow: 1;
+      flex-basis: 0;
+      text-align: center;
+    }
+  }
+
+  .nav-fill,
+  .nav-justified {
+    .nav-item .nav-link {
+      width: 100%; // Make sure button will grow
+    }
+  }
+
+
+  // Tabbable tabs
+  //
+  // Hide tabbable panes to start, show them when `.active`
+
+  .tab-content {
+    > .tab-pane {
+      display: none;
+    }
+    > .active {
+      display: block;
+    }
   }
 }
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 643b3678d0..6061e18c41 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -15,287 +15,289 @@
 // Provide a static navbar from which we expand to create full-width, fixed, and
 // other navbar variations.
 
-.navbar {
-  // scss-docs-start navbar-css-vars
-  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
-  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
-  --#{$prefix}navbar-color: #{$navbar-light-color};
-  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
-  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
-  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
-  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
-  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
-  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
-  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
-  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
-  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
-  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
-  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
-  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
-  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
-  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
-  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
-  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
-  // scss-docs-end navbar-css-vars
+@layer components {
+  .navbar {
+    // scss-docs-start navbar-css-vars
+    --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+    --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
+    --#{$prefix}navbar-color: #{$navbar-light-color};
+    --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
+    --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
+    --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
+    --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
+    --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
+    --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
+    --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
+    --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+    --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
+    --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
+    --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
+    --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
+    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+    --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+    --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
+    --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
+    --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
+    // scss-docs-end navbar-css-vars
 
-  position: relative;
-  display: flex;
-  flex-wrap: wrap; // allow us to do the line break for collapsing content
-  align-items: center;
-  justify-content: space-between; // space out brand from logo
-  padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
-  @include gradient-bg();
-
-  // Because flex properties aren't inherited, we need to redeclare these first
-  // few properties so that content nested within behave properly.
-  // The `flex-wrap` property is inherited to simplify the expanded navbars
-  %container-flex-properties {
+    position: relative;
     display: flex;
-    flex-wrap: inherit;
+    flex-wrap: wrap; // allow us to do the line break for collapsing content
     align-items: center;
-    justify-content: space-between;
-  }
+    justify-content: space-between; // space out brand from logo
+    padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
+    @include gradient-bg();
 
-  > .container,
-  > .container-fluid {
-    @extend %container-flex-properties;
-  }
+    // Because flex properties aren't inherited, we need to redeclare these first
+    // few properties so that content nested within behave properly.
+    // The `flex-wrap` property is inherited to simplify the expanded navbars
+    %container-flex-properties {
+      display: flex;
+      flex-wrap: inherit;
+      align-items: center;
+      justify-content: space-between;
+    }
 
-  @each $breakpoint, $container-max-width in $container-max-widths {
-    > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+    > .container,
+    > .container-fluid {
       @extend %container-flex-properties;
     }
+
+    @each $breakpoint, $container-max-width in $container-max-widths {
+      > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+        @extend %container-flex-properties;
+      }
+    }
   }
-}
 
 
-// Navbar brand
-//
-// Used for brand, project, or site names.
+  // Navbar brand
+  //
+  // Used for brand, project, or site names.
 
-.navbar-brand {
-  padding-top: var(--#{$prefix}navbar-brand-padding-y);
-  padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
-  margin-right: var(--#{$prefix}navbar-brand-margin-end);
-  @include font-size(var(--#{$prefix}navbar-brand-font-size));
-  color: var(--#{$prefix}navbar-brand-color);
-  text-decoration: if($link-decoration == none, null, none);
-  white-space: nowrap;
+  .navbar-brand {
+    padding-top: var(--#{$prefix}navbar-brand-padding-y);
+    padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
+    margin-right: var(--#{$prefix}navbar-brand-margin-end);
+    @include font-size(var(--#{$prefix}navbar-brand-font-size));
+    color: var(--#{$prefix}navbar-brand-color);
+    text-decoration: if($link-decoration == none, null, none);
+    white-space: nowrap;
 
-  &:hover,
-  &:focus {
-    color: var(--#{$prefix}navbar-brand-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    &:hover,
+    &:focus {
+      color: var(--#{$prefix}navbar-brand-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
+    }
   }
-}
 
 
-// Navbar nav
-//
-// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
+  // Navbar nav
+  //
+  // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
 
-.navbar-nav {
-  // scss-docs-start navbar-nav-css-vars
-  --#{$prefix}nav-link-padding-x: 0;
-  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
-  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
-  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
-  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
-  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
-  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
-  // scss-docs-end navbar-nav-css-vars
+  .navbar-nav {
+    // scss-docs-start navbar-nav-css-vars
+    --#{$prefix}nav-link-padding-x: 0;
+    --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+    @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+    --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+    --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
+    --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
+    --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
+    // scss-docs-end navbar-nav-css-vars
 
-  display: flex;
-  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
+    display: flex;
+    flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
 
-  .nav-link {
-    &.active,
-    &.show {
+    .nav-link {
+      &.active,
+      &.show {
+        color: var(--#{$prefix}navbar-active-color);
+      }
+    }
+
+    .dropdown-menu {
+      position: static;
+    }
+  }
+
+
+  // Navbar text
+  //
+  //
+
+  .navbar-text {
+    padding-top: $nav-link-padding-y;
+    padding-bottom: $nav-link-padding-y;
+    color: var(--#{$prefix}navbar-color);
+
+    a,
+    a:hover,
+    a:focus  {
       color: var(--#{$prefix}navbar-active-color);
     }
   }
 
-  .dropdown-menu {
-    position: static;
-  }
-}
 
+  // Responsive navbar
+  //
+  // Custom styles for responsive collapsing and toggling of navbar contents.
+  // Powered by the collapse Bootstrap JavaScript plugin.
 
-// Navbar text
-//
-//
-
-.navbar-text {
-  padding-top: $nav-link-padding-y;
-  padding-bottom: $nav-link-padding-y;
-  color: var(--#{$prefix}navbar-color);
-
-  a,
-  a:hover,
-  a:focus  {
-    color: var(--#{$prefix}navbar-active-color);
-  }
-}
-
-
-// Responsive navbar
-//
-// Custom styles for responsive collapsing and toggling of navbar contents.
-// Powered by the collapse Bootstrap JavaScript plugin.
-
-// When collapsed, prevent the toggleable navbar contents from appearing in
-// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
-// on the `.navbar` parent.
-.navbar-collapse {
-  flex-grow: 1;
-  flex-basis: 100%;
-  // For always expanded or extra full navbars, ensure content aligns itself
-  // properly vertically. Can be easily overridden with flex utilities.
-  align-items: center;
-}
-
-// Button for toggling the navbar when in its collapsed state
-.navbar-toggler {
-  padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
-  @include font-size(var(--#{$prefix}navbar-toggler-font-size));
-  line-height: 1;
-  color: var(--#{$prefix}navbar-color);
-  background-color: transparent; // remove default button style
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
-  @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
-  @include transition(var(--#{$prefix}navbar-toggler-transition));
-
-  &:hover {
-    text-decoration: none;
+  // When collapsed, prevent the toggleable navbar contents from appearing in
+  // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
+  // on the `.navbar` parent.
+  .navbar-collapse {
+    flex-grow: 1;
+    flex-basis: 100%;
+    // For always expanded or extra full navbars, ensure content aligns itself
+    // properly vertically. Can be easily overridden with flex utilities.
+    align-items: center;
   }
 
-  &:focus {
-    text-decoration: none;
-    outline: 0;
-    box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
+  // Button for toggling the navbar when in its collapsed state
+  .navbar-toggler {
+    padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
+    @include font-size(var(--#{$prefix}navbar-toggler-font-size));
+    line-height: 1;
+    color: var(--#{$prefix}navbar-color);
+    background-color: transparent; // remove default button style
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
+    @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
+    @include transition(var(--#{$prefix}navbar-toggler-transition));
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:focus {
+      text-decoration: none;
+      outline: 0;
+      box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
+    }
   }
-}
 
-// Keep as a separate element so folks can easily override it with another icon
-// or image file as needed.
-.navbar-toggler-icon {
-  display: inline-block;
-  width: 1.5em;
-  height: 1.5em;
-  vertical-align: middle;
-  background-image: var(--#{$prefix}navbar-toggler-icon-bg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100%;
-}
+  // Keep as a separate element so folks can easily override it with another icon
+  // or image file as needed.
+  .navbar-toggler-icon {
+    display: inline-block;
+    width: 1.5em;
+    height: 1.5em;
+    vertical-align: middle;
+    background-image: var(--#{$prefix}navbar-toggler-icon-bg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+  }
 
-.navbar-nav-scroll {
-  max-height: var(--#{$prefix}scroll-height, 75vh);
-  overflow-y: auto;
-}
+  .navbar-nav-scroll {
+    max-height: var(--#{$prefix}scroll-height, 75vh);
+    overflow-y: auto;
+  }
 
-// scss-docs-start navbar-expand-loop
-// Generate series of `.navbar-expand-*` responsive classes for configuring
-// where your navbar collapses.
-.navbar-expand {
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
+  // scss-docs-start navbar-expand-loop
+  // Generate series of `.navbar-expand-*` responsive classes for configuring
+  // where your navbar collapses.
+  .navbar-expand {
+    @each $breakpoint in map.keys($grid-breakpoints) {
+      $next: breakpoint-next($breakpoint, $grid-breakpoints);
+      $infix: breakpoint-infix($next, $grid-breakpoints);
 
-    // stylelint-disable-next-line scss/selector-no-union-class-name
-    &#{$infix} {
-      @include media-breakpoint-up($next) {
-        flex-wrap: nowrap;
-        justify-content: flex-start;
+      // stylelint-disable-next-line scss/selector-no-union-class-name
+      &#{$infix} {
+        @include media-breakpoint-up($next) {
+          flex-wrap: nowrap;
+          justify-content: flex-start;
 
-        .navbar-nav {
-          flex-direction: row;
+          .navbar-nav {
+            flex-direction: row;
 
-          .dropdown-menu {
-            position: absolute;
+            .dropdown-menu {
+              position: absolute;
+            }
+
+            .nav-link {
+              padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
+              padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
+            }
           }
 
-          .nav-link {
-            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
-            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
+          .navbar-nav-scroll {
+            overflow: visible;
           }
-        }
 
-        .navbar-nav-scroll {
-          overflow: visible;
-        }
+          .navbar-collapse {
+            display: flex !important; // stylelint-disable-line declaration-no-important
+            flex-basis: auto;
+          }
 
-        .navbar-collapse {
-          display: flex !important; // stylelint-disable-line declaration-no-important
-          flex-basis: auto;
-        }
-
-        .navbar-toggler {
-          display: none;
-        }
-
-        .offcanvas {
-          // stylelint-disable declaration-no-important
-          position: static;
-          z-index: auto;
-          flex-grow: 1;
-          width: auto !important;
-          height: auto !important;
-          visibility: visible !important;
-          background-color: transparent !important;
-          border: 0 !important;
-          transform: none !important;
-          @include box-shadow(none);
-          @include transition(none);
-          // stylelint-enable declaration-no-important
-
-          .offcanvas-header {
+          .navbar-toggler {
             display: none;
           }
 
-          .offcanvas-body {
-            display: flex;
-            flex-grow: 0;
-            padding: 0;
-            overflow-y: visible;
+          .offcanvas {
+            // stylelint-disable declaration-no-important
+            position: static;
+            z-index: auto;
+            flex-grow: 1;
+            width: auto !important;
+            height: auto !important;
+            visibility: visible !important;
+            background-color: transparent !important;
+            border: 0 !important;
+            transform: none !important;
+            @include box-shadow(none);
+            @include transition(none);
+            // stylelint-enable declaration-no-important
+
+            .offcanvas-header {
+              display: none;
+            }
+
+            .offcanvas-body {
+              display: flex;
+              flex-grow: 0;
+              padding: 0;
+              overflow-y: visible;
+            }
           }
         }
       }
     }
   }
-}
-// scss-docs-end navbar-expand-loop
+  // scss-docs-end navbar-expand-loop
 
-// Navbar themes
-//
-// Styles for switching between navbars with light or dark background.
+  // Navbar themes
+  //
+  // Styles for switching between navbars with light or dark background.
 
-.navbar-light {
-  @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
-}
+  .navbar-light {
+    @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
+  }
 
-.navbar-dark,
-.navbar[data-bs-theme="dark"] {
-  // scss-docs-start navbar-dark-css-vars
-  --#{$prefix}navbar-color: #{$navbar-dark-color};
-  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
-  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
-  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
-  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
-  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
-  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
-  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
-  // scss-docs-end navbar-dark-css-vars
-}
+  .navbar-dark,
+  .navbar[data-bs-theme="dark"] {
+    // scss-docs-start navbar-dark-css-vars
+    --#{$prefix}navbar-color: #{$navbar-dark-color};
+    --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
+    --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
+    --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
+    --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
+    --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
+    --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+    // scss-docs-end navbar-dark-css-vars
+  }
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .navbar-toggler-icon {
-      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      .navbar-toggler-icon {
+        --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+      }
     }
   }
 }
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 2143d682bb..513198d82d 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -8,144 +8,146 @@
 
 // stylelint-disable function-disallowed-list
 
-%offcanvas-css-vars {
-  // scss-docs-start offcanvas-css-vars
-  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
-  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
-  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
-  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
-  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
-  --#{$prefix}offcanvas-color: #{$offcanvas-color};
-  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
-  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
-  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
-  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
-  --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
-  --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
-  // scss-docs-end offcanvas-css-vars
-}
-
-@each $breakpoint in map.keys($grid-breakpoints) {
-  $next: breakpoint-next($breakpoint, $grid-breakpoints);
-  $infix: breakpoint-infix($next, $grid-breakpoints);
-
-  .offcanvas#{$infix} {
-    @extend %offcanvas-css-vars;
+@layer components {
+  %offcanvas-css-vars {
+    // scss-docs-start offcanvas-css-vars
+    --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
+    --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
+    --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
+    --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
+    --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
+    --#{$prefix}offcanvas-color: #{$offcanvas-color};
+    --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
+    --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
+    --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
+    --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
+    --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
+    --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
+    // scss-docs-end offcanvas-css-vars
   }
-}
 
-@each $breakpoint in map.keys($grid-breakpoints) {
-  $next: breakpoint-next($breakpoint, $grid-breakpoints);
-  $infix: breakpoint-infix($next, $grid-breakpoints);
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
 
-  .offcanvas#{$infix} {
-    @include media-breakpoint-down($next) {
-      position: fixed;
-      bottom: 0;
-      z-index: var(--#{$prefix}offcanvas-zindex);
-      display: flex;
-      flex-direction: column;
-      max-width: 100%;
-      color: var(--#{$prefix}offcanvas-color);
-      visibility: hidden;
-      background-color: var(--#{$prefix}offcanvas-bg);
-      background-clip: padding-box;
-      outline: 0;
-      @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
-      @include transition(var(--#{$prefix}offcanvas-transition));
-
-      &.offcanvas-start {
-        top: 0;
-        left: 0;
-        width: var(--#{$prefix}offcanvas-width);
-        border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-        transform: translateX(-100%);
-      }
-
-      &.offcanvas-end {
-        top: 0;
-        right: 0;
-        width: var(--#{$prefix}offcanvas-width);
-        border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-        transform: translateX(100%);
-      }
-
-      &.offcanvas-top {
-        top: 0;
-        right: 0;
-        left: 0;
-        height: var(--#{$prefix}offcanvas-height);
-        max-height: 100%;
-        border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-        transform: translateY(-100%);
-      }
-
-      &.offcanvas-bottom {
-        right: 0;
-        left: 0;
-        height: var(--#{$prefix}offcanvas-height);
-        max-height: 100%;
-        border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-        transform: translateY(100%);
-      }
-
-      &.showing,
-      &.show:not(.hiding) {
-        transform: none;
-      }
-
-      &.showing,
-      &.hiding,
-      &.show {
-        visibility: visible;
-      }
+    .offcanvas#{$infix} {
+      @extend %offcanvas-css-vars;
     }
+  }
 
-    @if not ($infix == "") {
-      @include media-breakpoint-up($next) {
-        --#{$prefix}offcanvas-height: auto;
-        --#{$prefix}offcanvas-border-width: 0;
-        background-color: transparent !important; // stylelint-disable-line declaration-no-important
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
 
-        .offcanvas-header {
-          display: none;
+    .offcanvas#{$infix} {
+      @include media-breakpoint-down($next) {
+        position: fixed;
+        bottom: 0;
+        z-index: var(--#{$prefix}offcanvas-zindex);
+        display: flex;
+        flex-direction: column;
+        max-width: 100%;
+        color: var(--#{$prefix}offcanvas-color);
+        visibility: hidden;
+        background-color: var(--#{$prefix}offcanvas-bg);
+        background-clip: padding-box;
+        outline: 0;
+        @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
+        @include transition(var(--#{$prefix}offcanvas-transition));
+
+        &.offcanvas-start {
+          top: 0;
+          left: 0;
+          width: var(--#{$prefix}offcanvas-width);
+          border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          transform: translateX(-100%);
         }
 
-        .offcanvas-body {
-          display: flex;
-          flex-grow: 0;
-          padding: 0;
-          overflow-y: visible;
-          // Reset `background-color` in case `.bg-*` classes are used in offcanvas
+        &.offcanvas-end {
+          top: 0;
+          right: 0;
+          width: var(--#{$prefix}offcanvas-width);
+          border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          transform: translateX(100%);
+        }
+
+        &.offcanvas-top {
+          top: 0;
+          right: 0;
+          left: 0;
+          height: var(--#{$prefix}offcanvas-height);
+          max-height: 100%;
+          border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          transform: translateY(-100%);
+        }
+
+        &.offcanvas-bottom {
+          right: 0;
+          left: 0;
+          height: var(--#{$prefix}offcanvas-height);
+          max-height: 100%;
+          border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          transform: translateY(100%);
+        }
+
+        &.showing,
+        &.show:not(.hiding) {
+          transform: none;
+        }
+
+        &.showing,
+        &.hiding,
+        &.show {
+          visibility: visible;
+        }
+      }
+
+      @if not ($infix == "") {
+        @include media-breakpoint-up($next) {
+          --#{$prefix}offcanvas-height: auto;
+          --#{$prefix}offcanvas-border-width: 0;
           background-color: transparent !important; // stylelint-disable-line declaration-no-important
+
+          .offcanvas-header {
+            display: none;
+          }
+
+          .offcanvas-body {
+            display: flex;
+            flex-grow: 0;
+            padding: 0;
+            overflow-y: visible;
+            // Reset `background-color` in case `.bg-*` classes are used in offcanvas
+            background-color: transparent !important; // stylelint-disable-line declaration-no-important
+          }
         }
       }
     }
   }
-}
 
-.offcanvas-backdrop {
-  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
-}
+  .offcanvas-backdrop {
+    @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+  }
 
-.offcanvas-header {
-  display: flex;
-  align-items: center;
-  padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
+  .offcanvas-header {
+    display: flex;
+    align-items: center;
+    padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
 
-  .btn-close {
-    padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
-    margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto;
+    .btn-close {
+      padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
+      margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto;
+    }
+  }
+
+  .offcanvas-title {
+    margin-bottom: 0;
+    line-height: var(--#{$prefix}offcanvas-title-line-height);
+  }
+
+  .offcanvas-body {
+    flex-grow: 1;
+    padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
+    overflow-y: auto;
   }
 }
-
-.offcanvas-title {
-  margin-bottom: 0;
-  line-height: var(--#{$prefix}offcanvas-title-line-height);
-}
-
-.offcanvas-body {
-  flex-grow: 1;
-  padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
-  overflow-y: auto;
-}
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index a06f1b60c9..7785a48a93 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -15,112 +15,114 @@
 }
 // scss-docs-end pagination-mixin
 
-.pagination {
-  // scss-docs-start pagination-css-vars
-  --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
-  --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
-  @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
-  --#{$prefix}pagination-color: #{$pagination-color};
-  --#{$prefix}pagination-bg: #{$pagination-bg};
-  --#{$prefix}pagination-border-width: #{$pagination-border-width};
-  --#{$prefix}pagination-border-color: #{$pagination-border-color};
-  --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
-  --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
-  --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
-  --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
-  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
-  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
-  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
-  --#{$prefix}pagination-active-color: #{$pagination-active-color};
-  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
-  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
-  --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
-  --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
-  --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
-  // scss-docs-end pagination-css-vars
+@layer components {
+  .pagination {
+    // scss-docs-start pagination-css-vars
+    --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
+    --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
+    @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
+    --#{$prefix}pagination-color: #{$pagination-color};
+    --#{$prefix}pagination-bg: #{$pagination-bg};
+    --#{$prefix}pagination-border-width: #{$pagination-border-width};
+    --#{$prefix}pagination-border-color: #{$pagination-border-color};
+    --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
+    --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
+    --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
+    --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
+    --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
+    --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
+    --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
+    --#{$prefix}pagination-active-color: #{$pagination-active-color};
+    --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
+    --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
+    --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
+    --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
+    --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
+    // scss-docs-end pagination-css-vars
 
-  display: flex;
-  @include list-unstyled();
-}
-
-.page-link {
-  position: relative;
-  display: block;
-  padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
-  @include font-size(var(--#{$prefix}pagination-font-size));
-  color: var(--#{$prefix}pagination-color);
-  text-decoration: if($link-decoration == none, null, none);
-  background-color: var(--#{$prefix}pagination-bg);
-  border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
-  @include transition($pagination-transition);
-
-  &:hover {
-    z-index: 2;
-    color: var(--#{$prefix}pagination-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: var(--#{$prefix}pagination-hover-bg);
-    border-color: var(--#{$prefix}pagination-hover-border-color);
+    display: flex;
+    @include list-unstyled();
   }
 
-  &:focus {
-    z-index: 3;
-    color: var(--#{$prefix}pagination-focus-color);
-    background-color: var(--#{$prefix}pagination-focus-bg);
-    outline: $pagination-focus-outline;
-    box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
+  .page-link {
+    position: relative;
+    display: block;
+    padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
+    @include font-size(var(--#{$prefix}pagination-font-size));
+    color: var(--#{$prefix}pagination-color);
+    text-decoration: if($link-decoration == none, null, none);
+    background-color: var(--#{$prefix}pagination-bg);
+    border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
+    @include transition($pagination-transition);
+
+    &:hover {
+      z-index: 2;
+      color: var(--#{$prefix}pagination-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
+      background-color: var(--#{$prefix}pagination-hover-bg);
+      border-color: var(--#{$prefix}pagination-hover-border-color);
+    }
+
+    &:focus {
+      z-index: 3;
+      color: var(--#{$prefix}pagination-focus-color);
+      background-color: var(--#{$prefix}pagination-focus-bg);
+      outline: $pagination-focus-outline;
+      box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
+    }
+
+    &.active,
+    .active > & {
+      z-index: 3;
+      color: var(--#{$prefix}pagination-active-color);
+      @include gradient-bg(var(--#{$prefix}pagination-active-bg));
+      border-color: var(--#{$prefix}pagination-active-border-color);
+    }
+
+    &.disabled,
+    .disabled > & {
+      color: var(--#{$prefix}pagination-disabled-color);
+      pointer-events: none;
+      background-color: var(--#{$prefix}pagination-disabled-bg);
+      border-color: var(--#{$prefix}pagination-disabled-border-color);
+    }
   }
 
-  &.active,
-  .active > & {
-    z-index: 3;
-    color: var(--#{$prefix}pagination-active-color);
-    @include gradient-bg(var(--#{$prefix}pagination-active-bg));
-    border-color: var(--#{$prefix}pagination-active-border-color);
-  }
+  .page-item {
+    &:not(:first-child) .page-link {
+      margin-left: $pagination-margin-start;
+    }
 
-  &.disabled,
-  .disabled > & {
-    color: var(--#{$prefix}pagination-disabled-color);
-    pointer-events: none;
-    background-color: var(--#{$prefix}pagination-disabled-bg);
-    border-color: var(--#{$prefix}pagination-disabled-border-color);
-  }
-}
+    @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
+      &:first-child {
+        .page-link {
+          @include border-start-radius(var(--#{$prefix}pagination-border-radius));
+        }
+      }
 
-.page-item {
-  &:not(:first-child) .page-link {
-    margin-left: $pagination-margin-start;
-  }
-
-  @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
-    &:first-child {
+      &:last-child {
+        .page-link {
+          @include border-end-radius(var(--#{$prefix}pagination-border-radius));
+        }
+      }
+    } @else {
+      // Add border-radius to all pageLinks in case they have left margin
       .page-link {
-        @include border-start-radius(var(--#{$prefix}pagination-border-radius));
+        @include border-radius(var(--#{$prefix}pagination-border-radius));
       }
     }
+  }
 
-    &:last-child {
-      .page-link {
-        @include border-end-radius(var(--#{$prefix}pagination-border-radius));
-      }
-    }
-  } @else {
-    // Add border-radius to all pageLinks in case they have left margin
-    .page-link {
-      @include border-radius(var(--#{$prefix}pagination-border-radius));
-    }
+
+  //
+  // Sizing
+  //
+
+  .pagination-lg {
+    @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
+  }
+
+  .pagination-sm {
+    @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
   }
 }
-
-
-//
-// Sizing
-//
-
-.pagination-lg {
-  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
-}
-
-.pagination-sm {
-  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
-}
diff --git a/scss/_placeholders.scss b/scss/_placeholders.scss
index f615f0a180..c163a8313d 100644
--- a/scss/_placeholders.scss
+++ b/scss/_placeholders.scss
@@ -2,54 +2,56 @@
 @use "colors" as *;
 @use "variables" as *;
 
-.placeholder {
-  display: inline-block;
-  min-height: 1em;
-  vertical-align: middle;
-  cursor: wait;
-  background-color: currentcolor;
-  opacity: $placeholder-opacity-max;
-
-  &.btn::before {
-    display: inline-block;
-    content: "";
-  }
-}
-
-// Sizing
-.placeholder-xs {
-  min-height: .6em;
-}
-
-.placeholder-sm {
-  min-height: .8em;
-}
-
-.placeholder-lg {
-  min-height: 1.2em;
-}
-
-// Animation
-.placeholder-glow {
+@layer components {
   .placeholder {
-    animation: placeholder-glow 2s ease-in-out infinite;
-  }
-}
-
-@keyframes placeholder-glow {
-  50% {
-    opacity: $placeholder-opacity-min;
-  }
-}
-
-.placeholder-wave {
-  mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
-  mask-size: 200% 100%;
-  animation: placeholder-wave 2s linear infinite;
-}
-
-@keyframes placeholder-wave {
-  100% {
-    mask-position: -200% 0%;
+    display: inline-block;
+    min-height: 1em;
+    vertical-align: middle;
+    cursor: wait;
+    background-color: currentcolor;
+    opacity: $placeholder-opacity-max;
+
+    &.btn::before {
+      display: inline-block;
+      content: "";
+    }
+  }
+
+  // Sizing
+  .placeholder-xs {
+    min-height: .6em;
+  }
+
+  .placeholder-sm {
+    min-height: .8em;
+  }
+
+  .placeholder-lg {
+    min-height: 1.2em;
+  }
+
+  // Animation
+  .placeholder-glow {
+    .placeholder {
+      animation: placeholder-glow 2s ease-in-out infinite;
+    }
+  }
+
+  @keyframes placeholder-glow {
+    50% {
+      opacity: $placeholder-opacity-min;
+    }
+  }
+
+  .placeholder-wave {
+    mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
+    mask-size: 200% 100%;
+    animation: placeholder-wave 2s linear infinite;
+  }
+
+  @keyframes placeholder-wave {
+    100% {
+      mask-position: -200% 0%;
+    }
   }
 }
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 517d5f3acb..c8370658c4 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -5,199 +5,201 @@
 @use "vendor/rfs" as *;
 @use "mixins/reset-text" as *;
 
-.popover {
-  // scss-docs-start popover-css-vars
-  --#{$prefix}popover-zindex: #{$zindex-popover};
-  --#{$prefix}popover-max-width: #{$popover-max-width};
-  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
-  --#{$prefix}popover-bg: #{$popover-bg};
-  --#{$prefix}popover-border-width: #{$popover-border-width};
-  --#{$prefix}popover-border-color: #{$popover-border-color};
-  --#{$prefix}popover-border-radius: #{$popover-border-radius};
-  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
-  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
-  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
-  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
-  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
-  --#{$prefix}popover-header-color: #{$popover-header-color};
-  --#{$prefix}popover-header-bg: #{$popover-header-bg};
-  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
-  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
-  --#{$prefix}popover-body-color: #{$popover-body-color};
-  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
-  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
-  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
-  // scss-docs-end popover-css-vars
+@layer components {
+  .popover {
+    // scss-docs-start popover-css-vars
+    --#{$prefix}popover-zindex: #{$zindex-popover};
+    --#{$prefix}popover-max-width: #{$popover-max-width};
+    @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+    --#{$prefix}popover-bg: #{$popover-bg};
+    --#{$prefix}popover-border-width: #{$popover-border-width};
+    --#{$prefix}popover-border-color: #{$popover-border-color};
+    --#{$prefix}popover-border-radius: #{$popover-border-radius};
+    --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
+    --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
+    --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
+    --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
+    @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
+    --#{$prefix}popover-header-color: #{$popover-header-color};
+    --#{$prefix}popover-header-bg: #{$popover-header-bg};
+    --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
+    --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
+    --#{$prefix}popover-body-color: #{$popover-body-color};
+    --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
+    --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
+    --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
+    // scss-docs-end popover-css-vars
 
-  z-index: var(--#{$prefix}popover-zindex);
-  display: block;
-  max-width: var(--#{$prefix}popover-max-width);
-  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-  // So reset our font and text properties to avoid inheriting weird values.
-  @include reset-text();
-  @include font-size(var(--#{$prefix}popover-font-size));
-  // Allow breaking very long words so they don't overflow the popover's bounds
-  word-wrap: break-word;
-  background-color: var(--#{$prefix}popover-bg);
-  background-clip: padding-box;
-  border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
-  @include border-radius(var(--#{$prefix}popover-border-radius));
-  @include box-shadow(var(--#{$prefix}popover-box-shadow));
-
-  .popover-arrow {
+    z-index: var(--#{$prefix}popover-zindex);
     display: block;
-    width: var(--#{$prefix}popover-arrow-width);
-    height: var(--#{$prefix}popover-arrow-height);
+    max-width: var(--#{$prefix}popover-max-width);
+    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+    // So reset our font and text properties to avoid inheriting weird values.
+    @include reset-text();
+    @include font-size(var(--#{$prefix}popover-font-size));
+    // Allow breaking very long words so they don't overflow the popover's bounds
+    word-wrap: break-word;
+    background-color: var(--#{$prefix}popover-bg);
+    background-clip: padding-box;
+    border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+    @include border-radius(var(--#{$prefix}popover-border-radius));
+    @include box-shadow(var(--#{$prefix}popover-box-shadow));
 
-    &::before,
-    &::after {
-      position: absolute;
+    .popover-arrow {
       display: block;
-      content: "";
-      border-color: transparent;
-      border-style: solid;
-      border-width: 0;
+      width: var(--#{$prefix}popover-arrow-width);
+      height: var(--#{$prefix}popover-arrow-height);
+
+      &::before,
+      &::after {
+        position: absolute;
+        display: block;
+        content: "";
+        border-color: transparent;
+        border-style: solid;
+        border-width: 0;
+      }
     }
   }
-}
 
-.bs-popover-top {
-  > .popover-arrow {
-    bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+  .bs-popover-top {
+    > .popover-arrow {
+      bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
 
-    &::before,
-    &::after {
-      border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
-    }
+      &::before,
+      &::after {
+        border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      }
 
-    &::before {
-      bottom: 0;
-      border-top-color: var(--#{$prefix}popover-arrow-border);
-    }
+      &::before {
+        bottom: 0;
+        border-top-color: var(--#{$prefix}popover-arrow-border);
+      }
 
-    &::after {
-      bottom: var(--#{$prefix}popover-border-width);
-      border-top-color: var(--#{$prefix}popover-bg);
+      &::after {
+        bottom: var(--#{$prefix}popover-border-width);
+        border-top-color: var(--#{$prefix}popover-bg);
+      }
     }
   }
-}
 
-/* rtl:begin:ignore */
-.bs-popover-end {
-  > .popover-arrow {
-    left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
-    width: var(--#{$prefix}popover-arrow-height);
-    height: var(--#{$prefix}popover-arrow-width);
+  /* rtl:begin:ignore */
+  .bs-popover-end {
+    > .popover-arrow {
+      left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+      width: var(--#{$prefix}popover-arrow-height);
+      height: var(--#{$prefix}popover-arrow-width);
 
-    &::before,
-    &::after {
-      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
-    }
+      &::before,
+      &::after {
+        border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      }
 
-    &::before {
-      left: 0;
-      border-right-color: var(--#{$prefix}popover-arrow-border);
-    }
+      &::before {
+        left: 0;
+        border-right-color: var(--#{$prefix}popover-arrow-border);
+      }
 
-    &::after {
-      left: var(--#{$prefix}popover-border-width);
-      border-right-color: var(--#{$prefix}popover-bg);
+      &::after {
+        left: var(--#{$prefix}popover-border-width);
+        border-right-color: var(--#{$prefix}popover-bg);
+      }
     }
   }
-}
 
-/* rtl:end:ignore */
+  /* rtl:end:ignore */
 
-.bs-popover-bottom {
-  > .popover-arrow {
-    top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+  .bs-popover-bottom {
+    > .popover-arrow {
+      top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
 
-    &::before,
-    &::after {
-      border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      &::before,
+      &::after {
+        border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      }
+
+      &::before {
+        top: 0;
+        border-bottom-color: var(--#{$prefix}popover-arrow-border);
+      }
+
+      &::after {
+        top: var(--#{$prefix}popover-border-width);
+        border-bottom-color: var(--#{$prefix}popover-bg);
+      }
     }
 
-    &::before {
+    // This will remove the popover-header's border just below the arrow
+    .popover-header::before {
+      position: absolute;
       top: 0;
-      border-bottom-color: var(--#{$prefix}popover-arrow-border);
-    }
-
-    &::after {
-      top: var(--#{$prefix}popover-border-width);
-      border-bottom-color: var(--#{$prefix}popover-bg);
+      left: 50%;
+      display: block;
+      width: var(--#{$prefix}popover-arrow-width);
+      margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
+      content: "";
+      border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
     }
   }
 
-  // This will remove the popover-header's border just below the arrow
-  .popover-header::before {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    display: block;
-    width: var(--#{$prefix}popover-arrow-width);
-    margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
-    content: "";
-    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
-  }
-}
+  /* rtl:begin:ignore */
+  .bs-popover-start {
+    > .popover-arrow {
+      right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+      width: var(--#{$prefix}popover-arrow-height);
+      height: var(--#{$prefix}popover-arrow-width);
 
-/* rtl:begin:ignore */
-.bs-popover-start {
-  > .popover-arrow {
-    right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
-    width: var(--#{$prefix}popover-arrow-height);
-    height: var(--#{$prefix}popover-arrow-width);
+      &::before,
+      &::after {
+        border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      }
 
-    &::before,
-    &::after {
-      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
-    }
+      &::before {
+        right: 0;
+        border-left-color: var(--#{$prefix}popover-arrow-border);
+      }
 
-    &::before {
-      right: 0;
-      border-left-color: var(--#{$prefix}popover-arrow-border);
-    }
-
-    &::after {
-      right: var(--#{$prefix}popover-border-width);
-      border-left-color: var(--#{$prefix}popover-bg);
+      &::after {
+        right: var(--#{$prefix}popover-border-width);
+        border-left-color: var(--#{$prefix}popover-bg);
+      }
     }
   }
-}
 
-/* rtl:end:ignore */
+  /* rtl:end:ignore */
 
-.bs-popover-auto {
-  &[data-popper-placement^="top"] {
-    @extend .bs-popover-top;
+  .bs-popover-auto {
+    &[data-popper-placement^="top"] {
+      @extend .bs-popover-top;
+    }
+    &[data-popper-placement^="right"] {
+      @extend .bs-popover-end;
+    }
+    &[data-popper-placement^="bottom"] {
+      @extend .bs-popover-bottom;
+    }
+    &[data-popper-placement^="left"] {
+      @extend .bs-popover-start;
+    }
   }
-  &[data-popper-placement^="right"] {
-    @extend .bs-popover-end;
+
+  // Offset the popover to account for the popover arrow
+  .popover-header {
+    padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
+    margin-bottom: 0; // Reset the default from Reboot
+    @include font-size(var(--#{$prefix}popover-header-font-size));
+    color: var(--#{$prefix}popover-header-color);
+    background-color: var(--#{$prefix}popover-header-bg);
+    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+    @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
+
+    &:empty {
+      display: none;
+    }
   }
-  &[data-popper-placement^="bottom"] {
-    @extend .bs-popover-bottom;
-  }
-  &[data-popper-placement^="left"] {
-    @extend .bs-popover-start;
+
+  .popover-body {
+    padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
+    color: var(--#{$prefix}popover-body-color);
   }
 }
-
-// Offset the popover to account for the popover arrow
-.popover-header {
-  padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
-  margin-bottom: 0; // Reset the default from Reboot
-  @include font-size(var(--#{$prefix}popover-header-font-size));
-  color: var(--#{$prefix}popover-header-color);
-  background-color: var(--#{$prefix}popover-header-bg);
-  border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
-  @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
-
-  &:empty {
-    display: none;
-  }
-}
-
-.popover-body {
-  padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
-  color: var(--#{$prefix}popover-body-color);
-}
diff --git a/scss/_progress.scss b/scss/_progress.scss
index f577f7074d..66f49ac8a0 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -6,70 +6,71 @@
 @use "mixins/box-shadow" as *;
 @use "vendor/rfs" as *;
 
-// Disable animation if transitions are disabled
-
-// scss-docs-start progress-keyframes
-@if $enable-transitions {
-  @keyframes progress-bar-stripes {
-    0% { background-position-x: $progress-height; }
+@layer components {
+  // Disable animation if transitions are disabled
+  // scss-docs-start progress-keyframes
+  @if $enable-transitions {
+    @keyframes progress-bar-stripes {
+      0% { background-position-x: $progress-height; }
+    }
   }
-}
-// scss-docs-end progress-keyframes
+  // scss-docs-end progress-keyframes
 
-.progress,
-.progress-stacked {
-  // scss-docs-start progress-css-vars
-  --#{$prefix}progress-height: #{$progress-height};
-  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
-  --#{$prefix}progress-bg: #{$progress-bg};
-  --#{$prefix}progress-border-radius: #{$progress-border-radius};
-  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
-  --#{$prefix}progress-bar-color: #{$progress-bar-color};
-  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
-  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
-  // scss-docs-end progress-css-vars
+  .progress,
+  .progress-stacked {
+    // scss-docs-start progress-css-vars
+    --#{$prefix}progress-height: #{$progress-height};
+    @include rfs($progress-font-size, --#{$prefix}progress-font-size);
+    --#{$prefix}progress-bg: #{$progress-bg};
+    --#{$prefix}progress-border-radius: #{$progress-border-radius};
+    --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
+    --#{$prefix}progress-bar-color: #{$progress-bar-color};
+    --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
+    --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
+    // scss-docs-end progress-css-vars
 
-  display: flex;
-  height: var(--#{$prefix}progress-height);
-  overflow: hidden; // force rounded corners by cropping it
-  @include font-size(var(--#{$prefix}progress-font-size));
-  background-color: var(--#{$prefix}progress-bg);
-  @include border-radius(var(--#{$prefix}progress-border-radius));
-  @include box-shadow(var(--#{$prefix}progress-box-shadow));
-}
+    display: flex;
+    height: var(--#{$prefix}progress-height);
+    overflow: hidden; // force rounded corners by cropping it
+    @include font-size(var(--#{$prefix}progress-font-size));
+    background-color: var(--#{$prefix}progress-bg);
+    @include border-radius(var(--#{$prefix}progress-border-radius));
+    @include box-shadow(var(--#{$prefix}progress-box-shadow));
+  }
 
-.progress-bar {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  overflow: hidden;
-  color: var(--#{$prefix}progress-bar-color);
-  text-align: center;
-  white-space: nowrap;
-  background-color: var(--#{$prefix}progress-bar-bg);
-  @include transition(var(--#{$prefix}progress-bar-transition));
-}
+  .progress-bar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    color: var(--#{$prefix}progress-bar-color);
+    text-align: center;
+    white-space: nowrap;
+    background-color: var(--#{$prefix}progress-bar-bg);
+    @include transition(var(--#{$prefix}progress-bar-transition));
+  }
 
-.progress-bar-striped {
-  @include gradient-striped();
-  background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
-}
+  .progress-bar-striped {
+    @include gradient-striped();
+    background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
+  }
 
-.progress-stacked > .progress {
-  overflow: visible;
-}
+  .progress-stacked > .progress {
+    overflow: visible;
+  }
 
-.progress-stacked > .progress > .progress-bar {
-  width: 100%;
-}
+  .progress-stacked > .progress > .progress-bar {
+    width: 100%;
+  }
 
-@if $enable-transitions {
-  .progress-bar-animated {
-    animation: $progress-bar-animation-timing progress-bar-stripes;
+  @if $enable-transitions {
+    .progress-bar-animated {
+      animation: $progress-bar-animation-timing progress-bar-stripes;
 
-    @if $enable-reduced-motion {
-      @media (prefers-reduced-motion: reduce) {
-        animation: none;
+      @if $enable-reduced-motion {
+        @media (prefers-reduced-motion: reduce) {
+          animation: none;
+        }
       }
     }
   }
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
deleted file mode 100644
index 35a789354f..0000000000
--- a/scss/_reboot.scss
+++ /dev/null
@@ -1,617 +0,0 @@
-@use "config" as *;
-@use "colors" as *;
-@use "variables" as *;
-@use "vendor/rfs" as *;
-@use "mixins/border-radius" as *;
-
-// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
-
-
-// Reboot
-//
-// Normalization of HTML elements, manually forked from Normalize.css to remove
-// styles targeting irrelevant browsers while applying new styles.
-//
-// Normalize is licensed MIT. https://github.com/necolas/normalize.css
-
-
-// Document
-//
-// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-
-// Root
-//
-// Ability to the value of the root font sizes, affecting the value of `rem`.
-// null by default, thus nothing is generated.
-
-:root {
-  @if $font-size-root != null {
-    @include font-size(var(--#{$prefix}root-font-size));
-  }
-
-  @if $enable-smooth-scroll {
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
-    }
-  }
-}
-
-
-// Body
-//
-// 1. Remove the margin in all browsers.
-// 2. As a best practice, apply a default `background-color`.
-// 3. Prevent adjustments of font size after orientation changes in iOS.
-// 4. Change the default tap highlight to be completely transparent in iOS.
-
-// scss-docs-start reboot-body-rules
-body {
-  margin: 0; // 1
-  font-family: var(--#{$prefix}body-font-family);
-  @include font-size(var(--#{$prefix}body-font-size));
-  font-weight: var(--#{$prefix}body-font-weight);
-  line-height: var(--#{$prefix}body-line-height);
-  color: var(--#{$prefix}body-color);
-  text-align: var(--#{$prefix}body-text-align);
-  background-color: var(--#{$prefix}body-bg); // 2
-  -webkit-text-size-adjust: 100%; // 3
-  -webkit-tap-highlight-color: rgba($black, 0); // 4
-}
-// scss-docs-end reboot-body-rules
-
-
-// Content grouping
-//
-// 1. Reset Firefox's gray color
-
-hr {
-  margin: $hr-margin-y 0;
-  color: $hr-color; // 1
-  border: 0;
-  border-top: $hr-border-width solid $hr-border-color;
-  opacity: $hr-opacity;
-}
-
-
-// Typography
-//
-// 1. Remove top margins from headings
-//    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
-//    margin for easier control within type scales as it avoids margin collapsing.
-
-%heading {
-  margin-top: 0; // 1
-  margin-bottom: $headings-margin-bottom;
-  font-family: $headings-font-family;
-  font-style: $headings-font-style;
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  color: var(--#{$prefix}heading-color);
-}
-
-h1 {
-  @extend %heading;
-  @include font-size($h1-font-size);
-}
-
-h2 {
-  @extend %heading;
-  @include font-size($h2-font-size);
-}
-
-h3 {
-  @extend %heading;
-  @include font-size($h3-font-size);
-}
-
-h4 {
-  @extend %heading;
-  @include font-size($h4-font-size);
-}
-
-h5 {
-  @extend %heading;
-  @include font-size($h5-font-size);
-}
-
-h6 {
-  @extend %heading;
-  @include font-size($h6-font-size);
-}
-
-
-// Reset margins on paragraphs
-//
-// Similarly, the top margin on `<p>`s get reset. However, we also reset the
-// bottom margin to use `rem` units instead of `em`.
-
-p {
-  margin-top: 0;
-  margin-bottom: $paragraph-margin-bottom;
-}
-
-
-// Abbreviations
-//
-// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
-// 2. Add explicit cursor to indicate changed behavior.
-// 3. Prevent the text-decoration to be skipped.
-
-abbr[title] {
-  text-decoration: underline dotted; // 1
-  cursor: help; // 2
-  text-decoration-skip-ink: none; // 3
-}
-
-
-// Address
-
-address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
-
-
-// Lists
-
-ol,
-ul {
-  padding-left: 2rem;
-}
-
-ol,
-ul,
-dl {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-
-dt {
-  font-weight: $dt-font-weight;
-}
-
-// 1. Undo browser default
-
-dd {
-  margin-bottom: .5rem;
-  margin-left: 0; // 1
-}
-
-
-// Blockquote
-
-blockquote {
-  margin: 0 0 1rem;
-}
-
-
-// Strong
-//
-// Add the correct font weight in Chrome, Edge, and Safari
-
-b,
-strong {
-  font-weight: $font-weight-bolder;
-}
-
-
-// Small
-//
-// Add the correct font size in all browsers
-
-small {
-  @include font-size($small-font-size);
-}
-
-
-// Mark
-
-mark {
-  padding: $mark-padding;
-  color: var(--#{$prefix}highlight-color);
-  background-color: var(--#{$prefix}highlight-bg);
-}
-
-
-// Sub and Sup
-//
-// Prevent `sub` and `sup` elements from affecting the line height in
-// all browsers.
-
-sub,
-sup {
-  position: relative;
-  @include font-size($sub-sup-font-size);
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sub { bottom: -.25em; }
-sup { top: -.5em; }
-
-
-// Links
-
-a {
-  color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
-  text-decoration: $link-decoration;
-
-  &:hover {
-    --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
-    text-decoration: $link-hover-decoration;
-  }
-}
-
-// And undo these styles for placeholder links/named anchors (without href).
-// It would be more straightforward to just use a[href] in previous block, but that
-// causes specificity issues in many other styles that are too complex to fix.
-// See https://github.com/twbs/bootstrap/issues/19402
-
-a:not([href]):not([class]) {
-  &,
-  &:hover {
-    color: inherit;
-    text-decoration: none;
-  }
-}
-
-
-// Code
-
-pre,
-code,
-kbd,
-samp {
-  font-family: $font-family-code;
-  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
-}
-
-// 1. Remove browser default top margin
-// 2. Reset browser default of `1em` to use `rem`s
-// 3. Don't allow content to break outside
-
-pre {
-  display: block;
-  margin-top: 0; // 1
-  margin-bottom: 1rem; // 2
-  overflow: auto; // 3
-  @include font-size($code-font-size);
-  color: $pre-color;
-
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    @include font-size(inherit);
-    color: inherit;
-    word-break: normal;
-  }
-}
-
-code {
-  @include font-size($code-font-size);
-  color: var(--#{$prefix}code-color);
-  word-wrap: break-word;
-
-  // Streamline the style when inside anchors to avoid broken underline and more
-  a > & {
-    color: inherit;
-  }
-}
-
-kbd {
-  padding: $kbd-padding-y $kbd-padding-x;
-  @include font-size($kbd-font-size);
-  color: $kbd-color;
-  background-color: $kbd-bg;
-  @include border-radius($border-radius-sm);
-
-  kbd {
-    padding: 0;
-    @include font-size(1em);
-    font-weight: $nested-kbd-font-weight;
-  }
-}
-
-
-// Figures
-//
-// Apply a consistent margin strategy (matches our type styles).
-
-figure {
-  margin: 0 0 1rem;
-}
-
-
-// Images and content
-
-img,
-svg {
-  vertical-align: middle;
-}
-
-
-// Tables
-//
-// Prevent double borders
-
-table {
-  caption-side: bottom;
-  border-collapse: collapse;
-}
-
-caption {
-  padding-top: $table-cell-padding-y;
-  padding-bottom: $table-cell-padding-y;
-  color: $table-caption-color;
-  text-align: left;
-}
-
-// 1. Removes font-weight bold by inheriting
-// 2. Matches default `<td>` alignment by inheriting `text-align`.
-// 3. Fix alignment for Safari
-
-th {
-  font-weight: $table-th-font-weight; // 1
-  text-align: inherit; // 2
-  text-align: -webkit-match-parent; // 3
-}
-
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
-}
-
-
-// Forms
-//
-// 1. Allow labels to use `margin` for spacing.
-
-label {
-  display: inline-block; // 1
-}
-
-// Remove the default `border-radius` that macOS Chrome adds.
-// See https://github.com/twbs/bootstrap/issues/24093
-
-button {
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: 0;
-}
-
-// Explicitly remove focus outline in Chromium when it shouldn't be
-// visible (e.g. as result of mouse click or touch tap). It already
-// should be doing this automatically, but seems to currently be
-// confused and applies its very visible two-tone outline anyway.
-
-button:focus:not(:focus-visible) {
-  outline: 0;
-}
-
-// 1. Remove the margin in Firefox and Safari
-
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0; // 1
-  font-family: inherit;
-  @include font-size(inherit);
-  line-height: inherit;
-}
-
-// Remove the inheritance of text transform in Firefox
-button,
-select {
-  text-transform: none;
-}
-// Set the cursor for non-`<button>` buttons
-//
-// Details at https://github.com/twbs/bootstrap/pull/30562
-[role="button"] {
-  cursor: pointer;
-}
-
-select {
-  // Remove the inheritance of word-wrap in Safari.
-  // See https://github.com/twbs/bootstrap/issues/24990
-  word-wrap: normal;
-
-  // Undo the opacity change from Chrome
-  &:disabled {
-    opacity: 1;
-  }
-}
-
-// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
-// See https://stackoverflow.com/a/54997118
-
-[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
-  display: none !important;
-}
-
-// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-//    controls in Android 4.
-// 2. Correct the inability to style clickable types in iOS and Safari.
-// 3. Opinionated: add "hand" cursor to non-disabled button elements.
-
-button,
-[type="button"], // 1
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; // 2
-
-  @if $enable-button-pointers {
-    &:not(:disabled) {
-      cursor: pointer; // 3
-    }
-  }
-}
-
-// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
-
-::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
-
-textarea {
-  resize: vertical; // 1
-}
-
-// 1. Browsers set a default `min-width: min-content;` on fieldsets,
-//    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
-//    So we reset that to ensure fieldsets behave more like a standard block element.
-//    See https://github.com/twbs/bootstrap/issues/12359
-//    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
-// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
-
-fieldset {
-  min-width: 0; // 1
-  padding: 0; // 2
-  margin: 0; // 2
-  border: 0; // 2
-}
-
-// 1. By using `float: left`, the legend will behave like a block element.
-//    This way the border of a fieldset wraps around the legend if present.
-// 2. Fix wrapping bug.
-//    See https://github.com/twbs/bootstrap/issues/29712
-
-legend {
-  float: left; // 1
-  width: 100%;
-  padding: 0;
-  margin-bottom: $legend-margin-bottom;
-  font-weight: $legend-font-weight;
-  line-height: inherit;
-  @include font-size($legend-font-size);
-
-  + * {
-    clear: left; // 2
-  }
-}
-
-// Fix height of inputs with a type of datetime-local, date, month, week, or time
-// See https://github.com/twbs/bootstrap/issues/18842
-
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
-  padding: 0;
-}
-
-::-webkit-inner-spin-button {
-  height: auto;
-}
-
-// 1. This overrides the extra rounded corners on search inputs in iOS so that our
-//    `.form-control` class can properly style them. Note that this cannot simply
-//    be added to `.form-control` as it's not specific enough. For details, see
-//    https://github.com/twbs/bootstrap/issues/11586.
-// 2. Correct the outline style in Safari.
-
-[type="search"] {
-  -webkit-appearance: textfield; // 1
-  outline-offset: -2px; // 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 {
-  -webkit-appearance: none;
-}
-
-// Remove padding around color pickers in webkit browsers
-
-::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-
-// 1. Inherit font family and line height for file input buttons
-// 2. Correct the inability to style clickable types in iOS and Safari.
-
-::file-selector-button {
-  font: inherit; // 1
-  -webkit-appearance: button; // 2
-}
-
-// Correct element displays
-
-output {
-  display: inline-block;
-}
-
-// Remove border from iframe
-
-iframe {
-  border: 0;
-}
-
-// Summary
-//
-// 1. Add the correct display in all browsers
-
-summary {
-  display: list-item; // 1
-  cursor: pointer;
-}
-
-
-// Progress
-//
-// Add the correct vertical alignment in Chrome, Firefox, and Opera.
-
-progress {
-  vertical-align: baseline;
-}
-
-
-// Hidden attribute
-//
-// Always hide an element with the `hidden` HTML attribute.
-
-[hidden] {
-  display: none !important;
-}
diff --git a/scss/_root.scss b/scss/_root.scss
index 2c15cdd1d6..fd1533d562 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -5,6 +5,24 @@
 @use "vendor/rfs" as *;
 @use "mixins/color-mode" as *;
 
+// mdo-do: do we need theme?
+@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
+
+@layer colors {
+  :root,
+  [data-bs-theme="light"] {
+    @each $color-group-name, $color-group in $all-colors {
+      @each $color-name, $color-value in $color-group {
+        --#{$prefix}#{$color-name}: #{$color-value};
+      }
+    }
+
+    @each $color, $value in $theme-colors {
+      --#{$prefix}#{$color}: #{$value};
+    }
+  }
+}
+
 :root,
 [data-bs-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.
@@ -13,11 +31,11 @@
   //
   // Generate palettes for full colors, grays, and theme colors.
 
-  @each $color-group-name, $color-group in $all-colors {
-    @each $color-name, $color-value in $color-group {
-      --#{$prefix}#{$color-name}: #{$color-value};
-    }
-  }
+  // @each $color-group-name, $color-group in $all-colors {
+  //   @each $color-name, $color-value in $color-group {
+  //     --#{$prefix}#{$color-name}: #{$color-value};
+  //   }
+  // }
 
   // @each $color, $value in $colors {
   //   --#{$prefix}#{$color}: #{$value};
@@ -27,9 +45,9 @@
   //   --#{$prefix}gray-#{$color}: #{$value};
   // }
 
-  @each $color, $value in $theme-colors {
-    --#{$prefix}#{$color}: #{$value};
-  }
+  // @each $color, $value in $theme-colors {
+  //   --#{$prefix}#{$color}: #{$value};
+  // }
 
   @each $color, $value in $theme-colors-rgb {
     --#{$prefix}#{$color}-rgb: #{$value};
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index c13caee16b..d7b638a4fd 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -1,88 +1,90 @@
 @use "config" as *;
 @use "variables" as *;
 
-//
-// Rotating border
-//
+@layer components {
+  //
+  // Rotating border
+  //
 
-.spinner-grow,
-.spinner-border {
-  display: inline-block;
-  width: var(--#{$prefix}spinner-width);
-  height: var(--#{$prefix}spinner-height);
-  vertical-align: var(--#{$prefix}spinner-vertical-align);
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: 50%;
-  animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
-}
-
-// scss-docs-start spinner-border-keyframes
-@keyframes spinner-border {
-  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
-}
-// scss-docs-end spinner-border-keyframes
-
-.spinner-border {
-  // scss-docs-start spinner-border-css-vars
-  --#{$prefix}spinner-width: #{$spinner-width};
-  --#{$prefix}spinner-height: #{$spinner-height};
-  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
-  --#{$prefix}spinner-border-width: #{$spinner-border-width};
-  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
-  --#{$prefix}spinner-animation-name: spinner-border;
-  // scss-docs-end spinner-border-css-vars
-
-  border: var(--#{$prefix}spinner-border-width) solid currentcolor;
-  border-right-color: transparent;
-}
-
-.spinner-border-sm {
-  // scss-docs-start spinner-border-sm-css-vars
-  --#{$prefix}spinner-width: #{$spinner-width-sm};
-  --#{$prefix}spinner-height: #{$spinner-height-sm};
-  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
-  // scss-docs-end spinner-border-sm-css-vars
-}
-
-//
-// Growing circle
-//
-
-// scss-docs-start spinner-grow-keyframes
-@keyframes spinner-grow {
-  0% {
-    transform: scale(0);
+  .spinner-grow,
+  .spinner-border {
+    display: inline-block;
+    width: var(--#{$prefix}spinner-width);
+    height: var(--#{$prefix}spinner-height);
+    vertical-align: var(--#{$prefix}spinner-vertical-align);
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: 50%;
+    animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
   }
-  50% {
-    opacity: 1;
-    transform: none;
+
+  // scss-docs-start spinner-border-keyframes
+  @keyframes spinner-border {
+    to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
   }
-}
-// scss-docs-end spinner-grow-keyframes
+  // scss-docs-end spinner-border-keyframes
 
-.spinner-grow {
-  // scss-docs-start spinner-grow-css-vars
-  --#{$prefix}spinner-width: #{$spinner-width};
-  --#{$prefix}spinner-height: #{$spinner-height};
-  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
-  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
-  --#{$prefix}spinner-animation-name: spinner-grow;
-  // scss-docs-end spinner-grow-css-vars
+  .spinner-border {
+    // scss-docs-start spinner-border-css-vars
+    --#{$prefix}spinner-width: #{$spinner-width};
+    --#{$prefix}spinner-height: #{$spinner-height};
+    --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
+    --#{$prefix}spinner-border-width: #{$spinner-border-width};
+    --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
+    --#{$prefix}spinner-animation-name: spinner-border;
+    // scss-docs-end spinner-border-css-vars
 
-  background-color: currentcolor;
-  opacity: 0;
-}
+    border: var(--#{$prefix}spinner-border-width) solid currentcolor;
+    border-right-color: transparent;
+  }
 
-.spinner-grow-sm {
-  --#{$prefix}spinner-width: #{$spinner-width-sm};
-  --#{$prefix}spinner-height: #{$spinner-height-sm};
-}
+  .spinner-border-sm {
+    // scss-docs-start spinner-border-sm-css-vars
+    --#{$prefix}spinner-width: #{$spinner-width-sm};
+    --#{$prefix}spinner-height: #{$spinner-height-sm};
+    --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
+    // scss-docs-end spinner-border-sm-css-vars
+  }
 
-@if $enable-reduced-motion {
-  @media (prefers-reduced-motion: reduce) {
-    .spinner-border,
-    .spinner-grow {
-      --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
+  //
+  // Growing circle
+  //
+
+  // scss-docs-start spinner-grow-keyframes
+  @keyframes spinner-grow {
+    0% {
+      transform: scale(0);
+    }
+    50% {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  // scss-docs-end spinner-grow-keyframes
+
+  .spinner-grow {
+    // scss-docs-start spinner-grow-css-vars
+    --#{$prefix}spinner-width: #{$spinner-width};
+    --#{$prefix}spinner-height: #{$spinner-height};
+    --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
+    --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
+    --#{$prefix}spinner-animation-name: spinner-grow;
+    // scss-docs-end spinner-grow-css-vars
+
+    background-color: currentcolor;
+    opacity: 0;
+  }
+
+  .spinner-grow-sm {
+    --#{$prefix}spinner-width: #{$spinner-width-sm};
+    --#{$prefix}spinner-height: #{$spinner-height-sm};
+  }
+
+  @if $enable-reduced-motion {
+    @media (prefers-reduced-motion: reduce) {
+      .spinner-border,
+      .spinner-grow {
+        --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
+      }
     }
   }
 }
diff --git a/scss/_tables.scss b/scss/_tables.scss
deleted file mode 100644
index dbcd2531d9..0000000000
--- a/scss/_tables.scss
+++ /dev/null
@@ -1,203 +0,0 @@
-@use "sass:map";
-@use "config" as *;
-@use "colors" as *;
-@use "variables" as *;
-@use "functions" as *;
-@use "layout/breakpoints" as *;
-
-// scss-docs-start table-variant
-@mixin table-variant($state, $background) {
-  .table-#{$state} {
-    $color: color-contrast(opaque($body-bg, $background));
-    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
-    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
-    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
-    $table-border-color: mix($color, $background, percentage($table-border-factor));
-
-    --#{$prefix}table-color: #{$color};
-    --#{$prefix}table-bg: #{$background};
-    --#{$prefix}table-border-color: #{$table-border-color};
-    --#{$prefix}table-striped-bg: #{$striped-bg};
-    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
-    --#{$prefix}table-active-bg: #{$active-bg};
-    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
-    --#{$prefix}table-hover-bg: #{$hover-bg};
-    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
-
-    color: var(--#{$prefix}table-color);
-    border-color: var(--#{$prefix}table-border-color);
-  }
-}
-// scss-docs-end table-variant
-
-//
-// Basic Bootstrap table
-//
-
-.table {
-  // Reset needed for nesting tables
-  --#{$prefix}table-color-type: initial;
-  --#{$prefix}table-bg-type: initial;
-  --#{$prefix}table-color-state: initial;
-  --#{$prefix}table-bg-state: initial;
-  // End of reset
-  --#{$prefix}table-color: #{$table-color};
-  --#{$prefix}table-bg: #{$table-bg};
-  --#{$prefix}table-border-color: #{$table-border-color};
-  --#{$prefix}table-accent-bg: #{$table-accent-bg};
-  --#{$prefix}table-striped-color: #{$table-striped-color};
-  --#{$prefix}table-striped-bg: #{$table-striped-bg};
-  --#{$prefix}table-active-color: #{$table-active-color};
-  --#{$prefix}table-active-bg: #{$table-active-bg};
-  --#{$prefix}table-hover-color: #{$table-hover-color};
-  --#{$prefix}table-hover-bg: #{$table-hover-bg};
-
-  width: 100%;
-  margin-bottom: $spacer;
-  vertical-align: $table-cell-vertical-align;
-  border-color: var(--#{$prefix}table-border-color);
-
-  // Target th & td
-  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
-  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
-  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
-  // stylelint-disable-next-line selector-max-universal
-  > :not(caption) > * > * {
-    padding: $table-cell-padding-y $table-cell-padding-x;
-    // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
-    color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
-    background-color: var(--#{$prefix}table-bg);
-    border-bottom-width: $table-border-width;
-    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
-  }
-
-  > tbody {
-    vertical-align: inherit;
-  }
-
-  > thead {
-    vertical-align: bottom;
-  }
-}
-
-.table-group-divider {
-  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
-}
-
-//
-// Change placement of captions with a class
-//
-
-.caption-top {
-  caption-side: top;
-}
-
-
-//
-// Condensed table w/ half padding
-//
-
-.table-sm {
-  // stylelint-disable-next-line selector-max-universal
-  > :not(caption) > * > * {
-    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
-  }
-}
-
-
-// Border versions
-//
-// Add or remove borders all around the table and between all the columns.
-//
-// When borders are added on all sides of the cells, the corners can render odd when
-// these borders do not have the same color or if they are semi-transparent.
-// Therefore we add top and border bottoms to the `tr`s and left and right borders
-// to the `td`s or `th`s
-
-.table-bordered {
-  > :not(caption) > * {
-    border-width: $table-border-width 0;
-
-    // stylelint-disable-next-line selector-max-universal
-    > * {
-      border-width: 0 $table-border-width;
-    }
-  }
-}
-
-.table-borderless {
-  // stylelint-disable-next-line selector-max-universal
-  > :not(caption) > * > * {
-    border-bottom-width: 0;
-  }
-
-  > :not(:first-child) {
-    border-top-width: 0;
-  }
-}
-
-// Zebra-striping
-//
-// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-
-// For rows
-.table-striped {
-  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
-    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
-  }
-}
-
-// For columns
-.table-striped-columns {
-  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
-    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
-    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
-  }
-}
-
-// Active table
-//
-// The `.table-active` class can be added to highlight rows or cells
-
-.table-active {
-  --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
-  --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
-}
-
-// Hover effect
-//
-// Placed here since it has to come after the potential zebra striping
-
-.table-hover {
-  > tbody > tr:hover > * {
-    --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
-    --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
-  }
-}
-
-
-// Table variants
-//
-// Table variants set the table cell backgrounds, border colors
-// and the colors of the striped, hovered & active tables
-
-@each $color, $value in $table-variants {
-  @include table-variant($color, $value);
-}
-
-// Responsive tables
-//
-// Generate series of `.table-responsive-*` classes for configuring the screen
-// size of where your table will overflow.
-
-@each $breakpoint in map.keys($grid-breakpoints) {
-  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-  @include media-breakpoint-down($breakpoint) {
-    .table-responsive#{$infix} {
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-}
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index b248f2d828..9a4bbcb7aa 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -3,76 +3,78 @@
 @use "mixins/border-radius" as *;
 @use "vendor/rfs" as *;
 
-.toast {
-  // scss-docs-start toast-css-vars
-  --#{$prefix}toast-zindex: #{$zindex-toast};
-  --#{$prefix}toast-padding-x: #{$toast-padding-x};
-  --#{$prefix}toast-padding-y: #{$toast-padding-y};
-  --#{$prefix}toast-spacing: #{$toast-spacing};
-  --#{$prefix}toast-max-width: #{$toast-max-width};
-  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
-  --#{$prefix}toast-color: #{$toast-color};
-  --#{$prefix}toast-bg: #{$toast-background-color};
-  --#{$prefix}toast-border-width: #{$toast-border-width};
-  --#{$prefix}toast-border-color: #{$toast-border-color};
-  --#{$prefix}toast-border-radius: #{$toast-border-radius};
-  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
-  --#{$prefix}toast-header-color: #{$toast-header-color};
-  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
-  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
-  // scss-docs-end toast-css-vars
+@layer components {
+  .toast {
+    // scss-docs-start toast-css-vars
+    --#{$prefix}toast-zindex: #{$zindex-toast};
+    --#{$prefix}toast-padding-x: #{$toast-padding-x};
+    --#{$prefix}toast-padding-y: #{$toast-padding-y};
+    --#{$prefix}toast-spacing: #{$toast-spacing};
+    --#{$prefix}toast-max-width: #{$toast-max-width};
+    @include rfs($toast-font-size, --#{$prefix}toast-font-size);
+    --#{$prefix}toast-color: #{$toast-color};
+    --#{$prefix}toast-bg: #{$toast-background-color};
+    --#{$prefix}toast-border-width: #{$toast-border-width};
+    --#{$prefix}toast-border-color: #{$toast-border-color};
+    --#{$prefix}toast-border-radius: #{$toast-border-radius};
+    --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
+    --#{$prefix}toast-header-color: #{$toast-header-color};
+    --#{$prefix}toast-header-bg: #{$toast-header-background-color};
+    --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
+    // scss-docs-end toast-css-vars
 
-  width: var(--#{$prefix}toast-max-width);
-  max-width: 100%;
-  @include font-size(var(--#{$prefix}toast-font-size));
-  color: var(--#{$prefix}toast-color);
-  pointer-events: auto;
-  background-color: var(--#{$prefix}toast-bg);
-  background-clip: padding-box;
-  border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
-  box-shadow: var(--#{$prefix}toast-box-shadow);
-  @include border-radius(var(--#{$prefix}toast-border-radius));
+    width: var(--#{$prefix}toast-max-width);
+    max-width: 100%;
+    @include font-size(var(--#{$prefix}toast-font-size));
+    color: var(--#{$prefix}toast-color);
+    pointer-events: auto;
+    background-color: var(--#{$prefix}toast-bg);
+    background-clip: padding-box;
+    border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
+    box-shadow: var(--#{$prefix}toast-box-shadow);
+    @include border-radius(var(--#{$prefix}toast-border-radius));
 
-  &.showing {
-    opacity: 0;
+    &.showing {
+      opacity: 0;
+    }
+
+    &:not(.show) {
+      display: none;
+    }
   }
 
-  &:not(.show) {
-    display: none;
+  .toast-container {
+    --#{$prefix}toast-zindex: #{$zindex-toast};
+
+    position: absolute;
+    z-index: var(--#{$prefix}toast-zindex);
+    width: max-content;
+    max-width: 100%;
+    pointer-events: none;
+
+    > :not(:last-child) {
+      margin-bottom: var(--#{$prefix}toast-spacing);
+    }
+  }
+
+  .toast-header {
+    display: flex;
+    align-items: center;
+    padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
+    color: var(--#{$prefix}toast-header-color);
+    background-color: var(--#{$prefix}toast-header-bg);
+    background-clip: padding-box;
+    border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
+    @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
+
+    .btn-close {
+      margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
+      margin-left: var(--#{$prefix}toast-padding-x);
+    }
+  }
+
+  .toast-body {
+    padding: var(--#{$prefix}toast-padding-x);
+    word-wrap: break-word;
   }
 }
-
-.toast-container {
-  --#{$prefix}toast-zindex: #{$zindex-toast};
-
-  position: absolute;
-  z-index: var(--#{$prefix}toast-zindex);
-  width: max-content;
-  max-width: 100%;
-  pointer-events: none;
-
-  > :not(:last-child) {
-    margin-bottom: var(--#{$prefix}toast-spacing);
-  }
-}
-
-.toast-header {
-  display: flex;
-  align-items: center;
-  padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
-  color: var(--#{$prefix}toast-header-color);
-  background-color: var(--#{$prefix}toast-header-bg);
-  background-clip: padding-box;
-  border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
-  @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
-
-  .btn-close {
-    margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
-    margin-left: var(--#{$prefix}toast-padding-x);
-  }
-}
-
-.toast-body {
-  padding: var(--#{$prefix}toast-padding-x);
-  word-wrap: break-word;
-}
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 9a30c75742..13f71a0799 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -5,122 +5,124 @@
 @use "vendor/rfs" as *;
 @use "mixins/reset-text" as *;
 
-// Base class
-.tooltip {
-  // scss-docs-start tooltip-css-vars
-  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
-  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
-  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
-  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
-  --#{$prefix}tooltip-margin: #{$tooltip-margin};
-  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
-  --#{$prefix}tooltip-color: #{$tooltip-color};
-  --#{$prefix}tooltip-bg: #{$tooltip-bg};
-  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
-  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
-  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
-  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
-  // scss-docs-end tooltip-css-vars
+@layer components {
+  // Base class
+  .tooltip {
+    // scss-docs-start tooltip-css-vars
+    --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+    --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+    --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+    --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+    --#{$prefix}tooltip-margin: #{$tooltip-margin};
+    @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+    --#{$prefix}tooltip-color: #{$tooltip-color};
+    --#{$prefix}tooltip-bg: #{$tooltip-bg};
+    --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+    --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+    --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
+    --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+    // scss-docs-end tooltip-css-vars
 
-  z-index: var(--#{$prefix}tooltip-zindex);
-  display: block;
-  margin: var(--#{$prefix}tooltip-margin);
-  @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
-  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-  // So reset our font and text properties to avoid inheriting weird values.
-  @include reset-text();
-  @include font-size(var(--#{$prefix}tooltip-font-size));
-  // Allow breaking very long words so they don't overflow the tooltip's bounds
-  word-wrap: break-word;
-  opacity: 0;
-
-  &.show { opacity: var(--#{$prefix}tooltip-opacity); }
-
-  .tooltip-arrow {
+    z-index: var(--#{$prefix}tooltip-zindex);
     display: block;
-    width: var(--#{$prefix}tooltip-arrow-width);
-    height: var(--#{$prefix}tooltip-arrow-height);
+    margin: var(--#{$prefix}tooltip-margin);
+    @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
+    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+    // So reset our font and text properties to avoid inheriting weird values.
+    @include reset-text();
+    @include font-size(var(--#{$prefix}tooltip-font-size));
+    // Allow breaking very long words so they don't overflow the tooltip's bounds
+    word-wrap: break-word;
+    opacity: 0;
 
-    &::before {
-      position: absolute;
-      content: "";
-      border-color: transparent;
-      border-style: solid;
+    &.show { opacity: var(--#{$prefix}tooltip-opacity); }
+
+    .tooltip-arrow {
+      display: block;
+      width: var(--#{$prefix}tooltip-arrow-width);
+      height: var(--#{$prefix}tooltip-arrow-height);
+
+      &::before {
+        position: absolute;
+        content: "";
+        border-color: transparent;
+        border-style: solid;
+      }
     }
   }
-}
 
-.bs-tooltip-top .tooltip-arrow {
-  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+  .bs-tooltip-top .tooltip-arrow {
+    bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
 
-  &::before {
-    top: -1px;
-    border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
-    border-top-color: var(--#{$prefix}tooltip-bg);
+    &::before {
+      top: -1px;
+      border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-top-color: var(--#{$prefix}tooltip-bg);
+    }
+  }
+
+  /* rtl:begin:ignore */
+  .bs-tooltip-end .tooltip-arrow {
+    left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+    width: var(--#{$prefix}tooltip-arrow-height);
+    height: var(--#{$prefix}tooltip-arrow-width);
+
+    &::before {
+      right: -1px;
+      border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-right-color: var(--#{$prefix}tooltip-bg);
+    }
+  }
+
+  /* rtl:end:ignore */
+
+  .bs-tooltip-bottom .tooltip-arrow {
+    top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+
+    &::before {
+      bottom: -1px;
+      border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-bottom-color: var(--#{$prefix}tooltip-bg);
+    }
+  }
+
+  /* rtl:begin:ignore */
+  .bs-tooltip-start .tooltip-arrow {
+    right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+    width: var(--#{$prefix}tooltip-arrow-height);
+    height: var(--#{$prefix}tooltip-arrow-width);
+
+    &::before {
+      left: -1px;
+      border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-left-color: var(--#{$prefix}tooltip-bg);
+    }
+  }
+
+  /* rtl:end:ignore */
+
+  .bs-tooltip-auto {
+    &[data-popper-placement^="top"] {
+      @extend .bs-tooltip-top;
+    }
+    &[data-popper-placement^="right"] {
+      @extend .bs-tooltip-end;
+    }
+    &[data-popper-placement^="bottom"] {
+      @extend .bs-tooltip-bottom;
+    }
+    &[data-popper-placement^="left"] {
+      @extend .bs-tooltip-start;
+    }
+  }
+
+  // Wrapper for the tooltip content
+  .tooltip-inner {
+    max-width: var(--#{$prefix}tooltip-max-width);
+    padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
+    color: var(--#{$prefix}tooltip-color);
+    text-align: center;
+    background-color: var(--#{$prefix}tooltip-bg);
+    @include border-radius(var(--#{$prefix}tooltip-border-radius));
   }
 }
-
-/* rtl:begin:ignore */
-.bs-tooltip-end .tooltip-arrow {
-  left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
-  width: var(--#{$prefix}tooltip-arrow-height);
-  height: var(--#{$prefix}tooltip-arrow-width);
-
-  &::before {
-    right: -1px;
-    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
-    border-right-color: var(--#{$prefix}tooltip-bg);
-  }
-}
-
-/* rtl:end:ignore */
-
-.bs-tooltip-bottom .tooltip-arrow {
-  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
-
-  &::before {
-    bottom: -1px;
-    border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
-    border-bottom-color: var(--#{$prefix}tooltip-bg);
-  }
-}
-
-/* rtl:begin:ignore */
-.bs-tooltip-start .tooltip-arrow {
-  right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
-  width: var(--#{$prefix}tooltip-arrow-height);
-  height: var(--#{$prefix}tooltip-arrow-width);
-
-  &::before {
-    left: -1px;
-    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
-    border-left-color: var(--#{$prefix}tooltip-bg);
-  }
-}
-
-/* rtl:end:ignore */
-
-.bs-tooltip-auto {
-  &[data-popper-placement^="top"] {
-    @extend .bs-tooltip-top;
-  }
-  &[data-popper-placement^="right"] {
-    @extend .bs-tooltip-end;
-  }
-  &[data-popper-placement^="bottom"] {
-    @extend .bs-tooltip-bottom;
-  }
-  &[data-popper-placement^="left"] {
-    @extend .bs-tooltip-start;
-  }
-}
-
-// Wrapper for the tooltip content
-.tooltip-inner {
-  max-width: var(--#{$prefix}tooltip-max-width);
-  padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
-  color: var(--#{$prefix}tooltip-color);
-  text-align: center;
-  background-color: var(--#{$prefix}tooltip-bg);
-  @include border-radius(var(--#{$prefix}tooltip-border-radius));
-}
diff --git a/scss/_type.scss b/scss/_type.scss
deleted file mode 100644
index f13ea3863c..0000000000
--- a/scss/_type.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-@use "config" as *;
-@use "variables" as *;
-@use "mixins/lists" as *;
-@use "vendor/rfs" as *;
-
-//
-// Headings
-//
-// mdo-do: remove extend
-// .h1 {
-//   @extend h1;
-// }
-
-// .h2 {
-//   @extend h2;
-// }
-
-// .h3 {
-//   @extend h3;
-// }
-
-// .h4 {
-//   @extend h4;
-// }
-
-// .h5 {
-//   @extend h5;
-// }
-
-// .h6 {
-//   @extend h6;
-// }
-
-
-.lead {
-  @include font-size($lead-font-size);
-  font-weight: $lead-font-weight;
-}
-
-// Type display classes
-@each $display, $font-size in $display-font-sizes {
-  .display-#{$display} {
-    font-family: $display-font-family;
-    font-style: $display-font-style;
-    font-weight: $display-font-weight;
-    line-height: $display-line-height;
-    @include font-size($font-size);
-  }
-}
-
-//
-// Emphasis
-//
-.small {
-  // @extend small;
-}
-
-.mark {
-  // @extend mark;
-}
-
-//
-// Lists
-//
-
-.list-unstyled {
-  @include list-unstyled();
-}
-
-// Inline turns list items into inline-block
-.list-inline {
-  @include list-unstyled();
-}
-.list-inline-item {
-  display: inline-block;
-
-  &:not(:last-child) {
-    margin-right: $list-inline-padding;
-  }
-}
-
-
-//
-// Misc
-//
-
-// Builds on `abbr`
-.initialism {
-  @include font-size($initialism-font-size);
-  text-transform: uppercase;
-}
-
-// Blockquotes
-.blockquote {
-  margin-bottom: $blockquote-margin-y;
-  @include font-size($blockquote-font-size);
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-}
-
-.blockquote-footer {
-  margin-top: -$blockquote-margin-y;
-  margin-bottom: $blockquote-margin-y;
-  @include font-size($blockquote-footer-font-size);
-  color: $blockquote-footer-color;
-
-  &::before {
-    content: "\2014\00A0"; // em dash, nbsp
-  }
-}
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index f8a09b2959..4303e8b8d2 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -5,8 +5,6 @@
 @use "functions" as *;
 @use "maps" as *;
 
-// Utilities
-
 $utilities: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $utilities: map.merge(
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 5b4d9e98fa..5909972944 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -1,52 +1,46 @@
-// @import "mixins/banner";
-// @include bsBanner("");
-
+/*!
+  * Bootstrap v6.0.0-dev (https://getbootstrap.com/)
+  * Copyright 2011-2025 The Bootstrap Authors
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
 
 // scss-docs-start import-stack
-// Configuration
-// @use "config" as *;
-
-// @import "functions";
-// @import "colors";
-// @import "variables";
-// @import "variables-dark";
-@use "maps";
-@use "mixins";
-// @use "utilities";
-
-// Layout & components
+// Global CSS variables, layer definitions, and configuration
 @use "root";
-@use "reboot";
-@use "type";
-@use "images";
-// @import "containers";
-// @import "grid";
+
+// Reboot & Content
+@use "content";
+
+// Layout
 @use "layout";
-@use "tables";
+
+// Forms
 @use "forms";
+
+// Components
+@use "accordion";
+@use "alert";
+@use "badge";
+@use "breadcrumb";
 @use "buttons";
-@use "transitions";
-@use "dropdown";
 @use "button-group";
+@use "card";
+@use "carousel";
+@use "close";
+@use "dropdown";
+@use "list-group";
+@use "modal";
 @use "nav";
 @use "navbar";
-@use "card";
-@use "accordion";
-@use "breadcrumb";
-@use "pagination";
-@use "badge";
-@use "alert";
-@use "progress";
-@use "list-group";
-@use "close";
-@use "toasts";
-@use "modal";
-@use "tooltip";
-@use "popover";
-@use "carousel";
-@use "spinners";
 @use "offcanvas";
+@use "pagination";
 @use "placeholders";
+@use "popover";
+@use "progress";
+@use "spinners";
+@use "toasts";
+@use "tooltip";
+@use "transitions";
 
 // Helpers
 @use "helpers";
diff --git a/scss/content/_images.scss b/scss/content/_images.scss
new file mode 100644
index 0000000000..dab52cbf58
--- /dev/null
+++ b/scss/content/_images.scss
@@ -0,0 +1,51 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/image" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+
+@layer content {
+  // Responsive images (ensure images don't scale beyond their parents)
+  //
+  // This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
+  // We previously tried the "images are responsive by default" approach in Bootstrap v2,
+  // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+  // which weren't expecting the images within themselves to be involuntarily resized.
+  // See also https://github.com/twbs/bootstrap/issues/18178
+  .img-fluid {
+    @include img-fluid();
+  }
+
+
+  // Image thumbnails
+  .img-thumbnail {
+    padding: $thumbnail-padding;
+    background-color: $thumbnail-bg;
+    border: $thumbnail-border-width solid $thumbnail-border-color;
+    @include border-radius($thumbnail-border-radius);
+    @include box-shadow($thumbnail-box-shadow);
+
+    // Keep them at most 100% wide
+    @include img-fluid();
+  }
+
+  //
+  // Figures
+  //
+
+  .figure {
+    // Ensures the caption's text aligns with the image.
+    display: inline-block;
+  }
+
+  .figure-img {
+    margin-bottom: $spacer * .5;
+    line-height: 1;
+  }
+
+  .figure-caption {
+    @include font-size($figure-caption-font-size);
+    color: $figure-caption-color;
+  }
+}
diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss
new file mode 100644
index 0000000000..22212e3055
--- /dev/null
+++ b/scss/content/_reboot.scss
@@ -0,0 +1,618 @@
+@use "../config" as *;
+@use "../colors" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/border-radius" as *;
+
+// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
+@layer reboot {
+  // Reboot
+  //
+  // Normalization of HTML elements, manually forked from Normalize.css to remove
+  // styles targeting irrelevant browsers while applying new styles.
+  //
+  // Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+
+  // Document
+  //
+  // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+
+  // Root
+  //
+  // Ability to the value of the root font sizes, affecting the value of `rem`.
+  // null by default, thus nothing is generated.
+
+  :root {
+    @if $font-size-root != null {
+      @include font-size(var(--#{$prefix}root-font-size));
+    }
+
+    @if $enable-smooth-scroll {
+      @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+      }
+    }
+  }
+
+
+  // Body
+  //
+  // 1. Remove the margin in all browsers.
+  // 2. As a best practice, apply a default `background-color`.
+  // 3. Prevent adjustments of font size after orientation changes in iOS.
+  // 4. Change the default tap highlight to be completely transparent in iOS.
+
+  // scss-docs-start reboot-body-rules
+  body {
+    margin: 0; // 1
+    font-family: var(--#{$prefix}body-font-family);
+    @include font-size(var(--#{$prefix}body-font-size));
+    font-weight: var(--#{$prefix}body-font-weight);
+    line-height: var(--#{$prefix}body-line-height);
+    color: var(--#{$prefix}body-color);
+    text-align: var(--#{$prefix}body-text-align);
+    background-color: var(--#{$prefix}body-bg); // 2
+    -webkit-text-size-adjust: 100%; // 3
+    -webkit-tap-highlight-color: rgba($black, 0); // 4
+  }
+  // scss-docs-end reboot-body-rules
+
+
+  // Content grouping
+  //
+  // 1. Reset Firefox's gray color
+
+  hr {
+    margin: $hr-margin-y 0;
+    color: $hr-color; // 1
+    border: 0;
+    border-top: $hr-border-width solid $hr-border-color;
+    opacity: $hr-opacity;
+  }
+
+
+  // Typography
+  //
+  // 1. Remove top margins from headings
+  //    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+  //    margin for easier control within type scales as it avoids margin collapsing.
+
+  %heading {
+    margin-top: 0; // 1
+    margin-bottom: $headings-margin-bottom;
+    font-family: $headings-font-family;
+    font-style: $headings-font-style;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+    color: var(--#{$prefix}heading-color);
+  }
+
+  h1 {
+    @extend %heading;
+    @include font-size($h1-font-size);
+  }
+
+  h2 {
+    @extend %heading;
+    @include font-size($h2-font-size);
+  }
+
+  h3 {
+    @extend %heading;
+    @include font-size($h3-font-size);
+  }
+
+  h4 {
+    @extend %heading;
+    @include font-size($h4-font-size);
+  }
+
+  h5 {
+    @extend %heading;
+    @include font-size($h5-font-size);
+  }
+
+  h6 {
+    @extend %heading;
+    @include font-size($h6-font-size);
+  }
+
+
+  // Reset margins on paragraphs
+  //
+  // Similarly, the top margin on `<p>`s get reset. However, we also reset the
+  // bottom margin to use `rem` units instead of `em`.
+
+  p {
+    margin-top: 0;
+    margin-bottom: $paragraph-margin-bottom;
+  }
+
+
+  // Abbreviations
+  //
+  // 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
+  // 2. Add explicit cursor to indicate changed behavior.
+  // 3. Prevent the text-decoration to be skipped.
+
+  abbr[title] {
+    text-decoration: underline dotted; // 1
+    cursor: help; // 2
+    text-decoration-skip-ink: none; // 3
+  }
+
+
+  // Address
+
+  address {
+    margin-bottom: 1rem;
+    font-style: normal;
+    line-height: inherit;
+  }
+
+
+  // Lists
+
+  ol,
+  ul {
+    padding-left: 2rem;
+  }
+
+  ol,
+  ul,
+  dl {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  ol ol,
+  ul ul,
+  ol ul,
+  ul ol {
+    margin-bottom: 0;
+  }
+
+  dt {
+    font-weight: $dt-font-weight;
+  }
+
+  // 1. Undo browser default
+
+  dd {
+    margin-bottom: .5rem;
+    margin-left: 0; // 1
+  }
+
+
+  // Blockquote
+
+  blockquote {
+    margin: 0 0 1rem;
+  }
+
+
+  // Strong
+  //
+  // Add the correct font weight in Chrome, Edge, and Safari
+
+  b,
+  strong {
+    font-weight: $font-weight-bolder;
+  }
+
+
+  // Small
+  //
+  // Add the correct font size in all browsers
+
+  small {
+    @include font-size($small-font-size);
+  }
+
+
+  // Mark
+
+  mark {
+    padding: $mark-padding;
+    color: var(--#{$prefix}highlight-color);
+    background-color: var(--#{$prefix}highlight-bg);
+  }
+
+
+  // Sub and Sup
+  //
+  // Prevent `sub` and `sup` elements from affecting the line height in
+  // all browsers.
+
+  sub,
+  sup {
+    position: relative;
+    @include font-size($sub-sup-font-size);
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  sub { bottom: -.25em; }
+  sup { top: -.5em; }
+
+
+  // Links
+
+  a {
+    color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
+    text-decoration: $link-decoration;
+
+    &:hover {
+      --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
+      text-decoration: $link-hover-decoration;
+    }
+  }
+
+  // And undo these styles for placeholder links/named anchors (without href).
+  // It would be more straightforward to just use a[href] in previous block, but that
+  // causes specificity issues in many other styles that are too complex to fix.
+  // See https://github.com/twbs/bootstrap/issues/19402
+
+  a:not([href]):not([class]) {
+    &,
+    &:hover {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+
+  // Code
+
+  pre,
+  code,
+  kbd,
+  samp {
+    font-family: $font-family-code;
+    @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+  }
+
+  // 1. Remove browser default top margin
+  // 2. Reset browser default of `1em` to use `rem`s
+  // 3. Don't allow content to break outside
+
+  pre {
+    display: block;
+    margin-top: 0; // 1
+    margin-bottom: 1rem; // 2
+    overflow: auto; // 3
+    @include font-size($code-font-size);
+    color: $pre-color;
+
+    // Account for some code outputs that place code tags in pre tags
+    code {
+      @include font-size(inherit);
+      color: inherit;
+      word-break: normal;
+    }
+  }
+
+  code {
+    @include font-size($code-font-size);
+    color: var(--#{$prefix}code-color);
+    word-wrap: break-word;
+
+    // Streamline the style when inside anchors to avoid broken underline and more
+    a > & {
+      color: inherit;
+    }
+  }
+
+  kbd {
+    padding: $kbd-padding-y $kbd-padding-x;
+    @include font-size($kbd-font-size);
+    color: $kbd-color;
+    background-color: $kbd-bg;
+    @include border-radius($border-radius-sm);
+
+    kbd {
+      padding: 0;
+      @include font-size(1em);
+      font-weight: $nested-kbd-font-weight;
+    }
+  }
+
+
+  // Figures
+  //
+  // Apply a consistent margin strategy (matches our type styles).
+
+  figure {
+    margin: 0 0 1rem;
+  }
+
+
+  // Images and content
+
+  img,
+  svg {
+    vertical-align: middle;
+  }
+
+
+  // Tables
+  //
+  // Prevent double borders
+
+  table {
+    caption-side: bottom;
+    border-collapse: collapse;
+  }
+
+  caption {
+    padding-top: $table-cell-padding-y;
+    padding-bottom: $table-cell-padding-y;
+    color: $table-caption-color;
+    text-align: left;
+  }
+
+  // 1. Removes font-weight bold by inheriting
+  // 2. Matches default `<td>` alignment by inheriting `text-align`.
+  // 3. Fix alignment for Safari
+
+  th {
+    font-weight: $table-th-font-weight; // 1
+    text-align: inherit; // 2
+    text-align: -webkit-match-parent; // 3
+  }
+
+  thead,
+  tbody,
+  tfoot,
+  tr,
+  td,
+  th {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+  }
+
+
+  // Forms
+  //
+  // 1. Allow labels to use `margin` for spacing.
+
+  label {
+    display: inline-block; // 1
+  }
+
+  // Remove the default `border-radius` that macOS Chrome adds.
+  // See https://github.com/twbs/bootstrap/issues/24093
+
+  button {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: 0;
+  }
+
+  // Explicitly remove focus outline in Chromium when it shouldn't be
+  // visible (e.g. as result of mouse click or touch tap). It already
+  // should be doing this automatically, but seems to currently be
+  // confused and applies its very visible two-tone outline anyway.
+
+  button:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  // 1. Remove the margin in Firefox and Safari
+
+  input,
+  button,
+  select,
+  optgroup,
+  textarea {
+    margin: 0; // 1
+    font-family: inherit;
+    @include font-size(inherit);
+    line-height: inherit;
+  }
+
+  // Remove the inheritance of text transform in Firefox
+  button,
+  select {
+    text-transform: none;
+  }
+  // Set the cursor for non-`<button>` buttons
+  //
+  // Details at https://github.com/twbs/bootstrap/pull/30562
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  select {
+    // Remove the inheritance of word-wrap in Safari.
+    // See https://github.com/twbs/bootstrap/issues/24990
+    word-wrap: normal;
+
+    // Undo the opacity change from Chrome
+    &:disabled {
+      opacity: 1;
+    }
+  }
+
+  // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
+  // See https://stackoverflow.com/a/54997118
+
+  [list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
+
+  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+  //    controls in Android 4.
+  // 2. Correct the inability to style clickable types in iOS and Safari.
+  // 3. Opinionated: add "hand" cursor to non-disabled button elements.
+
+  button,
+  [type="button"], // 1
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button; // 2
+
+    @if $enable-button-pointers {
+      &:not(:disabled) {
+        cursor: pointer; // 3
+      }
+    }
+  }
+
+  // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+
+  ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
+
+  textarea {
+    resize: vertical; // 1
+  }
+
+  // 1. Browsers set a default `min-width: min-content;` on fieldsets,
+  //    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+  //    So we reset that to ensure fieldsets behave more like a standard block element.
+  //    See https://github.com/twbs/bootstrap/issues/12359
+  //    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+  // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
+
+  fieldset {
+    min-width: 0; // 1
+    padding: 0; // 2
+    margin: 0; // 2
+    border: 0; // 2
+  }
+
+  // 1. By using `float: left`, the legend will behave like a block element.
+  //    This way the border of a fieldset wraps around the legend if present.
+  // 2. Fix wrapping bug.
+  //    See https://github.com/twbs/bootstrap/issues/29712
+
+  legend {
+    float: left; // 1
+    width: 100%;
+    padding: 0;
+    margin-bottom: $legend-margin-bottom;
+    font-weight: $legend-font-weight;
+    line-height: inherit;
+    @include font-size($legend-font-size);
+
+    + * {
+      clear: left; // 2
+    }
+  }
+
+  // Fix height of inputs with a type of datetime-local, date, month, week, or time
+  // See https://github.com/twbs/bootstrap/issues/18842
+
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  // 1. This overrides the extra rounded corners on search inputs in iOS so that our
+  //    `.form-control` class can properly style them. Note that this cannot simply
+  //    be added to `.form-control` as it's not specific enough. For details, see
+  //    https://github.com/twbs/bootstrap/issues/11586.
+  // 2. Correct the outline style in Safari.
+
+  [type="search"] {
+    -webkit-appearance: textfield; // 1
+    outline-offset: -2px; // 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 {
+    -webkit-appearance: none;
+  }
+
+  // Remove padding around color pickers in webkit browsers
+
+  ::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+
+  // 1. Inherit font family and line height for file input buttons
+  // 2. Correct the inability to style clickable types in iOS and Safari.
+
+  ::file-selector-button {
+    font: inherit; // 1
+    -webkit-appearance: button; // 2
+  }
+
+  // Correct element displays
+
+  output {
+    display: inline-block;
+  }
+
+  // Remove border from iframe
+
+  iframe {
+    border: 0;
+  }
+
+  // Summary
+  //
+  // 1. Add the correct display in all browsers
+
+  summary {
+    display: list-item; // 1
+    cursor: pointer;
+  }
+
+
+  // Progress
+  //
+  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+  progress {
+    vertical-align: baseline;
+  }
+
+
+  // Hidden attribute
+  //
+  // Always hide an element with the `hidden` HTML attribute.
+
+  [hidden] {
+    display: none !important;
+  }
+}
diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss
new file mode 100644
index 0000000000..deabf106bb
--- /dev/null
+++ b/scss/content/_tables.scss
@@ -0,0 +1,205 @@
+@use "sass:map";
+@use "../config" as *;
+@use "../colors" as *;
+@use "../variables" as *;
+@use "../functions" as *;
+@use "../layout/breakpoints" as *;
+
+@layer content {
+  // scss-docs-start table-variant
+  @mixin table-variant($state, $background) {
+    .table-#{$state} {
+      $color: color-contrast(opaque($body-bg, $background));
+      $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+      $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+      $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+      $table-border-color: mix($color, $background, percentage($table-border-factor));
+
+      --#{$prefix}table-color: #{$color};
+      --#{$prefix}table-bg: #{$background};
+      --#{$prefix}table-border-color: #{$table-border-color};
+      --#{$prefix}table-striped-bg: #{$striped-bg};
+      --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+      --#{$prefix}table-active-bg: #{$active-bg};
+      --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+      --#{$prefix}table-hover-bg: #{$hover-bg};
+      --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
+
+      color: var(--#{$prefix}table-color);
+      border-color: var(--#{$prefix}table-border-color);
+    }
+  }
+  // scss-docs-end table-variant
+
+  //
+  // Basic Bootstrap table
+  //
+
+  .table {
+    // Reset needed for nesting tables
+    --#{$prefix}table-color-type: initial;
+    --#{$prefix}table-bg-type: initial;
+    --#{$prefix}table-color-state: initial;
+    --#{$prefix}table-bg-state: initial;
+    // End of reset
+    --#{$prefix}table-color: #{$table-color};
+    --#{$prefix}table-bg: #{$table-bg};
+    --#{$prefix}table-border-color: #{$table-border-color};
+    --#{$prefix}table-accent-bg: #{$table-accent-bg};
+    --#{$prefix}table-striped-color: #{$table-striped-color};
+    --#{$prefix}table-striped-bg: #{$table-striped-bg};
+    --#{$prefix}table-active-color: #{$table-active-color};
+    --#{$prefix}table-active-bg: #{$table-active-bg};
+    --#{$prefix}table-hover-color: #{$table-hover-color};
+    --#{$prefix}table-hover-bg: #{$table-hover-bg};
+
+    width: 100%;
+    margin-bottom: $spacer;
+    vertical-align: $table-cell-vertical-align;
+    border-color: var(--#{$prefix}table-border-color);
+
+    // Target th & td
+    // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
+    // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
+    // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
+    // stylelint-disable-next-line selector-max-universal
+    > :not(caption) > * > * {
+      padding: $table-cell-padding-y $table-cell-padding-x;
+      // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
+      color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
+      background-color: var(--#{$prefix}table-bg);
+      border-bottom-width: $table-border-width;
+      box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
+    }
+
+    > tbody {
+      vertical-align: inherit;
+    }
+
+    > thead {
+      vertical-align: bottom;
+    }
+  }
+
+  .table-group-divider {
+    border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
+  }
+
+  //
+  // Change placement of captions with a class
+  //
+
+  .caption-top {
+    caption-side: top;
+  }
+
+
+  //
+  // Condensed table w/ half padding
+  //
+
+  .table-sm {
+    // stylelint-disable-next-line selector-max-universal
+    > :not(caption) > * > * {
+      padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
+    }
+  }
+
+
+  // Border versions
+  //
+  // Add or remove borders all around the table and between all the columns.
+  //
+  // When borders are added on all sides of the cells, the corners can render odd when
+  // these borders do not have the same color or if they are semi-transparent.
+  // Therefore we add top and border bottoms to the `tr`s and left and right borders
+  // to the `td`s or `th`s
+
+  .table-bordered {
+    > :not(caption) > * {
+      border-width: $table-border-width 0;
+
+      // stylelint-disable-next-line selector-max-universal
+      > * {
+        border-width: 0 $table-border-width;
+      }
+    }
+  }
+
+  .table-borderless {
+    // stylelint-disable-next-line selector-max-universal
+    > :not(caption) > * > * {
+      border-bottom-width: 0;
+    }
+
+    > :not(:first-child) {
+      border-top-width: 0;
+    }
+  }
+
+  // Zebra-striping
+  //
+  // Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+  // For rows
+  .table-striped {
+    > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
+      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+    }
+  }
+
+  // For columns
+  .table-striped-columns {
+    > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
+      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+    }
+  }
+
+  // Active table
+  //
+  // The `.table-active` class can be added to highlight rows or cells
+
+  .table-active {
+    --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
+    --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
+  }
+
+  // Hover effect
+  //
+  // Placed here since it has to come after the potential zebra striping
+
+  .table-hover {
+    > tbody > tr:hover > * {
+      --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
+      --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
+    }
+  }
+
+
+  // Table variants
+  //
+  // Table variants set the table cell backgrounds, border colors
+  // and the colors of the striped, hovered & active tables
+
+  @each $color, $value in $table-variants {
+    @include table-variant($color, $value);
+  }
+
+  // Responsive tables
+  //
+  // Generate series of `.table-responsive-*` classes for configuring the screen
+  // size of where your table will overflow.
+
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @include media-breakpoint-down($breakpoint) {
+      .table-responsive#{$infix} {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+    }
+  }
+}
diff --git a/scss/content/_type.scss b/scss/content/_type.scss
new file mode 100644
index 0000000000..87bffbf5e1
--- /dev/null
+++ b/scss/content/_type.scss
@@ -0,0 +1,114 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../mixins/lists" as *;
+@use "../vendor/rfs" as *;
+
+@layer content {
+  //
+  // Headings
+  //
+  // mdo-do: remove extend
+  // .h1 {
+  //   @extend h1;
+  // }
+
+  // .h2 {
+  //   @extend h2;
+  // }
+
+  // .h3 {
+  //   @extend h3;
+  // }
+
+  // .h4 {
+  //   @extend h4;
+  // }
+
+  // .h5 {
+  //   @extend h5;
+  // }
+
+  // .h6 {
+  //   @extend h6;
+  // }
+
+
+  .lead {
+    @include font-size($lead-font-size);
+    font-weight: $lead-font-weight;
+  }
+
+  // Type display classes
+  @each $display, $font-size in $display-font-sizes {
+    .display-#{$display} {
+      font-family: $display-font-family;
+      font-style: $display-font-style;
+      font-weight: $display-font-weight;
+      line-height: $display-line-height;
+      @include font-size($font-size);
+    }
+  }
+
+  //
+  // Emphasis
+  //
+  .small {
+    // @extend small;
+  }
+
+  .mark {
+    // @extend mark;
+  }
+
+  //
+  // Lists
+  //
+
+  .list-unstyled {
+    @include list-unstyled();
+  }
+
+  // Inline turns list items into inline-block
+  .list-inline {
+    @include list-unstyled();
+  }
+  .list-inline-item {
+    display: inline-block;
+
+    &:not(:last-child) {
+      margin-right: $list-inline-padding;
+    }
+  }
+
+
+  //
+  // Misc
+  //
+
+  // Builds on `abbr`
+  .initialism {
+    @include font-size($initialism-font-size);
+    text-transform: uppercase;
+  }
+
+  // Blockquotes
+  .blockquote {
+    margin-bottom: $blockquote-margin-y;
+    @include font-size($blockquote-font-size);
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .blockquote-footer {
+    margin-top: -$blockquote-margin-y;
+    margin-bottom: $blockquote-margin-y;
+    @include font-size($blockquote-footer-font-size);
+    color: $blockquote-footer-color;
+
+    &::before {
+      content: "\2014\00A0"; // em dash, nbsp
+    }
+  }
+}
diff --git a/scss/content/index.scss b/scss/content/index.scss
new file mode 100644
index 0000000000..e643f1b393
--- /dev/null
+++ b/scss/content/index.scss
@@ -0,0 +1,4 @@
+@forward "reboot";
+@forward "type";
+@forward "tables";
+@forward "images";
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index cee16e468c..26edd7d868 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -3,100 +3,102 @@
 @use "../mixins/border-radius" as *;
 @use "../mixins/transition" as *;
 
-.form-floating {
-  position: relative;
+@layer forms {
+  .form-floating {
+    position: relative;
 
-  > .form-control,
-  > .form-control-plaintext,
-  > .form-select {
-    height: $form-floating-height;
-    min-height: $form-floating-height;
-    line-height: $form-floating-line-height;
-  }
-
-  > label {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    max-width: 100%;
-    height: 100%; // allow textareas
-    padding: $form-floating-padding-y $form-floating-padding-x;
-    overflow: hidden;
-    color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
-    text-align: start;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    pointer-events: none;
-    border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
-    transform-origin: 0 0;
-    @include transition($form-floating-transition);
-  }
-
-  > .form-control,
-  > .form-control-plaintext {
-    padding: $form-floating-padding-y $form-floating-padding-x;
-
-    &::placeholder {
-      color: transparent;
+    > .form-control,
+    > .form-control-plaintext,
+    > .form-select {
+      height: $form-floating-height;
+      min-height: $form-floating-height;
+      line-height: $form-floating-line-height;
     }
 
-    &:focus,
-    &:not(:placeholder-shown) {
+    > label {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      max-width: 100%;
+      height: 100%; // allow textareas
+      padding: $form-floating-padding-y $form-floating-padding-x;
+      overflow: hidden;
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
+      text-align: start;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: none;
+      border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
+      transform-origin: 0 0;
+      @include transition($form-floating-transition);
+    }
+
+    > .form-control,
+    > .form-control-plaintext {
+      padding: $form-floating-padding-y $form-floating-padding-x;
+
+      &::placeholder {
+        color: transparent;
+      }
+
+      &:focus,
+      &:not(:placeholder-shown) {
+        padding-top: $form-floating-input-padding-t;
+        padding-bottom: $form-floating-input-padding-b;
+      }
+      // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+      &:-webkit-autofill {
+        padding-top: $form-floating-input-padding-t;
+        padding-bottom: $form-floating-input-padding-b;
+      }
+    }
+
+    > .form-select {
       padding-top: $form-floating-input-padding-t;
       padding-bottom: $form-floating-input-padding-b;
+      padding-left: $form-floating-padding-x;
+    }
+
+    > .form-control:focus,
+    > .form-control:not(:placeholder-shown),
+    > .form-control-plaintext,
+    > .form-select {
+      ~ label {
+        transform: $form-floating-label-transform;
+      }
     }
     // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
-    &:-webkit-autofill {
-      padding-top: $form-floating-input-padding-t;
-      padding-bottom: $form-floating-input-padding-b;
+    > .form-control:-webkit-autofill {
+      ~ label {
+        transform: $form-floating-label-transform;
+      }
+    }
+    > textarea:focus,
+    > textarea:not(:placeholder-shown) {
+      ~ label::after {
+        position: absolute;
+        inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+        z-index: -1;
+        height: $form-floating-label-height;
+        content: "";
+        background-color: $input-bg;
+        @include border-radius($input-border-radius);
+      }
+    }
+    > textarea:disabled ~ label::after {
+      background-color: $input-disabled-bg;
     }
-  }
 
-  > .form-select {
-    padding-top: $form-floating-input-padding-t;
-    padding-bottom: $form-floating-input-padding-b;
-    padding-left: $form-floating-padding-x;
-  }
+    > .form-control-plaintext {
+      ~ label {
+        border-width: $input-border-width 0; // Required to properly position label text - as explained above
+      }
+    }
 
-  > .form-control:focus,
-  > .form-control:not(:placeholder-shown),
-  > .form-control-plaintext,
-  > .form-select {
-    ~ label {
-      transform: $form-floating-label-transform;
+    > :disabled ~ label,
+    > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
+      color: $form-floating-label-disabled-color;
     }
   }
-  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
-  > .form-control:-webkit-autofill {
-    ~ label {
-      transform: $form-floating-label-transform;
-    }
-  }
-  > textarea:focus,
-  > textarea:not(:placeholder-shown) {
-    ~ label::after {
-      position: absolute;
-      inset: $form-floating-padding-y ($form-floating-padding-x * .5);
-      z-index: -1;
-      height: $form-floating-label-height;
-      content: "";
-      background-color: $input-bg;
-      @include border-radius($input-border-radius);
-    }
-  }
-  > textarea:disabled ~ label::after {
-    background-color: $input-disabled-bg;
-  }
-
-  > .form-control-plaintext {
-    ~ label {
-      border-width: $input-border-width 0; // Required to properly position label text - as explained above
-    }
-  }
-
-  > :disabled ~ label,
-  > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
-    color: $form-floating-label-disabled-color;
-  }
 }
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 0496abc3c7..14be42f3d4 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -7,192 +7,194 @@
 @use "../mixins/transition" as *;
 @use "../mixins/color-mode" as *;
 
-//
-// Check/radio
-//
+@layer forms {
+  //
+  // Check/radio
+  //
 
-.form-check {
-  display: block;
-  min-height: $form-check-min-height;
-  padding-left: $form-check-padding-start;
-  margin-bottom: $form-check-margin-bottom;
-
-  .form-check-input {
-    float: left;
-    margin-left: $form-check-padding-start * -1;
-  }
-}
-
-.form-check-reverse {
-  padding-right: $form-check-padding-start;
-  padding-left: 0;
-  text-align: right;
-
-  .form-check-input {
-    float: right;
-    margin-right: $form-check-padding-start * -1;
-    margin-left: 0;
-  }
-}
-
-.form-check-input {
-  --#{$prefix}form-check-bg: #{$form-check-input-bg};
-
-  flex-shrink: 0;
-  width: $form-check-input-width;
-  height: $form-check-input-width;
-  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
-  vertical-align: top;
-  appearance: none;
-  background-color: var(--#{$prefix}form-check-bg);
-  background-image: var(--#{$prefix}form-check-bg-image);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  border: $form-check-input-border;
-  print-color-adjust: exact; // Keep themed appearance for print
-  @include transition($form-check-transition);
-
-  &[type="checkbox"] {
-    @include border-radius($form-check-input-border-radius);
-  }
-
-  &[type="radio"] {
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: $form-check-radio-border-radius;
-  }
-
-  &:active {
-    filter: $form-check-input-active-filter;
-  }
-
-  &:focus {
-    border-color: $form-check-input-focus-border;
-    outline: 0;
-    box-shadow: $form-check-input-focus-box-shadow;
-  }
-
-  &:checked {
-    background-color: $form-check-input-checked-bg-color;
-    border-color: $form-check-input-checked-border-color;
-
-    &[type="checkbox"] {
-      @if $enable-gradients {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
-      } @else {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
-      }
-    }
-
-    &[type="radio"] {
-      @if $enable-gradients {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
-      } @else {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
-      }
-    }
-  }
-
-  &[type="checkbox"]:indeterminate {
-    background-color: $form-check-input-indeterminate-bg-color;
-    border-color: $form-check-input-indeterminate-border-color;
-
-    @if $enable-gradients {
-      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
-    } @else {
-      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
-    }
-  }
-
-  &:disabled {
-    pointer-events: none;
-    filter: none;
-    opacity: $form-check-input-disabled-opacity;
-  }
-
-  // Use disabled attribute in addition of :disabled pseudo-class
-  // See: https://github.com/twbs/bootstrap/issues/28247
-  &[disabled],
-  &:disabled {
-    ~ .form-check-label {
-      cursor: default;
-      opacity: $form-check-label-disabled-opacity;
-    }
-  }
-}
-
-.form-check-label {
-  color: $form-check-label-color;
-  cursor: $form-check-label-cursor;
-}
-
-//
-// Switch
-//
-
-.form-switch {
-  padding-left: $form-switch-padding-start;
-
-  .form-check-input {
-    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
-
-    width: $form-switch-width;
-    margin-left: $form-switch-padding-start * -1;
-    background-image: var(--#{$prefix}form-switch-bg);
-    background-position: left center;
-    @include border-radius($form-switch-border-radius, 0);
-    @include transition($form-switch-transition);
-
-    &:focus {
-      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
-    }
-
-    &:checked {
-      background-position: $form-switch-checked-bg-position;
-
-      @if $enable-gradients {
-        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
-      } @else {
-        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
-      }
-    }
-  }
-
-  &.form-check-reverse {
-    padding-right: $form-switch-padding-start;
-    padding-left: 0;
+  .form-check {
+    display: block;
+    min-height: $form-check-min-height;
+    padding-left: $form-check-padding-start;
+    margin-bottom: $form-check-margin-bottom;
 
     .form-check-input {
-      margin-right: $form-switch-padding-start * -1;
+      float: left;
+      margin-left: $form-check-padding-start * -1;
+    }
+  }
+
+  .form-check-reverse {
+    padding-right: $form-check-padding-start;
+    padding-left: 0;
+    text-align: right;
+
+    .form-check-input {
+      float: right;
+      margin-right: $form-check-padding-start * -1;
       margin-left: 0;
     }
   }
-}
 
-.form-check-inline {
-  display: inline-block;
-  margin-right: $form-check-inline-margin-end;
-}
+  .form-check-input {
+    --#{$prefix}form-check-bg: #{$form-check-input-bg};
 
-.btn-check {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-  pointer-events: none;
+    flex-shrink: 0;
+    width: $form-check-input-width;
+    height: $form-check-input-width;
+    margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
+    vertical-align: top;
+    appearance: none;
+    background-color: var(--#{$prefix}form-check-bg);
+    background-image: var(--#{$prefix}form-check-bg-image);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    border: $form-check-input-border;
+    print-color-adjust: exact; // Keep themed appearance for print
+    @include transition($form-check-transition);
 
-  &[disabled],
-  &:disabled {
-    + .btn {
+    &[type="checkbox"] {
+      @include border-radius($form-check-input-border-radius);
+    }
+
+    &[type="radio"] {
+      // stylelint-disable-next-line property-disallowed-list
+      border-radius: $form-check-radio-border-radius;
+    }
+
+    &:active {
+      filter: $form-check-input-active-filter;
+    }
+
+    &:focus {
+      border-color: $form-check-input-focus-border;
+      outline: 0;
+      box-shadow: $form-check-input-focus-box-shadow;
+    }
+
+    &:checked {
+      background-color: $form-check-input-checked-bg-color;
+      border-color: $form-check-input-checked-border-color;
+
+      &[type="checkbox"] {
+        @if $enable-gradients {
+          --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
+        } @else {
+          --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
+        }
+      }
+
+      &[type="radio"] {
+        @if $enable-gradients {
+          --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
+        } @else {
+          --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
+        }
+      }
+    }
+
+    &[type="checkbox"]:indeterminate {
+      background-color: $form-check-input-indeterminate-bg-color;
+      border-color: $form-check-input-indeterminate-border-color;
+
+      @if $enable-gradients {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
+      } @else {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
+      }
+    }
+
+    &:disabled {
       pointer-events: none;
       filter: none;
-      opacity: $form-check-btn-check-disabled-opacity;
+      opacity: $form-check-input-disabled-opacity;
     }
-  }
-}
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .form-switch .form-check-input:not(:checked):not(:focus) {
-      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+    // Use disabled attribute in addition of :disabled pseudo-class
+    // See: https://github.com/twbs/bootstrap/issues/28247
+    &[disabled],
+    &:disabled {
+      ~ .form-check-label {
+        cursor: default;
+        opacity: $form-check-label-disabled-opacity;
+      }
+    }
+  }
+
+  .form-check-label {
+    color: $form-check-label-color;
+    cursor: $form-check-label-cursor;
+  }
+
+  //
+  // Switch
+  //
+
+  .form-switch {
+    padding-left: $form-switch-padding-start;
+
+    .form-check-input {
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+
+      width: $form-switch-width;
+      margin-left: $form-switch-padding-start * -1;
+      background-image: var(--#{$prefix}form-switch-bg);
+      background-position: left center;
+      @include border-radius($form-switch-border-radius, 0);
+      @include transition($form-switch-transition);
+
+      &:focus {
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
+      }
+
+      &:checked {
+        background-position: $form-switch-checked-bg-position;
+
+        @if $enable-gradients {
+          --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
+        } @else {
+          --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
+        }
+      }
+    }
+
+    &.form-check-reverse {
+      padding-right: $form-switch-padding-start;
+      padding-left: 0;
+
+      .form-check-input {
+        margin-right: $form-switch-padding-start * -1;
+        margin-left: 0;
+      }
+    }
+  }
+
+  .form-check-inline {
+    display: inline-block;
+    margin-right: $form-check-inline-margin-end;
+  }
+
+  .btn-check {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    pointer-events: none;
+
+    &[disabled],
+    &:disabled {
+      + .btn {
+        pointer-events: none;
+        filter: none;
+        opacity: $form-check-btn-check-disabled-opacity;
+      }
+    }
+  }
+
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      .form-switch .form-check-input:not(:checked):not(:focus) {
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+      }
     }
   }
 }
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 186b8eb9d0..2cd6e1b4c1 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -5,217 +5,220 @@
 @use "../mixins/box-shadow" as *;
 @use "../mixins/transition" as *;
 @use "../mixins/gradients" as *;
+
 //
 // General form controls (plus a few specific high-level interventions)
 //
 
-.form-control {
-  display: block;
-  width: 100%;
-  padding: $input-padding-y $input-padding-x;
-  font-family: $input-font-family;
-  @include font-size($input-font-size);
-  font-weight: $input-font-weight;
-  line-height: $input-line-height;
-  color: $input-color;
-  appearance: none; // Fix appearance for date inputs in Safari
-  background-color: $input-bg;
-  background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
+@layer forms {
+  .form-control {
+    display: block;
+    width: 100%;
+    padding: $input-padding-y $input-padding-x;
+    font-family: $input-font-family;
+    @include font-size($input-font-size);
+    font-weight: $input-font-weight;
+    line-height: $input-line-height;
+    color: $input-color;
+    appearance: none; // Fix appearance for date inputs in Safari
+    background-color: $input-bg;
+    background-clip: padding-box;
+    border: $input-border-width solid $input-border-color;
 
-  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @include border-radius($input-border-radius, 0);
+    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+    @include border-radius($input-border-radius, 0);
 
-  @include box-shadow($input-box-shadow);
-  @include transition($input-transition);
+    @include box-shadow($input-box-shadow);
+    @include transition($input-transition);
 
-  &[type="file"] {
-    overflow: hidden; // prevent pseudo element button overlap
+    &[type="file"] {
+      overflow: hidden; // prevent pseudo element button overlap
+
+      &:not(:disabled):not([readonly]) {
+        cursor: pointer;
+      }
+    }
+
+    // Customize the `:focus` state to imitate native WebKit styles.
+    &:focus {
+      color: $input-focus-color;
+      background-color: $input-focus-bg;
+      border-color: $input-focus-border-color;
+      outline: 0;
+      @if $enable-shadows {
+        @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: $input-focus-box-shadow;
+      }
+    }
+
+    &::-webkit-date-and-time-value {
+      // On Android Chrome, form-control's "width: 100%" makes the input width too small
+      // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+      //
+      // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
+      // Tested under iOS 16.2 / Safari 16.2
+      min-width: 85px; // Seems to be a good minimum safe width
+
+      // Add some height to date inputs on iOS
+      // https://github.com/twbs/bootstrap/issues/23307
+      // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+      // Multiply line-height by 1em if it has no unit
+      height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+
+      // Android Chrome type="date" is taller than the other inputs
+      // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
+      // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+      margin: 0;
+    }
+
+    // Prevent excessive date input height in Webkit
+    // https://github.com/twbs/bootstrap/issues/34433
+    &::-webkit-datetime-edit {
+      display: block;
+      padding: 0;
+    }
+
+    // Placeholder
+    &::placeholder {
+      color: $input-placeholder-color;
+      // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+      opacity: 1;
+    }
+
+    // Disabled inputs
+    //
+    // HTML5 says that controls under a fieldset > legend:first-child won't be
+    // disabled if the fieldset is disabled. Due to implementation difficulty, we
+    // don't honor that edge case; we style them as disabled anyway.
+    &:disabled {
+      color: $input-disabled-color;
+      background-color: $input-disabled-bg;
+      border-color: $input-disabled-border-color;
+      // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+      opacity: 1;
+    }
+
+    // File input buttons theming
+    &::file-selector-button {
+      padding: $input-padding-y $input-padding-x;
+      margin: (-$input-padding-y) (-$input-padding-x);
+      margin-inline-end: $input-padding-x;
+      color: $form-file-button-color;
+      @include gradient-bg($form-file-button-bg);
+      pointer-events: none;
+      border-color: inherit;
+      border-style: solid;
+      border-width: 0;
+      border-inline-end-width: $input-border-width;
+      border-radius: 0; // stylelint-disable-line property-disallowed-list
+      @include transition($btn-transition);
+    }
+
+    &:hover:not(:disabled):not([readonly])::file-selector-button {
+      background-color: $form-file-button-hover-bg;
+    }
+  }
+
+  // Readonly controls as plain text
+  //
+  // Apply class to a readonly input to make it appear like regular plain
+  // text (without any border, background color, focus indicator)
+
+  .form-control-plaintext {
+    display: block;
+    width: 100%;
+    padding: $input-padding-y 0;
+    margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+    line-height: $input-line-height;
+    color: $input-plaintext-color;
+    background-color: transparent;
+    border: solid transparent;
+    border-width: $input-border-width 0;
+
+    &:focus {
+      outline: 0;
+    }
+
+    &.form-control-sm,
+    &.form-control-lg {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+
+  // Form control sizing
+  //
+  // Build on `.form-control` with modifier classes to decrease or increase the
+  // height and font-size of form controls.
+  //
+  // Repeated in `_input_group.scss` to avoid Sass extend issues.
+
+  .form-control-sm {
+    min-height: $input-height-sm;
+    padding: $input-padding-y-sm $input-padding-x-sm;
+    @include font-size($input-font-size-sm);
+    @include border-radius($input-border-radius-sm);
+
+    &::file-selector-button {
+      padding: $input-padding-y-sm $input-padding-x-sm;
+      margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+      margin-inline-end: $input-padding-x-sm;
+    }
+  }
+
+  .form-control-lg {
+    min-height: $input-height-lg;
+    padding: $input-padding-y-lg $input-padding-x-lg;
+    @include font-size($input-font-size-lg);
+    @include border-radius($input-border-radius-lg);
+
+    &::file-selector-button {
+      padding: $input-padding-y-lg $input-padding-x-lg;
+      margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
+      margin-inline-end: $input-padding-x-lg;
+    }
+  }
+
+  // Make sure textareas don't shrink too much when resized
+  // https://github.com/twbs/bootstrap/pull/29124
+  // stylelint-disable selector-no-qualifying-type
+  textarea {
+    &.form-control {
+      min-height: $input-height;
+    }
+
+    &.form-control-sm {
+      min-height: $input-height-sm;
+    }
+
+    &.form-control-lg {
+      min-height: $input-height-lg;
+    }
+  }
+  // stylelint-enable selector-no-qualifying-type
+
+  .form-control-color {
+    width: $form-color-width;
+    height: $input-height;
+    padding: $input-padding-y;
 
     &:not(:disabled):not([readonly]) {
       cursor: pointer;
     }
-  }
 
-  // Customize the `:focus` state to imitate native WebKit styles.
-  &:focus {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
-    outline: 0;
-    @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-focus-box-shadow;
+    &::-moz-color-swatch {
+      border: 0 !important; // stylelint-disable-line declaration-no-important
+      @include border-radius($input-border-radius);
     }
-  }
 
-  &::-webkit-date-and-time-value {
-    // On Android Chrome, form-control's "width: 100%" makes the input width too small
-    // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
-    //
-    // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
-    // Tested under iOS 16.2 / Safari 16.2
-    min-width: 85px; // Seems to be a good minimum safe width
+    &::-webkit-color-swatch {
+      border: 0 !important; // stylelint-disable-line declaration-no-important
+      @include border-radius($input-border-radius);
+    }
 
-    // Add some height to date inputs on iOS
-    // https://github.com/twbs/bootstrap/issues/23307
-    // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
-    // Multiply line-height by 1em if it has no unit
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
-
-    // Android Chrome type="date" is taller than the other inputs
-    // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
-    // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
-    margin: 0;
-  }
-
-  // Prevent excessive date input height in Webkit
-  // https://github.com/twbs/bootstrap/issues/34433
-  &::-webkit-datetime-edit {
-    display: block;
-    padding: 0;
-  }
-
-  // Placeholder
-  &::placeholder {
-    color: $input-placeholder-color;
-    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-    opacity: 1;
-  }
-
-  // Disabled inputs
-  //
-  // HTML5 says that controls under a fieldset > legend:first-child won't be
-  // disabled if the fieldset is disabled. Due to implementation difficulty, we
-  // don't honor that edge case; we style them as disabled anyway.
-  &:disabled {
-    color: $input-disabled-color;
-    background-color: $input-disabled-bg;
-    border-color: $input-disabled-border-color;
-    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-    opacity: 1;
-  }
-
-  // File input buttons theming
-  &::file-selector-button {
-    padding: $input-padding-y $input-padding-x;
-    margin: (-$input-padding-y) (-$input-padding-x);
-    margin-inline-end: $input-padding-x;
-    color: $form-file-button-color;
-    @include gradient-bg($form-file-button-bg);
-    pointer-events: none;
-    border-color: inherit;
-    border-style: solid;
-    border-width: 0;
-    border-inline-end-width: $input-border-width;
-    border-radius: 0; // stylelint-disable-line property-disallowed-list
-    @include transition($btn-transition);
-  }
-
-  &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: $form-file-button-hover-bg;
+    &.form-control-sm { height: $input-height-sm; }
+    &.form-control-lg { height: $input-height-lg; }
   }
 }
-
-// Readonly controls as plain text
-//
-// Apply class to a readonly input to make it appear like regular plain
-// text (without any border, background color, focus indicator)
-
-.form-control-plaintext {
-  display: block;
-  width: 100%;
-  padding: $input-padding-y 0;
-  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
-  line-height: $input-line-height;
-  color: $input-plaintext-color;
-  background-color: transparent;
-  border: solid transparent;
-  border-width: $input-border-width 0;
-
-  &:focus {
-    outline: 0;
-  }
-
-  &.form-control-sm,
-  &.form-control-lg {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-// Form control sizing
-//
-// Build on `.form-control` with modifier classes to decrease or increase the
-// height and font-size of form controls.
-//
-// Repeated in `_input_group.scss` to avoid Sass extend issues.
-
-.form-control-sm {
-  min-height: $input-height-sm;
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
-  @include border-radius($input-border-radius-sm);
-
-  &::file-selector-button {
-    padding: $input-padding-y-sm $input-padding-x-sm;
-    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
-    margin-inline-end: $input-padding-x-sm;
-  }
-}
-
-.form-control-lg {
-  min-height: $input-height-lg;
-  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
-  @include border-radius($input-border-radius-lg);
-
-  &::file-selector-button {
-    padding: $input-padding-y-lg $input-padding-x-lg;
-    margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
-    margin-inline-end: $input-padding-x-lg;
-  }
-}
-
-// Make sure textareas don't shrink too much when resized
-// https://github.com/twbs/bootstrap/pull/29124
-// stylelint-disable selector-no-qualifying-type
-textarea {
-  &.form-control {
-    min-height: $input-height;
-  }
-
-  &.form-control-sm {
-    min-height: $input-height-sm;
-  }
-
-  &.form-control-lg {
-    min-height: $input-height-lg;
-  }
-}
-// stylelint-enable selector-no-qualifying-type
-
-.form-control-color {
-  width: $form-color-width;
-  height: $input-height;
-  padding: $input-padding-y;
-
-  &:not(:disabled):not([readonly]) {
-    cursor: pointer;
-  }
-
-  &::-moz-color-swatch {
-    border: 0 !important; // stylelint-disable-line declaration-no-important
-    @include border-radius($input-border-radius);
-  }
-
-  &::-webkit-color-swatch {
-    border: 0 !important; // stylelint-disable-line declaration-no-important
-    @include border-radius($input-border-radius);
-  }
-
-  &.form-control-sm { height: $input-height-sm; }
-  &.form-control-lg { height: $input-height-lg; }
-}
diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
index 81d9613615..9e69a9ddac 100644
--- a/scss/forms/_form-range.scss
+++ b/scss/forms/_form-range.scss
@@ -11,88 +11,90 @@
 // elements cannot be mixed. As such, there are no shared styles for focus or
 // active states on prefixed selectors.
 
-.form-range {
-  width: 100%;
-  height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
-  padding: 0; // Need to reset padding
-  appearance: none;
-  background-color: transparent;
-
-  &:focus {
-    outline: 0;
-
-    // Pseudo-elements must be split across multiple rulesets to have an effect.
-    // No box-shadow() mixin for focus accessibility.
-    &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
-    &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }
-  }
-
-  &::-moz-focus-outer {
-    border: 0;
-  }
-
-  &::-webkit-slider-thumb {
-    width: $form-range-thumb-width;
-    height: $form-range-thumb-height;
-    margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
+@layer forms {
+  .form-range {
+    width: 100%;
+    height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
+    padding: 0; // Need to reset padding
     appearance: none;
-    @include gradient-bg($form-range-thumb-bg);
-    border: $form-range-thumb-border;
-    @include border-radius($form-range-thumb-border-radius);
-    @include box-shadow($form-range-thumb-box-shadow);
-    @include transition($form-range-thumb-transition);
+    background-color: transparent;
 
-    &:active {
-      @include gradient-bg($form-range-thumb-active-bg);
+    &:focus {
+      outline: 0;
+
+      // Pseudo-elements must be split across multiple rulesets to have an effect.
+      // No box-shadow() mixin for focus accessibility.
+      &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
+      &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }
     }
-  }
 
-  &::-webkit-slider-runnable-track {
-    width: $form-range-track-width;
-    height: $form-range-track-height;
-    color: transparent; // Why?
-    cursor: $form-range-track-cursor;
-    background-color: $form-range-track-bg;
-    border-color: transparent;
-    @include border-radius($form-range-track-border-radius);
-    @include box-shadow($form-range-track-box-shadow);
-  }
-
-  &::-moz-range-thumb {
-    width: $form-range-thumb-width;
-    height: $form-range-thumb-height;
-    appearance: none;
-    @include gradient-bg($form-range-thumb-bg);
-    border: $form-range-thumb-border;
-    @include border-radius($form-range-thumb-border-radius);
-    @include box-shadow($form-range-thumb-box-shadow);
-    @include transition($form-range-thumb-transition);
-
-    &:active {
-      @include gradient-bg($form-range-thumb-active-bg);
+    &::-moz-focus-outer {
+      border: 0;
     }
-  }
-
-  &::-moz-range-track {
-    width: $form-range-track-width;
-    height: $form-range-track-height;
-    color: transparent;
-    cursor: $form-range-track-cursor;
-    background-color: $form-range-track-bg;
-    border-color: transparent; // Firefox specific?
-    @include border-radius($form-range-track-border-radius);
-    @include box-shadow($form-range-track-box-shadow);
-  }
-
-  &:disabled {
-    pointer-events: none;
 
     &::-webkit-slider-thumb {
-      background-color: $form-range-thumb-disabled-bg;
+      width: $form-range-thumb-width;
+      height: $form-range-thumb-height;
+      margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
+      appearance: none;
+      @include gradient-bg($form-range-thumb-bg);
+      border: $form-range-thumb-border;
+      @include border-radius($form-range-thumb-border-radius);
+      @include box-shadow($form-range-thumb-box-shadow);
+      @include transition($form-range-thumb-transition);
+
+      &:active {
+        @include gradient-bg($form-range-thumb-active-bg);
+      }
+    }
+
+    &::-webkit-slider-runnable-track {
+      width: $form-range-track-width;
+      height: $form-range-track-height;
+      color: transparent; // Why?
+      cursor: $form-range-track-cursor;
+      background-color: $form-range-track-bg;
+      border-color: transparent;
+      @include border-radius($form-range-track-border-radius);
+      @include box-shadow($form-range-track-box-shadow);
     }
 
     &::-moz-range-thumb {
-      background-color: $form-range-thumb-disabled-bg;
+      width: $form-range-thumb-width;
+      height: $form-range-thumb-height;
+      appearance: none;
+      @include gradient-bg($form-range-thumb-bg);
+      border: $form-range-thumb-border;
+      @include border-radius($form-range-thumb-border-radius);
+      @include box-shadow($form-range-thumb-box-shadow);
+      @include transition($form-range-thumb-transition);
+
+      &:active {
+        @include gradient-bg($form-range-thumb-active-bg);
+      }
+    }
+
+    &::-moz-range-track {
+      width: $form-range-track-width;
+      height: $form-range-track-height;
+      color: transparent;
+      cursor: $form-range-track-cursor;
+      background-color: $form-range-track-bg;
+      border-color: transparent; // Firefox specific?
+      @include border-radius($form-range-track-border-radius);
+      @include box-shadow($form-range-track-box-shadow);
+    }
+
+    &:disabled {
+      pointer-events: none;
+
+      &::-webkit-slider-thumb {
+        background-color: $form-range-thumb-disabled-bg;
+      }
+
+      &::-moz-range-thumb {
+        background-color: $form-range-thumb-disabled-bg;
+      }
     }
   }
 }
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 41f7103754..8b50e23fc1 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -11,78 +11,80 @@
 // Replaces the browser default select with a custom one, mostly pulled from
 // https://primer.github.io/.
 
-.form-select {
-  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+@layer forms {
+  .form-select {
+    --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
 
-  display: block;
-  width: 100%;
-  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
-  font-family: $form-select-font-family;
-  @include font-size($form-select-font-size);
-  font-weight: $form-select-font-weight;
-  line-height: $form-select-line-height;
-  color: $form-select-color;
-  appearance: none;
-  background-color: $form-select-bg;
-  background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
-  background-repeat: no-repeat;
-  background-position: $form-select-bg-position;
-  background-size: $form-select-bg-size;
-  border: $form-select-border-width solid $form-select-border-color;
-  @include border-radius($form-select-border-radius, 0);
-  @include box-shadow($form-select-box-shadow);
-  @include transition($form-select-transition);
+    display: block;
+    width: 100%;
+    padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
+    font-family: $form-select-font-family;
+    @include font-size($form-select-font-size);
+    font-weight: $form-select-font-weight;
+    line-height: $form-select-line-height;
+    color: $form-select-color;
+    appearance: none;
+    background-color: $form-select-bg;
+    background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
+    background-repeat: no-repeat;
+    background-position: $form-select-bg-position;
+    background-size: $form-select-bg-size;
+    border: $form-select-border-width solid $form-select-border-color;
+    @include border-radius($form-select-border-radius, 0);
+    @include box-shadow($form-select-box-shadow);
+    @include transition($form-select-transition);
 
-  &:focus {
-    border-color: $form-select-focus-border-color;
-    outline: 0;
-    @if $enable-shadows {
-      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $form-select-focus-box-shadow;
+    &:focus {
+      border-color: $form-select-focus-border-color;
+      outline: 0;
+      @if $enable-shadows {
+        @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: $form-select-focus-box-shadow;
+      }
+    }
+
+    &[multiple],
+    &[size]:not([size="1"]) {
+      padding-right: $form-select-padding-x;
+      background-image: none;
+    }
+
+    &:disabled {
+      color: $form-select-disabled-color;
+      background-color: $form-select-disabled-bg;
+      border-color: $form-select-disabled-border-color;
+    }
+
+    // Remove outline from select box in FF
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 $form-select-color;
     }
   }
 
-  &[multiple],
-  &[size]:not([size="1"]) {
-    padding-right: $form-select-padding-x;
-    background-image: none;
+  .form-select-sm {
+    padding-top: $form-select-padding-y-sm;
+    padding-bottom: $form-select-padding-y-sm;
+    padding-left: $form-select-padding-x-sm;
+    @include font-size($form-select-font-size-sm);
+    @include border-radius($form-select-border-radius-sm);
   }
 
-  &:disabled {
-    color: $form-select-disabled-color;
-    background-color: $form-select-disabled-bg;
-    border-color: $form-select-disabled-border-color;
+  .form-select-lg {
+    padding-top: $form-select-padding-y-lg;
+    padding-bottom: $form-select-padding-y-lg;
+    padding-left: $form-select-padding-x-lg;
+    @include font-size($form-select-font-size-lg);
+    @include border-radius($form-select-border-radius-lg);
   }
 
-  // Remove outline from select box in FF
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 $form-select-color;
-  }
-}
-
-.form-select-sm {
-  padding-top: $form-select-padding-y-sm;
-  padding-bottom: $form-select-padding-y-sm;
-  padding-left: $form-select-padding-x-sm;
-  @include font-size($form-select-font-size-sm);
-  @include border-radius($form-select-border-radius-sm);
-}
-
-.form-select-lg {
-  padding-top: $form-select-padding-y-lg;
-  padding-bottom: $form-select-padding-y-lg;
-  padding-left: $form-select-padding-x-lg;
-  @include font-size($form-select-font-size-lg);
-  @include border-radius($form-select-border-radius-lg);
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .form-select {
-      --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      .form-select {
+        --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+      }
     }
   }
 }
diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss
index 00ef046071..e267ad4502 100644
--- a/scss/forms/_form-text.scss
+++ b/scss/forms/_form-text.scss
@@ -1,13 +1,16 @@
 @use "../variables" as *;
 @use "../vendor/rfs" as *;
+
 //
 // Form text
 //
 
-.form-text {
-  margin-top: $form-text-margin-top;
-  @include font-size($form-text-font-size);
-  font-style: $form-text-font-style;
-  font-weight: $form-text-font-weight;
-  color: $form-text-color;
+@layer forms {
+  .form-text {
+    margin-top: $form-text-margin-top;
+    @include font-size($form-text-font-size);
+    font-style: $form-text-font-style;
+    font-weight: $form-text-font-weight;
+    color: $form-text-color;
+  }
 }
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 88fbc8a28a..155e02c855 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -8,131 +8,133 @@
 // Base styles
 //
 
-.input-group {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap; // For form validation feedback
-  align-items: stretch;
-  width: 100%;
-
-  > .form-control,
-  > .form-select,
-  > .form-floating {
-    position: relative; // For focus state's z-index
-    flex: 1 1 auto;
-    width: 1%;
-    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
-  }
-
-  // Bring the "active" form control to the top of surrounding elements
-  > .form-control:focus,
-  > .form-select:focus,
-  > .form-floating:focus-within {
-    z-index: 5;
-  }
-
-  // Ensure buttons are always above inputs for more visually pleasing borders.
-  // This isn't needed for `.input-group-text` since it shares the same border-color
-  // as our inputs.
-  .btn {
+@layer forms {
+  .input-group {
     position: relative;
-    z-index: 2;
+    display: flex;
+    flex-wrap: wrap; // For form validation feedback
+    align-items: stretch;
+    width: 100%;
 
-    &:focus {
+    > .form-control,
+    > .form-select,
+    > .form-floating {
+      position: relative; // For focus state's z-index
+      flex: 1 1 auto;
+      width: 1%;
+      min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+    }
+
+    // Bring the "active" form control to the top of surrounding elements
+    > .form-control:focus,
+    > .form-select:focus,
+    > .form-floating:focus-within {
       z-index: 5;
     }
-  }
-}
 
+    // Ensure buttons are always above inputs for more visually pleasing borders.
+    // This isn't needed for `.input-group-text` since it shares the same border-color
+    // as our inputs.
+    .btn {
+      position: relative;
+      z-index: 2;
 
-// Textual addons
-//
-// Serves as a catch-all element for any text or radio/checkbox input you wish
-// to prepend or append to an input.
-
-.input-group-text {
-  display: flex;
-  align-items: center;
-  padding: $input-group-addon-padding-y $input-group-addon-padding-x;
-  @include font-size($input-font-size); // Match inputs
-  font-weight: $input-group-addon-font-weight;
-  line-height: $input-line-height;
-  color: $input-group-addon-color;
-  text-align: center;
-  white-space: nowrap;
-  background-color: $input-group-addon-bg;
-  border: $input-border-width solid $input-group-addon-border-color;
-  @include border-radius($input-border-radius);
-}
-
-
-// Sizing
-//
-// Remix the default form control sizing classes into new ones for easier
-// manipulation.
-
-.input-group-lg > .form-control,
-.input-group-lg > .form-select,
-.input-group-lg > .input-group-text,
-.input-group-lg > .btn {
-  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
-  @include border-radius($input-border-radius-lg);
-}
-
-.input-group-sm > .form-control,
-.input-group-sm > .form-select,
-.input-group-sm > .input-group-text,
-.input-group-sm > .btn {
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
-  @include border-radius($input-border-radius-sm);
-}
-
-.input-group-lg > .form-select,
-.input-group-sm > .form-select {
-  padding-right: $form-select-padding-x + $form-select-indicator-padding;
-}
-
-
-// Rounded corners
-//
-// These rulesets must come after the sizing ones to properly override sm and lg
-// border-radius values when extending. They're more specific than we'd like
-// with the `.input-group >` part, but without it, we cannot override the sizing.
-
-// stylelint-disable-next-line no-duplicate-selectors
-.input-group {
-  &:not(.has-validation) {
-    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
-    > .dropdown-toggle:nth-last-child(n + 3),
-    > .form-floating:not(:last-child) > .form-control,
-    > .form-floating:not(:last-child) > .form-select {
-      @include border-end-radius(0);
+      &:focus {
+        z-index: 5;
+      }
     }
   }
 
-  &.has-validation {
-    > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
-    > .dropdown-toggle:nth-last-child(n + 4),
-    > .form-floating:nth-last-child(n + 3) > .form-control,
-    > .form-floating:nth-last-child(n + 3) > .form-select {
-      @include border-end-radius(0);
+
+  // Textual addons
+  //
+  // Serves as a catch-all element for any text or radio/checkbox input you wish
+  // to prepend or append to an input.
+
+  .input-group-text {
+    display: flex;
+    align-items: center;
+    padding: $input-group-addon-padding-y $input-group-addon-padding-x;
+    @include font-size($input-font-size); // Match inputs
+    font-weight: $input-group-addon-font-weight;
+    line-height: $input-line-height;
+    color: $input-group-addon-color;
+    text-align: center;
+    white-space: nowrap;
+    background-color: $input-group-addon-bg;
+    border: $input-border-width solid $input-group-addon-border-color;
+    @include border-radius($input-border-radius);
+  }
+
+
+  // Sizing
+  //
+  // Remix the default form control sizing classes into new ones for easier
+  // manipulation.
+
+  .input-group-lg > .form-control,
+  .input-group-lg > .form-select,
+  .input-group-lg > .input-group-text,
+  .input-group-lg > .btn {
+    padding: $input-padding-y-lg $input-padding-x-lg;
+    @include font-size($input-font-size-lg);
+    @include border-radius($input-border-radius-lg);
+  }
+
+  .input-group-sm > .form-control,
+  .input-group-sm > .form-select,
+  .input-group-sm > .input-group-text,
+  .input-group-sm > .btn {
+    padding: $input-padding-y-sm $input-padding-x-sm;
+    @include font-size($input-font-size-sm);
+    @include border-radius($input-border-radius-sm);
+  }
+
+  .input-group-lg > .form-select,
+  .input-group-sm > .form-select {
+    padding-right: $form-select-padding-x + $form-select-indicator-padding;
+  }
+
+
+  // Rounded corners
+  //
+  // These rulesets must come after the sizing ones to properly override sm and lg
+  // border-radius values when extending. They're more specific than we'd like
+  // with the `.input-group >` part, but without it, we cannot override the sizing.
+
+  // stylelint-disable-next-line no-duplicate-selectors
+  .input-group {
+    &:not(.has-validation) {
+      > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+      > .dropdown-toggle:nth-last-child(n + 3),
+      > .form-floating:not(:last-child) > .form-control,
+      > .form-floating:not(:last-child) > .form-select {
+        @include border-end-radius(0);
+      }
+    }
+
+    &.has-validation {
+      > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+      > .dropdown-toggle:nth-last-child(n + 4),
+      > .form-floating:nth-last-child(n + 3) > .form-control,
+      > .form-floating:nth-last-child(n + 3) > .form-select {
+        @include border-end-radius(0);
+      }
+    }
+
+    $validation-messages: "";
+    @each $state in map.keys($form-validation-states) {
+      $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
+    }
+
+    > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+      margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
+      @include border-start-radius(0);
+    }
+
+    > .form-floating:not(:first-child) > .form-control,
+    > .form-floating:not(:first-child) > .form-select {
+      @include border-start-radius(0);
     }
   }
-
-  $validation-messages: "";
-  @each $state in map.keys($form-validation-states) {
-    $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
-  }
-
-  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
-    @include border-start-radius(0);
-  }
-
-  > .form-floating:not(:first-child) > .form-control,
-  > .form-floating:not(:first-child) > .form-select {
-    @include border-start-radius(0);
-  }
 }
diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index e01eb5371c..3767813310 100644
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -1,38 +1,41 @@
 @use "../variables" as *;
 @use "../vendor/rfs" as *;
+
 //
 // Labels
 //
 
-.form-label {
-  margin-bottom: $form-label-margin-bottom;
-  @include font-size($form-label-font-size);
-  font-style: $form-label-font-style;
-  font-weight: $form-label-font-weight;
-  color: $form-label-color;
-}
+@layer forms {
+  .form-label {
+    margin-bottom: $form-label-margin-bottom;
+    @include font-size($form-label-font-size);
+    font-style: $form-label-font-style;
+    font-weight: $form-label-font-weight;
+    color: $form-label-color;
+  }
 
-// For use with horizontal and inline forms, when you need the label (or legend)
-// text to align with the form controls.
-.col-form-label {
-  padding-top: add($input-padding-y, $input-border-width);
-  padding-bottom: add($input-padding-y, $input-border-width);
-  margin-bottom: 0; // Override the `<legend>` default
-  @include font-size(inherit); // Override the `<legend>` default
-  font-style: $form-label-font-style;
-  font-weight: $form-label-font-weight;
-  line-height: $input-line-height;
-  color: $form-label-color;
-}
+  // For use with horizontal and inline forms, when you need the label (or legend)
+  // text to align with the form controls.
+  .col-form-label {
+    padding-top: add($input-padding-y, $input-border-width);
+    padding-bottom: add($input-padding-y, $input-border-width);
+    margin-bottom: 0; // Override the `<legend>` default
+    @include font-size(inherit); // Override the `<legend>` default
+    font-style: $form-label-font-style;
+    font-weight: $form-label-font-weight;
+    line-height: $input-line-height;
+    color: $form-label-color;
+  }
 
-.col-form-label-lg {
-  padding-top: add($input-padding-y-lg, $input-border-width);
-  padding-bottom: add($input-padding-y-lg, $input-border-width);
-  @include font-size($input-font-size-lg);
-}
+  .col-form-label-lg {
+    padding-top: add($input-padding-y-lg, $input-border-width);
+    padding-bottom: add($input-padding-y-lg, $input-border-width);
+    @include font-size($input-font-size-lg);
+  }
 
-.col-form-label-sm {
-  padding-top: add($input-padding-y-sm, $input-border-width);
-  padding-bottom: add($input-padding-y-sm, $input-border-width);
-  @include font-size($input-font-size-sm);
+  .col-form-label-sm {
+    padding-top: add($input-padding-y-sm, $input-border-width);
+    padding-bottom: add($input-padding-y-sm, $input-border-width);
+    @include font-size($input-font-size-sm);
+  }
 }
diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index b1d8f2e6e6..e8e7b6c802 100644
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -14,170 +14,172 @@
 // This mixin uses an `if()` technique to be compatible with Dart Sass
 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
 
-// scss-docs-start form-validation-mixins
-@mixin form-validation-state-selector($state) {
-  @if ($state == "valid" or $state == "invalid") {
-    .was-validated #{if(&, "&", "")}:#{$state},
-    #{if(&, "&", "")}.is-#{$state} {
-      @content;
-    }
-  } @else {
-    #{if(&, "&", "")}.is-#{$state} {
-      @content;
-    }
-  }
-}
-
-@mixin form-validation-state(
-  $state,
-  $color,
-  $icon,
-  $tooltip-color: color-contrast($color),
-  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
-  $border-color: $color
-) {
-  .#{$state}-feedback {
-    display: none;
-    width: 100%;
-    margin-top: $form-feedback-margin-top;
-    @include font-size($form-feedback-font-size);
-    font-style: $form-feedback-font-style;
-    color: $color;
-  }
-
-  .#{$state}-tooltip {
-    position: absolute;
-    top: 100%;
-    z-index: 5;
-    display: none;
-    max-width: 100%; // Contain to parent when possible
-    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
-    margin-top: .1rem;
-    @include font-size($form-feedback-tooltip-font-size);
-    line-height: $form-feedback-tooltip-line-height;
-    color: $tooltip-color;
-    background-color: $tooltip-bg-color;
-    @include border-radius($form-feedback-tooltip-border-radius);
-  }
-
-  @include form-validation-state-selector($state) {
-    ~ .#{$state}-feedback,
-    ~ .#{$state}-tooltip {
-      display: block;
+@layer forms {
+  // scss-docs-start form-validation-mixins
+  @mixin form-validation-state-selector($state) {
+    @if ($state == "valid" or $state == "invalid") {
+      .was-validated #{if(&, "&", "")}:#{$state},
+      #{if(&, "&", "")}.is-#{$state} {
+        @content;
+      }
+    } @else {
+      #{if(&, "&", "")}.is-#{$state} {
+        @content;
+      }
     }
   }
 
-  .form-control {
+  @mixin form-validation-state(
+    $state,
+    $color,
+    $icon,
+    $tooltip-color: color-contrast($color),
+    $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+    $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+    $border-color: $color
+  ) {
+    .#{$state}-feedback {
+      display: none;
+      width: 100%;
+      margin-top: $form-feedback-margin-top;
+      @include font-size($form-feedback-font-size);
+      font-style: $form-feedback-font-style;
+      color: $color;
+    }
+
+    .#{$state}-tooltip {
+      position: absolute;
+      top: 100%;
+      z-index: 5;
+      display: none;
+      max-width: 100%; // Contain to parent when possible
+      padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+      margin-top: .1rem;
+      @include font-size($form-feedback-tooltip-font-size);
+      line-height: $form-feedback-tooltip-line-height;
+      color: $tooltip-color;
+      background-color: $tooltip-bg-color;
+      @include border-radius($form-feedback-tooltip-border-radius);
+    }
+
     @include form-validation-state-selector($state) {
-      border-color: $border-color;
-
-      @if $enable-validation-icons {
-        padding-right: $input-height-inner;
-        background-image: escape-svg($icon);
-        background-repeat: no-repeat;
-        background-position: right $input-height-inner-quarter center;
-        background-size: $input-height-inner-half $input-height-inner-half;
-      }
-
-      &:focus {
-        border-color: $border-color;
-        @if $enable-shadows {
-          @include box-shadow($input-box-shadow, $focus-box-shadow);
-        } @else {
-          // Avoid using mixin so we can pass custom focus shadow properly
-          box-shadow: $focus-box-shadow;
-        }
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
       }
     }
-  }
 
-  // stylelint-disable-next-line selector-no-qualifying-type
-  textarea.form-control {
-    @include form-validation-state-selector($state) {
-      @if $enable-validation-icons {
-        padding-right: $input-height-inner;
-        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
-      }
-    }
-  }
-
-  .form-select {
-    @include form-validation-state-selector($state) {
-      border-color: $border-color;
-
-      @if $enable-validation-icons {
-        &:not([multiple]):not([size]),
-        &:not([multiple])[size="1"] {
-          --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
-          padding-right: $form-select-feedback-icon-padding-end;
-          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
-          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
-        }
-      }
-
-      &:focus {
-        border-color: $border-color;
-        @if $enable-shadows {
-          @include box-shadow($form-select-box-shadow, $focus-box-shadow);
-        } @else {
-          // Avoid using mixin so we can pass custom focus shadow properly
-          box-shadow: $focus-box-shadow;
-        }
-      }
-    }
-  }
-
-  .form-control-color {
-    @include form-validation-state-selector($state) {
-      @if $enable-validation-icons {
-        width: add($form-color-width, $input-height-inner);
-      }
-    }
-  }
-
-  .form-check-input {
-    @include form-validation-state-selector($state) {
-      border-color: $border-color;
-
-      &:checked {
-        background-color: $color;
-      }
-
-      &:focus {
-        box-shadow: $focus-box-shadow;
-      }
-
-      ~ .form-check-label {
-        color: $color;
-      }
-    }
-  }
-  .form-check-inline .form-check-input {
-    ~ .#{$state}-feedback {
-      margin-left: .5em;
-    }
-  }
-
-  .input-group {
-    > .form-control:not(:focus),
-    > .form-select:not(:focus),
-    > .form-floating:not(:focus-within) {
+    .form-control {
       @include form-validation-state-selector($state) {
-        @if $state == "valid" {
-          z-index: 3;
-        } @else if $state == "invalid" {
-          z-index: 4;
+        border-color: $border-color;
+
+        @if $enable-validation-icons {
+          padding-right: $input-height-inner;
+          background-image: escape-svg($icon);
+          background-repeat: no-repeat;
+          background-position: right $input-height-inner-quarter center;
+          background-size: $input-height-inner-half $input-height-inner-half;
+        }
+
+        &:focus {
+          border-color: $border-color;
+          @if $enable-shadows {
+            @include box-shadow($input-box-shadow, $focus-box-shadow);
+          } @else {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            box-shadow: $focus-box-shadow;
+          }
+        }
+      }
+    }
+
+    // stylelint-disable-next-line selector-no-qualifying-type
+    textarea.form-control {
+      @include form-validation-state-selector($state) {
+        @if $enable-validation-icons {
+          padding-right: $input-height-inner;
+          background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+        }
+      }
+    }
+
+    .form-select {
+      @include form-validation-state-selector($state) {
+        border-color: $border-color;
+
+        @if $enable-validation-icons {
+          &:not([multiple]):not([size]),
+          &:not([multiple])[size="1"] {
+            --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
+            padding-right: $form-select-feedback-icon-padding-end;
+            background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+            background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+          }
+        }
+
+        &:focus {
+          border-color: $border-color;
+          @if $enable-shadows {
+            @include box-shadow($form-select-box-shadow, $focus-box-shadow);
+          } @else {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            box-shadow: $focus-box-shadow;
+          }
+        }
+      }
+    }
+
+    .form-control-color {
+      @include form-validation-state-selector($state) {
+        @if $enable-validation-icons {
+          width: add($form-color-width, $input-height-inner);
+        }
+      }
+    }
+
+    .form-check-input {
+      @include form-validation-state-selector($state) {
+        border-color: $border-color;
+
+        &:checked {
+          background-color: $color;
+        }
+
+        &:focus {
+          box-shadow: $focus-box-shadow;
+        }
+
+        ~ .form-check-label {
+          color: $color;
+        }
+      }
+    }
+    .form-check-inline .form-check-input {
+      ~ .#{$state}-feedback {
+        margin-left: .5em;
+      }
+    }
+
+    .input-group {
+      > .form-control:not(:focus),
+      > .form-select:not(:focus),
+      > .form-floating:not(:focus-within) {
+        @include form-validation-state-selector($state) {
+          @if $state == "valid" {
+            z-index: 3;
+          } @else if $state == "invalid" {
+            z-index: 4;
+          }
         }
       }
     }
   }
-}
-// scss-docs-end form-validation-mixins
+  // scss-docs-end form-validation-mixins
 
 
-// scss-docs-start form-validation-states-loop
-@each $state, $data in $form-validation-states {
-  @include form-validation-state($state, $data...);
+  // scss-docs-start form-validation-states-loop
+  @each $state, $data in $form-validation-states {
+    @include form-validation-state($state, $data...);
+  }
+  // scss-docs-end form-validation-states-loop
 }
-// scss-docs-end form-validation-states-loop
diff --git a/scss/helpers/_clearfix.scss b/scss/helpers/_clearfix.scss
index e2d9a81f32..40e379f8e0 100644
--- a/scss/helpers/_clearfix.scss
+++ b/scss/helpers/_clearfix.scss
@@ -1,5 +1,7 @@
 @use "../mixins/clearfix" as *;
 
-.clearfix {
-  @include clearfix();
+@layer helpers {
+  .clearfix {
+    @include clearfix();
+  }
 }
diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
index 763c96ff7b..26b9d9cf87 100644
--- a/scss/helpers/_color-bg.scss
+++ b/scss/helpers/_color-bg.scss
@@ -3,9 +3,11 @@
 @use "../variables" as *;
 
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
-@each $color, $value in $theme-colors {
-  .text-bg-#{$color} {
-    color: color-contrast($value) if($enable-important-utilities, !important, null);
-    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+@layer helpers {
+  @each $color, $value in $theme-colors {
+    .text-bg-#{$color} {
+      color: color-contrast($value) if($enable-important-utilities, !important, null);
+      background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    }
   }
 }
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index e1af109bde..f419608381 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -3,32 +3,34 @@
 @use "../variables" as *;
 
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
-@each $color, $value in $theme-colors {
-  .link-#{$color} {
-    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+@layer helpers {
+  @each $color, $value in $theme-colors {
+    .link-#{$color} {
+      color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+      text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+      @if $link-shade-percentage != 0 {
+        &:hover,
+        &:focus {
+          $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+          color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+          text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+        }
+      }
+    }
+  }
+
+  // One-off special link helper as a bridge until v6
+  .link-body-emphasis {
+    color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+    text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
-        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+        color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+        text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
       }
     }
   }
 }
-
-// One-off special link helper as a bridge until v6
-.link-body-emphasis {
-  color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-  text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
-
-  @if $link-shade-percentage != 0 {
-    &:hover,
-    &:focus {
-      color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
-      text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
-    }
-  }
-}
diff --git a/scss/helpers/_focus-ring.scss b/scss/helpers/_focus-ring.scss
index 4162c46553..39b43704ea 100644
--- a/scss/helpers/_focus-ring.scss
+++ b/scss/helpers/_focus-ring.scss
@@ -1,7 +1,9 @@
 @use "../config" as *;
 
-.focus-ring:focus {
-  outline: 0;
-  // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
-  box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+@layer helpers {
+  .focus-ring:focus {
+    outline: 0;
+    // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+    box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+  }
 }
diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss
index c028a3b1cb..b1014e79ae 100644
--- a/scss/helpers/_icon-link.scss
+++ b/scss/helpers/_icon-link.scss
@@ -1,28 +1,31 @@
 @use "../config" as *;
 @use "../variables" as *;
 @use "../mixins/transition" as *;
-.icon-link {
-  display: inline-flex;
-  gap: $icon-link-gap;
-  align-items: center;
-  text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
-  text-underline-offset: $icon-link-underline-offset;
-  backface-visibility: hidden;
 
-  > .bi {
-    flex-shrink: 0;
-    width: $icon-link-icon-size;
-    height: $icon-link-icon-size;
-    fill: currentcolor;
-    @include transition($icon-link-icon-transition);
-  }
-}
+@layer helpers {
+  .icon-link {
+    display: inline-flex;
+    gap: $icon-link-gap;
+    align-items: center;
+    text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
+    text-underline-offset: $icon-link-underline-offset;
+    backface-visibility: hidden;
 
-.icon-link-hover {
-  &:hover,
-  &:focus-visible {
     > .bi {
-      transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
+      flex-shrink: 0;
+      width: $icon-link-icon-size;
+      height: $icon-link-icon-size;
+      fill: currentcolor;
+      @include transition($icon-link-icon-transition);
+    }
+  }
+
+  .icon-link-hover {
+    &:hover,
+    &:focus-visible {
+      > .bi {
+        transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
+      }
     }
   }
 }
diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss
index 7b251de3c1..4e67fdad55 100644
--- a/scss/helpers/_position.scss
+++ b/scss/helpers/_position.scss
@@ -5,37 +5,39 @@
 
 // Shorthand
 
-.fixed-top {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $zindex-fixed;
-}
+@layer helpers {
+  .fixed-top {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: $zindex-fixed;
+  }
 
-.fixed-bottom {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-fixed;
-}
+  .fixed-bottom {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $zindex-fixed;
+  }
 
-// Responsive sticky top and bottom
-@each $breakpoint in map.keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+  // Responsive sticky top and bottom
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    .sticky#{$infix}-top {
-      position: sticky;
-      top: 0;
-      z-index: $zindex-sticky;
-    }
+      .sticky#{$infix}-top {
+        position: sticky;
+        top: 0;
+        z-index: $zindex-sticky;
+      }
 
-    .sticky#{$infix}-bottom {
-      position: sticky;
-      bottom: 0;
-      z-index: $zindex-sticky;
+      .sticky#{$infix}-bottom {
+        position: sticky;
+        bottom: 0;
+        z-index: $zindex-sticky;
+      }
     }
   }
 }
diff --git a/scss/helpers/_stacks.scss b/scss/helpers/_stacks.scss
index 6cd237ae6d..36c4ccad70 100644
--- a/scss/helpers/_stacks.scss
+++ b/scss/helpers/_stacks.scss
@@ -1,15 +1,17 @@
-// scss-docs-start stacks
-.hstack {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  align-self: stretch;
-}
+@layer helpers {
+  // scss-docs-start stacks
+  .hstack {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: stretch;
+  }
 
-.vstack {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  align-self: stretch;
+  .vstack {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-self: stretch;
+  }
+  // scss-docs-end stacks
 }
-// scss-docs-end stacks
diff --git a/scss/helpers/_stretched-link.scss b/scss/helpers/_stretched-link.scss
index ec283094d0..c384d702da 100644
--- a/scss/helpers/_stretched-link.scss
+++ b/scss/helpers/_stretched-link.scss
@@ -4,14 +4,16 @@
 // Stretched link
 //
 
-.stretched-link {
-  &::#{$stretched-link-pseudo-element} {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: $stretched-link-z-index;
-    content: "";
+@layer helpers {
+  .stretched-link {
+    &::#{$stretched-link-pseudo-element} {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: $stretched-link-z-index;
+      content: "";
+    }
   }
 }
diff --git a/scss/helpers/_text-truncation.scss b/scss/helpers/_text-truncation.scss
index 082fa0cdac..fe96d911b9 100644
--- a/scss/helpers/_text-truncation.scss
+++ b/scss/helpers/_text-truncation.scss
@@ -1,7 +1,11 @@
 @use "../mixins/text-truncate" as *;
+
+//
 // Text truncation
 //
 
-.text-truncate {
-  @include text-truncate();
+@layer helpers {
+  .text-truncate {
+    @include text-truncate();
+  }
 }
diff --git a/scss/helpers/_visually-hidden.scss b/scss/helpers/_visually-hidden.scss
index ad6bf08845..0beb927d4c 100644
--- a/scss/helpers/_visually-hidden.scss
+++ b/scss/helpers/_visually-hidden.scss
@@ -4,7 +4,9 @@
 // Visually hidden
 //
 
-.visually-hidden,
-.visually-hidden-focusable:not(:focus):not(:focus-within) {
-  @include visually-hidden();
+@layer helpers {
+  .visually-hidden,
+  .visually-hidden-focusable:not(:focus):not(:focus-within) {
+    @include visually-hidden();
+  }
 }
diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss
index 15744ab8f4..0dfef6afeb 100644
--- a/scss/helpers/_vr.scss
+++ b/scss/helpers/_vr.scss
@@ -1,10 +1,12 @@
 @use "../variables" as *;
 
-.vr {
-  display: inline-block;
-  align-self: stretch;
-  width: $vr-border-width;
-  min-height: 1em;
-  background-color: currentcolor;
-  opacity: $hr-opacity;
+@layer helpers {
+  .vr {
+    display: inline-block;
+    align-self: stretch;
+    width: $vr-border-width;
+    min-height: 1em;
+    background-color: currentcolor;
+    opacity: $hr-opacity;
+  }
 }
diff --git a/scss/helpers/index.scss b/scss/helpers/index.scss
index 3df08ebe8d..d9b033aa99 100644
--- a/scss/helpers/index.scss
+++ b/scss/helpers/index.scss
@@ -1,11 +1,11 @@
-@import "clearfix";
-@import "color-bg";
-@import "colored-links";
-@import "focus-ring";
-@import "icon-link";
-@import "position";
-@import "stacks";
-@import "visually-hidden";
-@import "stretched-link";
-@import "text-truncation";
-@import "vr";
+@forward "clearfix";
+@forward "color-bg";
+@forward "colored-links";
+@forward "focus-ring";
+@forward "icon-link";
+@forward "position";
+@forward "stacks";
+@forward "visually-hidden";
+@forward "stretched-link";
+@forward "text-truncation";
+@forward "vr";
diff --git a/scss/layout/_containers.scss b/scss/layout/_containers.scss
index b4f5d6b10f..ac42be2bdb 100644
--- a/scss/layout/_containers.scss
+++ b/scss/layout/_containers.scss
@@ -16,37 +16,39 @@
   margin-left: auto;
 }
 
-@if $enable-container-classes {
-  // Single container class with breakpoint max-widths
-  .container,
-  // 100% wide container at all breakpoints
-  .container-fluid {
-    @include make-container();
-  }
-
-  // Responsive containers that are 100% wide until a breakpoint
-  @each $breakpoint, $container-max-width in $container-max-widths {
-    .container-#{$breakpoint} {
-      @extend .container-fluid;
+@layer layout {
+  @if $enable-container-classes {
+    // Single container class with breakpoint max-widths
+    .container,
+    // 100% wide container at all breakpoints
+    .container-fluid {
+      @include make-container();
     }
 
-    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-      %responsive-container-#{$breakpoint} {
-        max-width: $container-max-width;
+    // Responsive containers that are 100% wide until a breakpoint
+    @each $breakpoint, $container-max-width in $container-max-widths {
+      .container-#{$breakpoint} {
+        @extend .container-fluid;
       }
 
-      // Extend each breakpoint which is smaller or equal to the current breakpoint
-      $extend-breakpoint: true;
+      @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+        %responsive-container-#{$breakpoint} {
+          max-width: $container-max-width;
+        }
 
-      @each $name, $width in $grid-breakpoints {
-        @if ($extend-breakpoint) {
-          .container#{breakpoint-infix($name, $grid-breakpoints)} {
-            @extend %responsive-container-#{$breakpoint};
-          }
+        // Extend each breakpoint which is smaller or equal to the current breakpoint
+        $extend-breakpoint: true;
 
-          // Once the current breakpoint is reached, stop extending
-          @if ($breakpoint == $name) {
-            $extend-breakpoint: false;
+        @each $name, $width in $grid-breakpoints {
+          @if ($extend-breakpoint) {
+            .container#{breakpoint-infix($name, $grid-breakpoints)} {
+              @extend %responsive-container-#{$breakpoint};
+            }
+
+            // Once the current breakpoint is reached, stop extending
+            @if ($breakpoint == $name) {
+              $extend-breakpoint: false;
+            }
           }
         }
       }
diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss
index 7b66dba702..23513dde2e 100644
--- a/scss/utilities/_api.scss
+++ b/scss/utilities/_api.scss
@@ -6,50 +6,52 @@
 @use "../mixins/utilities" as *;
 @use "../utilities" as *;
 
-// Loop over each breakpoint
-@each $breakpoint in map.keys($grid-breakpoints) {
-
-  // Generate media query if needed
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    // Loop over each utility property
-    @each $key, $utility in $utilities {
-      // The utility can be disabled with `false`, thus check if the utility is a map first
-      // Only proceed if responsive media queries are enabled or if it's the base media query
-      @if type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
-        @include generate-utility($utility, $infix);
-      }
-    }
-  }
-}
-
-// RFS rescaling
-@media (min-width: $rfs-mq-value) {
+@layer utilities {
+  // Loop over each breakpoint
   @each $breakpoint in map.keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    @if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+    // Generate media query if needed
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
       // Loop over each utility property
       @each $key, $utility in $utilities {
         // The utility can be disabled with `false`, thus check if the utility is a map first
         // Only proceed if responsive media queries are enabled or if it's the base media query
-        @if type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
-          @include generate-utility($utility, $infix, true);
+        @if type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
+          @include generate-utility($utility, $infix);
+        }
+      }
+    }
+  }
+
+  // RFS rescaling
+  @media (min-width: $rfs-mq-value) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      @if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+        // Loop over each utility property
+        @each $key, $utility in $utilities {
+          // The utility can be disabled with `false`, thus check if the utility is a map first
+          // Only proceed if responsive media queries are enabled or if it's the base media query
+          @if type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
+            @include generate-utility($utility, $infix, true);
+          }
         }
       }
     }
   }
-}
 
 
-// Print utilities
-@media print {
-  @each $key, $utility in $utilities {
-    // The utility can be disabled with `false`, thus check if the utility is a map first
-    // Then check if the utility needs print styles
-    @if type-of($utility) == "map" and map.get($utility, print) == true {
-      @include generate-utility($utility, "-print");
+  // Print utilities
+  @media print {
+    @each $key, $utility in $utilities {
+      // The utility can be disabled with `false`, thus check if the utility is a map first
+      // Then check if the utility needs print styles
+      @if type-of($utility) == "map" and map.get($utility, print) == true {
+        @include generate-utility($utility, "-print");
+      }
     }
   }
 }