Update CHANGELOG.md

refactor: delete img
refactor: delete logos
2023-05-03 18:35:28 +03:00 · 2023-05-03 18:25:52 +03:00 · 2023-05-03 18:19:16 +03:00 · 2023-05-03 18:14:51 +03:00 · 2023-05-03 18:11:52 +03:00 · 2023-05-03 17:45:53 +03:00
147 changed files with 24546 additions and 19010 deletions
@@ -1,5 +1,45 @@
 # Change Log

+## [3.1.0] 2023-05-03
+### Updates & Improvements
+- update Bootstrap to v5.2.2
+- update Popper to v2.11.6
+- fix issues
+- update sidebar & navbar
+
+## [3.0.5] 2022-10-10
+### Updates & Improvements
+- update Bootstrap to v5.2.2
+- update Popper to v2.11.6
+- update `start-0` and `end-0` classes on RTL
+- fix perfectScrollbar issue on RTL
+- fix the NavTabs second active tab issue
+
+## [3.0.4] 2022-06-15
+### BugFixing
+- fix inputs on RTL
+- update <html> tag border
+
+## [3.0.3] 2022-06-08
+### Update and Improvements
+- update Bootstrap to v5.2.0-beta1
+- fix modal close button on docs
+- update color of `.form-control` on Dark Mode
+- update typo on card stats
+- fix Safari browser button styling issue
+- add sticky navbar option on Profile page
+- add link to Sign In page in navbar
+- update dropdown item color on hover - Dark Mode
+
+## [3.0.2] 2022-03-25
+### Updates
+- update SCSS folder
+
+## [3.0.1] 2022-03-07
+### Update and Improvements
+- fix running 'npm install' issue
+- fix SCSS compiling issues
+
 ## [3.0.0] 2021-10-19
 ### Refactor and Improvements
 - Update Bootstrap to v5.1.3
@@ -1,97 +1,89 @@
-# [Material Dashboard 2](http://demos.creative-tim.com/material-dashboard/pages/dashboard.html?ref=readme-md2) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/material-dashboard&text=Check%20Material%20Dashboard%202%20made%20by%20@CreativeTim%20#webdesign%20#dashboard%20#materialdesign%20#html%20https://www.creative-tim.com/product/material-dashboard)
+# [Material Dashboard 2](http://demos.creative-tim.com/material-dashboard/pages/dashboard.html?ref=readme-md2) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/material-dashboard&text=Check%20Material%20Dashboard%202%20made%20by%20@CreativeTim%20#webdesign%20#dashboard%20#materialdesign%20#html%20https://www.creative-tim.com/product/material-dashboard) [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/FhCJCaHdQa)

-![version](https://img.shields.io/badge/version-3.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/material-dashboard.svg)](https://github.com/creativetimofficial/material-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/material-dashboard.svg)](https://github.com/creativetimofficial/material-dashboard/issues?q=is%3Aissue+is%3Aclosed)
+![version](https://img.shields.io/badge/version-3.1.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/material-dashboard.svg)](https://github.com/creativetimofficial/material-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/material-dashboard.svg)](https://github.com/creativetimofficial/material-dashboard/issues?q=is%3Aissue+is%3Aclosed)

 ![Image](https://s3.amazonaws.com/creativetim_bucket/products/50/original/material-dashboard.jpg?1634648873)

-Most complex and innovative Dashboard Made by [Creative Tim](https://creative-tim.com/). Check our latest Free Bootstrap 5 Dashboard with a fresh, new design inspired by Google's Material Design 2.
+[Material Dashboard](https://www.creative-tim.com/product/material-dashboard) is a free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.

-Designed for those who like bold elements and beautiful websites. Made of hundred of elements, designed blocks and fully coded pages, Material Dashboard is ready to help you create stunning websites and webapps.
+Material Dashboard makes use of light, surface and movement. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.

-We created many examples for pages like Sign In, Profile and so on. Just choose between a Basic Design, an illustration or a cover and you are good to go!
+This product came as a result of users asking for a material dashboard after we released our successful [Material Kit](https://www.creative-tim.com/product/material-kit). We developed it based on your feedback and it is a powerful bootstrap admin dashboard, which allows you to build products like admin panels, content managements systems and CRMs.

-Material Dashboard 2 makes use of light, surface and movement. The general layout comes with two modes: Light & Dark. Inside the archive you will find multiple example pages on how to use all components. And, of course, every element is documented.
+Material Dashboard comes with 5 color filter choices for both the sidebar and the card headers (blue, green, orange, red and purple) and an option to have a background image on the sidebar.

-**Fully Coded Elements**
+Special thanks go to:
+- [Robert McIntosh](https://github.com/mouse0270/bootstrap-notify) for the notification system.
+- [Chartist](https://gionkunz.github.io/chartist-js/) for the wonderful charts.
+We are very excited to share this dashboard with you and we look forward to hearing your feedback!

-Material Dashboard 2 is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS files and classes.
-
-You will save a lot of time going from prototyping to full-functional code, because all elements are implemented.
-This Free Bootstrap 5 Dashboard is coming with prebuilt design blocks, so the development process is seamless,
-switching from our pages to the real website is very easy to be done.
-
-View [all components here](https://www.creative-tim.com/learning-lab/bootstrap/alerts/material-dashboard?ref=readme-md2).
-
-**Documentation built by Developers**
-
-Each element is well presented in a very complex documentation.
-You can read more about the <a href="https://www.creative-tim.com/learning-lab/bootstrap/overview/material-dashboard" target="_blank">documentation here</a>.
-
-**Example Pages**
-
-If you want to get inspiration or just show something directly to your clients,
-you can jump start your development with our pre-built example pages. You will be able
-to quickly set up the basic structure for your web project.
-View <a href="https://demos.creative-tim.com/material-dashboard/pages/dashboard.html" target="_blank">example pages here</a>.
-
-**HELPFUL LINKS**
-
- View <a href="https://github.com/creativetimofficial/material-dashboard" target="_blank">Github Repository</a>
- Check [Knowlegde Center Page](https://www.creative-tim.com/knowledge-center)
-
-#### Special thanks
-During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:
- [Bootstrap 5](https://www.getbootstrap.com)- Open source front end framework
- [Popper.js](https://popper.js.org/) - Kickass library used to manage poppers
-
-Let us know your thoughts below. And good luck with development!

 ## Table of Contents

-* [Versions](#versions)
-* [Demo](#demo)
-* [Quick Start](#quick-start)
-* [Documentation](#documentation)
-* [File Structure](#file-structure)
-* [Browser Support](#browser-support)
-* [Resources](#resources)
-* [Reporting Issues](#reporting-issues)
-* [Technical Support or Questions](#technical-support-or-questions)
-* [Licensing](#licensing)
-* [Useful Links](#useful-links)
+- [Material Dashboard 2  ](#material-dashboard-2--)
+  - [Table of Contents](#table-of-contents)
+  - [Versions](#versions)
+  - [Demo](#demo)
+  - [Quick start](#quick-start)
+  - [Documentation](#documentation)
+  - [File Structure](#file-structure)
+  - [Browser Support](#browser-support)
+  - [Resources](#resources)
+  - [Reporting Issues](#reporting-issues)
+  - [Upgrade to Premium version](#upgrade-to-premium-version)
+  - [Technical Support or Questions](#technical-support-or-questions)
+  - [Licensing](#licensing)
+  - [Useful Links](#useful-links)
+        - [Social Media](#social-media)
+
+

 ## Versions

-[<img src="https://s3.amazonaws.com/creativetim_bucket/github/html.png" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard?ref=readme-md2)
+[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/html-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/figma-logo.jpg" width="60" height="60" />](https://www.creative-tim.com/product/material-tailwind-dashboard-react) [<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-react)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/vue-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/vue-material-dashboard)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/angular-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-angular2)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-native-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-kit-react-native)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/laravel-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-laravel)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/vuetify-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/vuetify-material-dashboard)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/django-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-django)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/nextjs-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/nextjs-material-dashboard)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/flask-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-flask)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/aspnet-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-react-asp-net)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/nodejs-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-react-nodejs)
+
+
+| Bootstrap 5 | Bootstrap 4 | Bootstrap 3 | Dark HTML |
+| --- | --- | --- | --- |
+| [![Material Dashboard  HTML](https://s3.amazonaws.com/creativetim_bucket/products/50/original/material-dashboard.jpg?1634648873)](https://www.creative-tim.com/product/material-dashboard)  | [![Material Dashboard  Bootstrap 4](https://s3.amazonaws.com/creativetim_bucket/products/537/original/opt_md_thumbnail.jpeg?1634047548)](https://www.creative-tim.com/product/material-dashboard-bs4)  | [![Material Dashboard  Bootstrap 3](https://s3.amazonaws.com/creativetim_bucket/products/78/original/opt_mdp_thumbnail.jpg?1521133551)](https://www.creative-tim.com/product/material-dashboard-bs4)  | [![Material Dashboard Dark Edition](https://s3.amazonaws.com/creativetim_bucket/products/95/original/opt_mdb_thumbnail.jpg?1535551949)](https://www.creative-tim.com/product/material-dashboard-dark) |
+
+| React | Tailwind | Vue | Angular |
+| --- | --- | --- | --- |
+| [![Material Dashboard  React](https://s3.amazonaws.com/creativetim_bucket/products/488/original/material-tailwind-react-dashboard.jpg?1667367968)](https://www.creative-tim.com/product/material-tailwind-dashboard-react) | [![Material Tailwind Dashboard React](https://s3.amazonaws.com/creativetim_bucket/products/71/original/material-dashboard-react.jpg?1638950990)](https://www.creative-tim.com/product/material-dashboard-react) | [![Vue Material Dashboard](https://s3.amazonaws.com/creativetim_bucket/products/81/original/opt_md_vue_thumbnail.jpg?1534938464)](https://www.creative-tim.com/product/vue-material-dashboard)  | [![Material Dashboard  Angular](https://s3.amazonaws.com/creativetim_bucket/products/53/original/opt_md_angular_thumbnail.jpg?1551358074)](https://www.creative-tim.com/product/material-dashboard-angular2) |
+
+| Vuetify | React Native | Nextjs | Nodejs |
+| --- | --- | --- | ---  |
+| [![Material Dashboard  Vuetify](https://s3.amazonaws.com/creativetim_bucket/products/100/original/opt_md_vuetify_thumbnail.jpg)](https://www.creative-tim.com/product/vuetify-material-dashboard)  | [![React Native](https://s3.amazonaws.com/creativetim_bucket/products/144/original/opt_mkrn_thumbnail.jpg)](https://www.creative-tim.com/product/material-kit-react-native)  | [![Nextjs Material Dashboard](https://s3.amazonaws.com/creativetim_bucket/products/341/original/opt_md_nextjs_thumbnail.jpg)](https://www.creative-tim.com/product/nextjs-material-dashboard)  | [![Material Dashboard React Nodejs](https://s3.amazonaws.com/creativetim_bucket/products/157/original/react-material-dashboard-nodejs.jpg?1680251614)](https://www.creative-tim.com/product/material-dashboard-react-nodejs)
+
+| Laravel | Asp.NET | Django | Flask |
+| --- | --- | --- | ---  |
+| [![Material Dashboard Laravel](https://s3.amazonaws.com/creativetim_bucket/products/154/original/material-dashboard-laravel.jpg?1664460694)](https://www.creative-tim.com/product/material-dashboard-laravel) | [![Asp.NET](https://s3.amazonaws.com/creativetim_bucket/products/397/original/opt_md_aspnet_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-react-asp-net)  | [![Material Dashboard Django](https://s3.amazonaws.com/creativetim_bucket/products/337/original/opt_md_django_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-django)  | [![Material Dashboard Flask](https://s3.amazonaws.com/creativetim_bucket/products/338/original/opt_md_flask_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-flask)

-| HTML |
-| --- |
-| [![Material Dashboard HTML](https://s3.amazonaws.com/creativetim_bucket/products/50/original/material-dashboard.jpg?1634648873)](http://demos.creative-tim.com/material-dashboard/pages/dashboard.html?ref=readme-md2)

 ## Demo

- [Profile page](http://demos.creative-tim.com/material-dashboard/pages/profile.html?ref=readme-md2)
- [Sign in page](http://demos.creative-tim.com/material-dashboard/pages/sign-in.html?ref=readme-md2)
- [Sign up page](https://demos.creative-tim.com/material-dashboard/pages/sign-up.html?ref=readme-md2)
+- [Start page](https://demos.creative-tim.com/material-dashboard/examples/dashboard.html)
+- [User profile page](https://demos.creative-tim.com/material-dashboard/examples/user.html)
+- [Tables page ](https://demos.creative-tim.com/material-dashboard/examples/tables.html)
+- [Maps Page](https://demos.creative-tim.com/material-dashboard/examples/map.html)
+- [Notifications page](https://demos.creative-tim.com/material-dashboard/examples/notifications.html)
+
+[View More](https://demos.creative-tim.com/material-dashboard/examples/dashboard.html).

-[View More](https://demos.creative-tim.com/material-dashboard/pages/dashboard.html?ref=readme-md2).

 ## Quick start

-Quick start options:
+- `npm i material-dashboard`
+- Clone the repo: `git clone https://github.com/creativetimofficial/material-dashboard.git`.
+- [Download from Github](https://github.com/creativetimofficial/material-dashboard/archive/master.zip).
+- [Download from Creative Tim](https://www.creative-tim.com/product/material-dashboard).

- Download from [Creative Tim](https://www.creative-tim.com/product/material-dashboard?ref=readme-md2).
-
-## Terminal Commands
-
-1. Download and Install NodeJs from [NodeJs Official Page](https://nodejs.org/en/download/).
-2. Navigate to the root / directory and run npm install to install our local dependencies.

 ## Documentation
-The documentation for the Material Dashboard is hosted at our [website](https://www.creative-tim.com/learning-lab/bootstrap/overview/material-dashboard?ref=readme-md2).
+The documentation for the Material Dashboard is hosted at our [website](https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html).

-### What's included

+## File Structure
 Within the download you'll find the following directories and files:

 ```
@@ -117,60 +109,65 @@ material-dashboard
    ├── package.json
 ```

+
 ## Browser Support

 At present, we officially aim to support the last two versions of the following browsers:

 <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/chrome.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/firefox.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/edge.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/safari.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/opera.png" width="64" height="64">

+
+
 ## Resources
- [Live Preview](https://demos.creative-tim.com/material-dashboard/pages/dashboard.html?ref=readme-md2)
- [Download Page](https://www.creative-tim.com/product/material-dashboard?ref=readme-md2)
- Documentation is [here](https://www.creative-tim.com/learning-lab/bootstrap/overview/material-dashboard?ref=readme-md2)
- [License Agreement](https://www.creative-tim.com/license?ref=readme-md2)
- [Support](https://www.creative-tim.com/contact-us?ref=readme-md2)
+- Demo: <https://demos.creative-tim.com/material-dashboard/pages/dashboard.html>
+- Download Page: <https://www.creative-tim.com/product/material-dashboard>
+- Documentation: <https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html>
+- License Agreement: <https://www.creative-tim.com/license>
+- PRO Version: <https://www.creative-tim.com/product/material-dashboard-pro>
+- Support: <https://www.creative-tim.com/contact-us>
 - Issues: [Github Issues Page](https://github.com/creativetimofficial/material-dashboard/issues)
+- [Material Kit](https://www.creative-tim.com/product/material-kit?ref=github-md-free) - For Front End Development

 ## Reporting Issues
+
 We use GitHub Issues as the official bug tracker for the Material Dashboard. Here are some advices for our users that want to report an issue:

-1. Make sure that you are using the latest version of the Material Dashboard 2. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/product/material-dashboard?ref=readme-md2).
+1. Make sure that you are using the latest version of the Material Dashboard. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/).
 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

+## Upgrade to Premium version
+
+Are you looking for more components? Please check our Premium Version of Material Dashboard [here](https://www.creative-tim.com/product/material-dashboard-pro/)
+
 ## Technical Support or Questions

-If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-md2) instead of opening an issue.
+If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us) instead of opening an issue.
+
+

 ## Licensing

- Copyright 2021 [Creative Tim](https://www.creative-tim.com?ref=readme-md2)
- Creative Tim [license](https://www.creative-tim.com/license?ref=readme-md2)
+- Copyright 2023 Creative Tim (https://www.creative-tim.com/)
+
+- Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
+
+

 ## Useful Links

 - [More products](https://www.creative-tim.com/templates?ref=readme-sudp) from Creative Tim
-
 - [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
-
 - [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-sudp) from Creative Tim
-
 - [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-sudp) (earn money)
-
 - [Bundles](https://www.creative-tim.com/bundles)
-
 - [Material Design](https://www.creative-tim.com/design-system/material)
-
 - [Get Discount](https://www.creative-tim.com/coupon)

 ##### Social Media

 Twitter: <https://twitter.com/CreativeTim>
-
 Facebook: <https://www.facebook.com/CreativeTim>
-
 Dribbble: <https://dribbble.com/creativetim>
-
 TikTok: <https://tiktok.com/@creative.tim>
-
 Instagram: <https://instagram.com/creativetimofficial>
@@ -1,3 +1,17 @@
+// =========================================================
+// Material Dashboard 2 - v3.1.0
+// =========================================================
+
+// Product Page: https://www.creative-tim.com/product/material-dashboard
+// Copyright 2023 Creative Tim (https://www.creative-tim.com)
+// Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
+
+// Coded by www.creative-tim.com
+
+// =========================================================
+
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
 "use strict";
 (function() {
  var isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
@@ -15,7 +29,7 @@
    };

    if (document.getElementsByClassName('navbar-collapse')[0]) {
-      var fixedplugin = document.querySelector('.navbar-collapse');
+      var fixedplugin = document.querySelector('.navbar:not(.navbar-expand-lg) .navbar-collapse');
      var ps2 = new PerfectScrollbar(fixedplugin);
    };

@@ -619,18 +633,20 @@ function toggleSidenav() {

 let referenceButtons = document.querySelector('[data-class]');

-window.addEventListener("resize", navbarColorOnResize);
+if (sidenav) {
+  window.addEventListener("resize", navbarColorOnResize);

-function navbarColorOnResize() {
-  if (window.innerWidth > 1200) {
-    if (referenceButtons.classList.contains('active') && referenceButtons.getAttribute('data-class') === 'bg-transparent') {
-      sidenav.classList.remove('bg-white');
+  function navbarColorOnResize() {
+    if (window.innerWidth > 1200) {
+      if (referenceButtons?.classList.contains('active') && referenceButtons?.getAttribute('data-class') === 'bg-transparent') {
+        sidenav.classList.remove('bg-white');
+      } else {
+        sidenav.classList.add('bg-white');
+      }
    } else {
      sidenav.classList.add('bg-white');
+      sidenav.classList.remove('bg-transparent');
    }
-  } else {
-    sidenav.classList.add('bg-white');
-    sidenav.classList.remove('bg-transparent');
  }
 }

@@ -806,4 +822,55 @@ function darkMode(el) {
    }
    el.removeAttribute("checked");
  }
-};
+};
+
+
+// side bullets
+
+const indicators = document.querySelectorAll(".indicator");
+const sections = document.querySelectorAll("section");
+
+if (indicators) {
+  const resetCurrentActiveIndicator = () => {
+    const activeIndicator = document.querySelector(".indicator.active");
+    if (activeIndicator) {
+      activeIndicator.classList.remove("active");
+    }
+  };
+
+  const onSectionLeavesViewport = (section) => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            resetCurrentActiveIndicator();
+            const element = entry.target;
+            const indicator = document.querySelector(`a[href='#${element.id}']`);
+            indicator.classList.add("active");
+            return;
+          }
+        });
+      }, {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.75
+      }
+    );
+    observer.observe(section);
+  };
+
+  indicators.forEach((indicator) => {
+    indicator.addEventListener("click", function(event) {
+      event.preventDefault();
+      document
+        .querySelector(this.getAttribute("href"))
+        .scrollIntoView({
+          behavior: "smooth"
+        });
+      resetCurrentActiveIndicator();
+      this.classList.add("active");
+    });
+  });
+
+  sections.forEach(onSectionLeavesViewport);
+}
@@ -0,0 +1 @@
+var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,s=arguments.length;a<s;a++)for(var n in i=arguments[a])Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var s=this;this.target=t,this.endVal=i,this.options=a,this.version="2.0.7",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){s.startTime||(s.startTime=t);var i=t-s.startTime;s.remaining=s.duration-i,s.useEasing?s.countDown?s.frameVal=s.startVal-s.easingFn(i,0,s.startVal-s.endVal,s.duration):s.frameVal=s.easingFn(i,s.startVal,s.endVal-s.startVal,s.duration):s.countDown?s.frameVal=s.startVal-(s.startVal-s.endVal)*(i/s.duration):s.frameVal=s.startVal+(s.endVal-s.startVal)*(i/s.duration),s.countDown?s.frameVal=s.frameVal<s.endVal?s.endVal:s.frameVal:s.frameVal=s.frameVal>s.endVal?s.endVal:s.frameVal,s.frameVal=Number(s.frameVal.toFixed(s.options.decimalPlaces)),s.printValue(s.frameVal),i<s.duration?s.rAF=requestAnimationFrame(s.count):null!==s.finalEndVal?s.update(s.finalEndVal):s.callback&&s.callback()},this.formatNumber=function(t){var i,a,n,e,r,o=t<0?"-":"";if(i=Math.abs(t).toFixed(s.options.decimalPlaces),n=(a=(i+="").split("."))[0],e=a.length>1?s.options.decimal+a[1]:"",s.options.useGrouping){r="";for(var l=0,h=n.length;l<h;++l)0!==l&&l%3==0&&(r=s.options.separator+r),r=n[h-l-1]+r;n=r}return s.options.numerals&&s.options.numerals.length&&(n=n.replace(/[0-9]/g,function(t){return s.options.numerals[+t]}),e=e.replace(/[0-9]/g,function(t){return s.options.numerals[+t]})),o+s.options.prefix+n+e+s.options.suffix},this.easeOutExpo=function(t,i,a,s){return a*(1-Math.pow(2,-10*t/s))*1024/1023+i},this.options=__assign(__assign({},this.defaults),a),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined"}return t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var a=this.countDown?1:-1;this.endVal=t+a*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();
@@ -1,14 +1,14 @@
 // =========================================================
-// * Material Dashboard - v3.0.0
+// * Material Dashboard 2 - v3.1.0
 // =========================================================
-//
+
 // * Product Page: https://www.creative-tim.com/product/material-dashboard
-// * Copyright 2021 Creative Tim (https://www.creative-tim.com)
-//
+// * Copyright 2023 Creative Tim (https://www.creative-tim.com)
+
 // Coded by www.creative-tim.com
-//
+
 // =========================================================
-//
+
 // * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

 // Bootstrap Functions
@@ -1,28 +0,0 @@
-.accordion {
-  .accordion-button {
-    margin: 0 auto;
-    font-size: inherit !important;
-  }
-
-  div {
-    button[aria-expanded='true'] {
-      .collapse-close {
-        display: none;
-      }
-
-      .collapse-open {
-        display: block;
-      }
-    }
-
-    button[aria-expanded='false'] {
-      .collapse-open {
-        display: none;
-      }
-
-      .collapse-close {
-        display: block;
-      }
-    }
-  }
-}
@@ -32,7 +32,7 @@


  &.avatar-raised {
-    margin-top: -($avatar-height / 2);
+    margin-top: -$avatar-height * 0.5;
  }

  &.avatar-scale-up:hover {
@@ -56,7 +56,7 @@
 	height: $avatar-xxl-height !important;

  &.avatar-raised {
-    margin-top: -($avatar-xxl-height / 2);
+    margin-top: -$avatar-xxl-height * 0.5;
  }
 }

@@ -65,7 +65,7 @@
 	height: $avatar-xl-height !important;

  &.avatar-raised {
-    margin-top: -($avatar-xl-height / 2);
+    margin-top: -$avatar-xl-height * 0.5;
  }
 }

@@ -75,7 +75,7 @@
 	font-size: $font-size-sm;

  &.avatar-raised {
-    margin-top: -($avatar-lg-height / 2);
+    margin-top: -$avatar-lg-height * 0.5;
  }
 }

@@ -85,7 +85,7 @@
 	font-size: $font-size-sm;

  &.avatar-raised {
-    margin-top: -($avatar-sm-height / 2);
+    margin-top: -$avatar-sm-height * 0.5;
  }
 }

@@ -95,7 +95,7 @@
 	font-size: $font-size-xs;

  &.avatar-raised {
-    margin-top: -($avatar-xs-height / 2);
+    margin-top: -$avatar-xs-height * 0.5;
  }
 }

@@ -1,19 +0,0 @@
-.bg-primary-soft{
-  background: rgba($primary-gradient, .03);
-}
-
-.bg-info-soft{
-  background: rgba($info-gradient, .03);
-}
-
-.bg-success-soft{
-  background: rgba($success-gradient, .03);
-}
-
-.bg-warning-soft{
-  background: rgba($warning-gradient, .03);
-}
-
-.bg-danger-soft{
-  background: rgba($danger-gradient, .03);
-}
@@ -6,6 +6,7 @@
  background-position-x: $btn-background-position-x;
  position: relative;
  overflow: hidden;
+  -webkit-appearance: none;

  &:not([class*="btn-outline-"]) {
    border: 0;
@@ -1,4 +0,0 @@
-@import 'cards/card-blog';
-@import 'cards/card-horizontal';
-@import 'cards/card-profile';
-@import 'cards/card-pricing';
@@ -1,5 +0,0 @@
-// Badges
-@import "badges/badge";
-@import "badges/badge-circle";
-@import "badges/badge-dot";
-@import "badges/badge-floating";
@@ -5,6 +5,12 @@
    background-color: $dark-version-bg-color !important;
  }

+  &.virtual-reality {
+    > div {
+      background-image: none !important;
+    }
+  }
+
  .sidenav {
    background: $dark-version-sidenav-bg-color !important;

@@ -56,6 +62,21 @@
        }
      }
    }
+
+    &.bg-white {
+      .collapse {
+        .nav-item {
+          .nav-link {
+            &.active.text-dark {
+              i,
+              .nav-link-text {
+                color: $dark !important;
+              }
+            }
+          }
+        }
+      }
+    }
  }

  .fixed-plugin {
@@ -73,7 +94,26 @@
  }

  .bg-gradient-dark {
-    background-image: linear-gradient(195deg, $dark-gradient-dark, $dark-gradient-state-dark);
+    background-image: linear-gradient(195deg, $dark-gradient-dark, $dark-gradient-state-dark) !important;
+  }
+
+  .dropdown {
+    .dropdown-menu {
+      &:before {
+        color: $dark-version-card-bg-color;
+      }
+
+      .dropdown-item {
+        &:hover,
+        &:focus {
+          background-color: $dark-version-bg-color !important;
+        }
+        i,
+        .material-icons {
+          color: $white;
+        }
+      }
+    }
  }

  .card,
@@ -231,6 +271,9 @@
    color: $light;
  }

+  .form-control {
+    color: $dark-version-body-color !important;
+  }
 }

 body.dark-version {
@@ -1,31 +0,0 @@
-// MultiLevel Dropdown Style
-
-.dropdown-menu li {
-  position: relative;
-}
-
-// End MultiLevel Dropdown Style
-
-.dropdown-image {
-  background-size: cover;
-}
-
-@include media-breakpoint-up(lg) {
-  .dropdown-xl {
-    min-width: $dropdown-xl-min-width;
-  }
-
-  .dropdown-lg {
-    min-width: $dropdown-lg-min-width;
-  }
-
-  .dropdown-md {
-    min-width: $dropdown-md-min-width;
-  }
-}
-
-@include media-breakpoint-down(xl) {
- .dropdown-lg-responsive {
-   min-width: $dropdown-lg-width-responsive;
- }
-}
@@ -1,73 +0,0 @@
-.floating-man {
-  width: $floating-man-width;
-}
-
-.fadeIn1 {
-  animation-duration: $fade-in-1-animation-duration;
-}
-.fadeIn2 {
-  animation-duration: $fade-in-2-animation-duration;
-}
-.fadeIn3 {
-  animation-duration: $fade-in-3-animation-duration;
-}
-.fadeIn4 {
-  animation-duration: $fade-in-4-animation-duration;
-}
-.fadeIn5 {
-  animation-duration: $fade-in-5-animation-duration;
-}
-.fadeIn1,
-.fadeIn2,
-.fadeIn3,
-.fadeIn4,
-.fadeIn5 {
-  animation-fill-mode: both;
-}
-.fadeInBottom {
-  animation-name: $fade-in-animation-name;
-}
-
-@keyframes fadeInBottom {
-  from {
-    opacity: 0;
-    transform: $fade-in-bottom-transform;
-  }
-  to {
-    opacity: 1
-  }
-}
-
-
-
-
-// Headers
-
-.header-rounded-images {
-  .shape-1 {
-    width: $shape-1-width;
-    left: $shape-1-left;
-  }
-
-  .shape-2 {
-    width: $shape-2-width;
-    left: $shape-2-left;
-  }
-
-  .shape-3 {
-    width: $shape-3-width;
-    margin-top: $shape-3-left;
-  }
-
-  .img-1 {
-    right: $shape-img-1-right;
-    width: $shape-img-1-width;
-    margin-top: $shape-img-1-margin-top;
-  }
-
-  .img-2 {
-    left: $shape-img-2-left;
-    width: $shape-img-2-width;
-    margin-top: $shape-img-2-margin-top;
-  }
-}
@@ -12,7 +12,7 @@


@each $prop, $value in $theme-colors {
-  &.bg-gradient-faded-#{$prop}-vertical{
+  .bg-gradient-faded-#{$prop}-vertical{
    background-image: radial-gradient(200px circle at 50% 70%, rgba($value, .3) 0, $value 100%);
  }
 }
@@ -1,25 +0,0 @@
-// Checklist item
-// contains the checklist entry info and checkbox
-
-.checklist-item {
-    &:before {
-        content: "";
-        position: absolute;
-        width: 3px;
-        height: 100%;
-        top: 0;
-        left: 0;
-        background-color: $primary;
-        border-radius: $border-radius-sm;
-    }
-}
-
-// Color variations
-
-@each $color, $value in $theme-colors {
-    .checklist-item-#{$color} {
-        &:before {
-            background-color: $value;
-        }
-    }
-}
@@ -1,244 +0,0 @@
-
-// Perspective effect
-.change-perspective {
-  transform: $transform-perspective;
-}
-
-.change-perspective-inverse {
-  transform: $transform-perspective-inverse;
-}
-// Device Wrapper
-.device-wrapper {
-  border-radius: $device-wrapper-radius;
-  box-shadow: $device-wrapper-box-shadow;
-}
-
-// sidebar caret RTL
-.rotate-caret {
-  .collapse {
-    .nav-link:after {
-      margin-right: auto;
-      margin-left: 0;
-    }
-  }
-}
-
-.z-index2 {
-  z-index: $z-index2;
-}
-@keyframes gradient {
-  0% {
-    background-position: 0 50%;
-  }
-
-  50% {
-    background-position: 100% 50%;
-  }
-
-  100% {
-    background-position: 0 50%;
-  }
-}
-// Colored Shadow on Cards images
-.colored-shadow {
-  transform: scale($colored-shadow-scale);
-  top: $colored-shadow-top;
-  filter: blur($colored-shadow-blur);
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-size: cover;
-  z-index: -1;
-
-  &.rounded {
-    border-radius: 50% !important;
-  }
-
-  &.avatar-xs {
-    transform: scale($colored-shadow-scale-avatar);
-    width: $avatar-xs-width;
-    height: $avatar-xs-height;
-  }
-
-  &.avatar-sm {
-    transform: scale($colored-shadow-scale-avatar);
-    width: $avatar-sm-width;
-    height: $avatar-sm-height;
-  }
-
-  &.avatar-lg {
-    transform: scale($colored-shadow-scale-avatar);
-    width: $avatar-lg-width;
-    height: $avatar-lg-height;
-  }
-
-  &.avatar-xl {
-    transform: scale($colored-shadow-scale-avatar);
-    width: $avatar-xl-width;
-    height: $avatar-xl-height;
-  }
-
-  &.avatar-xxl {
-    transform: scale($colored-shadow-scale-avatar);
-    width: $avatar-xxl-width;
-    height: $avatar-xxl-height;
-  }
-}
-
-// Width in PX
-.width-32-px {
-  width: $width-32-px;
-}
-
-.width-48-px {
-  width: $width-48-px;
-}
-
-.width-64-px {
-  width: $width-64-px;
-}
-
-// Animated shapes
-.animated-blur {
-  filter: blur(40px);
-}
-
-.animated-blur-1 {
-  animation: animation-blur-one 8s infinite;
-}
-
-.animated-blur-2 {
-  animation: animation-blur-one 4s infinite;
-}
-
-.animated-blur-3 {
-  animation: animation-blur-two 6s infinite;
-}
-
-.animated-blur-4 {
-  animation: animation-blur-two 5s infinite;
-}
-@keyframes animation-blur-one {
-  0% {
-    transform: scale(.8);
-  }
-
-  25% {
-    transform: translateX(10%);
-  }
-
-  50% {
-    transform: scale(1.2);
-  }
-
-  75% {
-    transform: translateX(5%);
-  }
-
-  100% {
-    transform: scale(.8);
-  }
-}
-@keyframes animation-blur-two {
-  0% {
-    transform: scale(1.2);
-  }
-
-  50% {
-    transform: scale(.8);
-  }
-
-  100% {
-    transform: scale(1.2);
-  }
-}
-
-// Text with border
-.text-border {
-  &:after,
-  &:before {
-    content: "";
-    display: $text-border-display;
-    width: $text-border-width;
-    height: $text-border-height;
-    position: $text-border-position;
-    vertical-align: $text-border-vertical-align;
-  }
-
-  &:after{
-    background: $text-border-bg-color-after;
-  }
-
-  &:before{
-    background: $text-border-bg-color-before;
-  }
-
-  &:before {
-    right: $text-border-before-right;
-    margin-left: $text-border-before-ml;
-  }
-
-  &:after {
-    left: $text-border-after-left;
-    margin-right: $text-border-after-mr;
-  }
-}
-
-a[data-scroll]{
-  border-radius: $border-radius-md;
-   &:hover{
-    background: $gray-200;
-    color: $h-color;
-  }
-}
-
-// Round Slider Styling
-round-slider {
-  max-width: $round-slider-m-width;
-  transition: $round-slider-transition;
-}
-
-round-slider.scaling:hover {
-  max-width: $round-slider-scale-m-width;
-}
-
-
-// Smart Home - Room Selectpicker
-.room-select {
-  .choices {
-    .choices__inner {
-      background: $white;
-      border-color: $white;
-    }
-  }
-}
-
-
-// Page Sections Breadcrumb
-@include media-breakpoint-down(lg) {
-  .page-headers-sections {
-    .container {
-      .row {
-        .col-lg-12.mx-auto > .mb-4.w-25 {
-          width: 50% !important;
-        }
-      }
-    }
-  }
-}
-@include media-breakpoint-down(sm) {
-  .page-headers-sections {
-    .container {
-      .row {
-        .col-lg-12.mx-auto > .mb-4.w-25 {
-          width: 100% !important;
-        }
-      }
-    }
-  }
-}
-// Coming Soon Page
-.transform-rotate {
-  transform: $coming-rotate-transform;
-}
@@ -1,5 +1,9 @@
-// Blur effect
+// update <html> tag border
+html {
+  border: none !important;
+}

+// Blur effect
 .blur {
  box-shadow: $blur-box-shadow;
  -webkit-backdrop-filter: $blur-backdrop-filter;
@@ -74,6 +78,11 @@
  }
 }

+hr {
+  border-top: none;
+  height: 1px;
+}
+
 // Vertical Line
 hr.vertical {
  position: absolute;
@@ -84,11 +93,11 @@ hr.vertical {
  width: 1px;

  &.light {
-    background-color: $hr-bg-color-light;
+    background-image: $hr-bg-color-light;
  }

  &.dark {
-    background-color: $hr-bg-color-dark;
+    background-image: $hr-bg-color-dark;
  }

  &.gray-light {
@@ -101,10 +110,10 @@ hr.horizontal {
  background-color: $hr-bg-color;

  &.light {
-    background-color: $hr-bg-color-light;
+    background-image: $hr-bg-color-light;
  }
  &.dark {
-    background-color: $hr-bg-color-dark;
+    background-image: $hr-bg-color-dark;
  }

  &.gray-light {
@@ -308,7 +317,6 @@ hr.horizontal {
@include media-breakpoint-up(lg) {
  .virtual-reality {
    .sidenav {
-      margin-top: $spacer * 2;
      animation-name: $animation-name;
      animation-fill-mode: $animation-mode;
      animation-duration: $animation-duration;
@@ -363,3 +371,72 @@ hr.horizontal {
  width: $border-right-after-width;
  border-right: 1px solid $border-right-after-border-color;
 }
+
+// sidebar caret RTL
+.rotate-caret {
+  .collapse {
+    .nav-link:after {
+      margin-right: auto;
+      margin-left: 0;
+    }
+  }
+}
+
+@media (min-width: 1200px){
+  .g-sidenav-hidden.rtl .main-content {
+    margin-right: 7rem!important; 
+  }
+}
+
+// perfectScrollbar on RTL page
+.rtl {
+  .ps__rail-y {
+    right: auto !important;
+    left: 0;
+  }
+
+  .start-0 {
+    right: 0 !important;
+  }
+  .end-0 {
+    left: 0 !important;
+  }
+}
+
+// Side Bullets - Scroll to section
+
+
+.bullets {
+  position: sticky;
+  top: 30%;
+  height: 0;
+  transform: translate(-50%, -50%);
+  margin-left: auto;
+}
+
+.bullets ul {
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  list-style-type: none;
+  margin-right: -1rem;
+}
+
+.bullets ul li .indicator {
+  cursor: pointer;
+  margin-top: 1rem;
+  display: block;
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  background-color: $primary;
+}
+
+.bullets ul li .active {
+  transform: scale(1.3);
+  transition: transform 200ms ease-in-out;
+}
+
+.img-material-tw {
+  object-fit: cover;
+}
@@ -28,7 +28,7 @@
        border: none;

        .dropdown-menu {
-          margin-left: $dropdown-item-padding-x / 2;
+          margin-left: $dropdown-item-padding-x * 0.5;
        }
      }
      .avatar{
@@ -196,7 +196,7 @@
 //

 .sidenav {
-  z-index: 999;
+  z-index: 9999;

  .navbar-brand,
  .navbar-heading {
@@ -245,6 +245,25 @@
    }
  }
 }
+body:not(.dark-version) {
+  .sidenav {
+    &.bg-white,
+    &.bg-transparent {
+      .collapse {
+        .nav-item {
+          .nav-link {
+            &.active.text-dark {
+              i,
+              .nav-link-text {
+                color: $dark !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

 .sidenav-header {
  height: $sidenav-header-width;
@@ -134,8 +134,8 @@
  .navbar {
    &.navbar-transparent {
      .navbar-collapse {
-        padding-top: $spacer / 2;
-        padding-bottom: $spacer / 2;
+        padding-top: $spacer * 0.5;
+        padding-bottom: $spacer * 0.5;
        box-shadow: $box-shadow-lg;
      }

@@ -1,63 +0,0 @@
-@include media-breakpoint-up(lg) {
-  .rtl {
-    .navbar-vertical {
-      .navbar-nav {
-        .collapse,
-        .collapsing {
-          .nav-item {
-            .nav-link {
-              &:before {
-                right: $rtl-sidebar-bullet-right !important;
-                left: auto !important;
-              }
-            }
-
-            .collapse,
-            .collapsing {
-              .nav {
-                padding-right: 0;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &.g-sidenav-hidden {
-      .navbar-vertical {
-        .navbar-nav {
-          .nav-item {
-            .collapse,
-            .collapsing {
-              .nav {
-                padding-right: 0;
-              }
-            }
-          }
-        }
-
-        &:hover {
-          .navbar-nav {
-            > .nav-item {
-              .collapse,
-              .collapsing {
-                .nav {
-                  padding-right: $rtl-sidebar-hover-padding-right;
-
-                  .nav-item {
-                    .collapse,
-                    .collapsing {
-                      .nav {
-                        padding-right: 0 !important;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
@@ -84,6 +84,26 @@
  }

  .input-group {
+    &.input-group-outline {
+      .form-label:before {
+        margin-left: 4px;
+        margin-right: 0;
+        border-radius: 0 4px;
+      }
+      .form-label:after {
+        margin-left: 0;
+        margin-right: 4px;
+        border-radius: 5px 0;
+      }
+
+      &.is-valid,
+      &.is-invalid {
+        .form-control {
+          background-position: left 0.75rem center !important;
+        }
+      }
+    }
+
    .input-group-text {
      border-left: 0;
      border-top-left-radius: 0;
@@ -75,7 +75,7 @@ h1, .h1,
 h2, .h2,
 h3, .h3 {
  font-weight: $font-weight-bold;
-  font-family: $font-family-roboto-slab;
+  font-family: $font-family-base;
 }

 h4, .h4,
@@ -1,5 +1,6 @@
@import "./bootstrap/functions";
@import "./bootstrap/variables";
+@import "./bootstrap/maps";
@import "./bootstrap/utilities";

 $utilities: (
@@ -483,7 +484,7 @@ $utilities: (
  "font-family": (
    property: font-family,
    class: font,
-    values: (monospace: var(--#{$variable-prefix}font-monospace))
+    values: (monospace: var(--#{$prefix}font-monospace))
  ),
  "font-size": (
    rfs: true,
@@ -595,7 +596,7 @@ $utilities: (
  "gradient": (
    property: background-image,
    class: bg,
-    values: (gradient: var(--#{$variable-prefix}gradient))
+    values: (gradient: var(--#{$prefix}gradient))
  ),
  // scss-docs-start utils-interaction
  "user-select": (
@@ -761,6 +762,8 @@ $utilities: (
   class: max-height,
   values: (
    100: $max-height-100,
+    130: $max-height-130,
+    140: $max-height-140,
    150: $max-height-150,
    160: $max-height-160,
    200: $max-height-200,
@@ -794,6 +797,8 @@ $utilities: (
    class: min-height,
    values: (
     100: $min-height-100,
+     130: $min-height-130,
+     140: $min-height-140,
     150: $min-height-150,
     160: $min-height-160,
     200: $min-height-200,
@@ -3,7 +3,6 @@
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

-// $soft-background-color: #fbfbfb !default;
 $soft-background-color: #ffffff !default; // Testing
 $font-color:            #7b809a !default;
 $h-color:               #344767 !default;
@@ -62,6 +61,8 @@ $warning:       #fb8c00 !default;
 $danger:        #F44335 !default;
 $light:         $gray-200 !default;
 $dark:          $h-color !default;
+$dark-blue:     #1A237E !default;
+

 // scss-docs-start theme-colors-map
 $theme-colors: (
@@ -73,7 +74,8 @@ $theme-colors: (
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark,
-  "white":      $white
+  "white":      $white,
+  "dark-blue":  $dark-blue,
 ) !default;
 // scss-docs-end theme-colors-map

@@ -273,8 +275,8 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
 $spacer: 1rem !default;
 $spacers: (
  0: 0,
-  1: $spacer / 4,
-  2: $spacer / 2,
+  1: $spacer * 0.25,
+  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
@@ -539,7 +541,7 @@ $text-sm-font-size:           .875rem !default;
 $text-xs-font-size:           .75rem !default;
 $p-font-size:                 1rem !default;

-$headings-margin-bottom:      $spacer / 2 !default;
+$headings-margin-bottom:      $spacer * 0.5 !default;
 $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        400 !default;
@@ -1154,7 +1156,7 @@ $nav-pills-vertical-link-radius:    .875rem !default;

 // Navbar

-$navbar-padding-y:                  $spacer / 2 !default;
+$navbar-padding-y:                  $spacer * 0.5 !default;
 $navbar-padding-x:                  null !default;
 $navbar-box-shadow:                 0 2px 12px 0 rgba(0, 0, 0, .16) !default;

@@ -1165,7 +1167,7 @@ $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * 0.5 !default;
 $navbar-brand-margin-right:         1rem !default;

 $navbar-toggler-padding-y:          .25rem !default;
@@ -1222,7 +1224,7 @@ $dropdown-border-width:             0 !default;
 $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
 $dropdown-transition-time:          .3s ease !default;
 $dropdown-divider-bg:               $dropdown-border-color !default;
-$dropdown-divider-margin-y:         $spacer / 2 !default;
+$dropdown-divider-margin-y:         $spacer * 0.5 !default;
 $dropdown-box-shadow:               $box-shadow-lg !default;

 $dropdown-link-color:               $font-color !default;
@@ -1293,12 +1295,12 @@ $pagination-transition:              color .15s ease-in-out, background-color .1

 $card-spacer-y:                     $spacer !default;
 $card-spacer-x:                     $spacer !default;
-$card-title-spacer-y:               $spacer / 2 !default;
+$card-title-spacer-y:               $spacer * 0.5 !default;
 $card-border-width:                 0 !default;
 $card-border-radius:                $border-radius-xl !default;
 $card-border-color:                 rgba($black, .125) !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
-$card-cap-padding-y:                $card-spacer-y / 2 !default;
+$card-cap-padding-y:                $card-spacer-y * 0.5 !default;
 $card-cap-padding-x:                $card-spacer-x !default;
 $card-cap-bg:                       $white !default;
 $card-cap-color:                    null !default;
@@ -1308,7 +1310,7 @@ $card-bg:                           $white !default;

 $card-img-overlay-padding:          $spacer !default;

-$card-group-margin:                 $grid-gutter-width / 2 !default;
+$card-group-margin:                 $grid-gutter-width * 0.5 !default;


 // Accordion
@@ -1352,8 +1354,8 @@ $tooltip-color:                     $white !default;
 $tooltip-bg:                        $black !default;
 $tooltip-border-radius:             $border-radius-md !default;
 $tooltip-opacity:                   .9 !default;
-$tooltip-padding-y:                 $spacer / 4 !default;
-$tooltip-padding-x:                 $spacer / 2 !default;
+$tooltip-padding-y:                 $spacer * 0.25 !default;
+$tooltip-padding-x:                 $spacer * 0.5 !default;
 $tooltip-margin:                    0 !default;

 $tooltip-arrow-width:               .8rem !default;
@@ -1510,7 +1512,7 @@ $list-group-border-color:           rgba($black, .125) !default;
 $list-group-border-width:           $border-width !default;
 $list-group-border-radius:          $border-radius-md !default;

-$list-group-item-padding-y:         $spacer / 2 !default;
+$list-group-item-padding-y:         $spacer * 0.5 !default;
 $list-group-item-padding-x:         $spacer !default;
 $list-group-item-bg-level:          -9 !default;
 $list-group-item-color-level:       6 !default;
@@ -1549,7 +1551,7 @@ $figure-caption-color:              $gray-600 !default;
 // Breadcrumbs

 $breadcrumb-font-size:              null !default;
-$breadcrumb-padding-y:              $spacer / 2 !default;
+$breadcrumb-padding-y:              $spacer * 0.5 !default;
 $breadcrumb-padding-x:              $spacer !default;
 $breadcrumb-item-padding-x:         .5rem !default;
 $breadcrumb-margin-bottom:          1rem !default;
@@ -1,29 +0,0 @@
-//
-// Circle badge
-//
-
-
-// General styles
-
-.badge-circle {
-    text-align: center;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: $badge-circle-border-radius;
-    padding: 0 !important;
-    width: $badge-circle-width;
-    height: $badge-circle-height;
-    font-size: $badge-circle-font-size;
-    font-weight: $badge-circle-font-weight;
-
-    &.badge-md {
-        width: $badge-circle-md-width;
-        height: $badge-circle-md-height;
-    }
-
-    &.badge-lg {
-      width: $badge-circle-lg-width;
-      height: $badge-circle-lg-height;
-    }
-}
@@ -1,42 +0,0 @@
-//
-// Dot badge
-//
-
-
-// General styles
-
-.badge-dot {
-    padding-left: 0;
-    padding-right: 0;
-    background: transparent;
-    font-weight: $font-weight-normal;
-    font-size: $font-size-sm;
-    text-transform: none;
-
-    strong {
-        color: $gray-800;
-    }
-
-    i {
-        display: inline-block;
-        vertical-align: middle;
-        width: $badge-dot-icon-width;
-        height: $badge-dot-icon-height;
-        border-radius: $badge-dot-icon-radius;
-        margin-right: $badge-dot-icon-margin-right;
-    }
-
-    &.badge-md {
-        i {
-            width: $badge-dot-md-icon-width;
-            height: $badge-dot-md-icon-height;
-        }
-    }
-
-    &.badge-lg {
-        i {
-            width: $badge-dot-lg-icon-width;
-            height: $badge-dot-lg-icon-height;
-        }
-    }
-}
@@ -1,17 +0,0 @@
-//
-// Badge floating
-//
-
-
-.btn {
-    .badge-floating {
-        position: absolute;
-        top: -$badge-floating-top;
-        transform: translateY($badge-floating-top);
-        border: $badge-floating-border solid;
-
-        &.badge:not(.badge-circle) {
-            transform: $badge-floating-transform;
-        }
-    }
-}
@@ -1,93 +0,0 @@
-//
-// Badge
-//
-
-
-// General styles
-
-.badge {
-
-
-    a {
-        color: $white;
-    }
-}
-
-
-// Size variations
-
-.badge-sm{
-  padding: $badge-sm-padding;
-  font-size: $badge-sm-font-size;
-  border-radius: $border-radius-md;
-}
-
-.badge-md {
-    padding: $badge-md-padding;
-}
-
-.badge-lg {
-    padding: $badge-lg-padding;
-}
-
-
-// Multiple inline badges
-
-.badge-inline {
-    margin-right: $badge-inline-margin-right;
-
-    + span {
-        top: $badge-inline-span-top;
-        position: relative;
-
-        > a {
-            text-decoration: underline;
-        }
-    }
-}
-
-
-// Color fixes
-
-.badge-default {
-    color: $white;
-}
-
-.badge.badge-secondary {
-    background-color: lighten($secondary, 32%);
-    color: $gray-600;
-}
-
-
-// Badge spacing inside a btn with some text
-
-.btn {
-    .badge {
-        &:not(:first-child) {
-            margin-left: $badge-btn-margin;
-        }
-        &:not(:last-child) {
-            margin-right: $badge-btn-margin;
-        }
-    }
-}
-
-// Colors
-//
-// Contextual variations (linked badges get darker on :hover).
-
-@each $color, $value in $theme-colors {
-  .badge-#{$color} {
-    @include badge-variant($value);
-  }
-}
-
-
-
-// card-pricing badge position
-
-.card {
-  >.badge {
-    margin-top: $card-badge-position !important;
-  }
-}
@@ -2,43 +2,70 @@
 // 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-border-color: #{$accordion-button-focus-border-color};
+  --#{$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: $accordion-button-padding-y $accordion-button-padding-x;
+  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
  @include font-size($font-size-base);
-  color: $accordion-button-color;
+  color: var(--#{$prefix}accordion-btn-color);
  text-align: left; // Reset button style
-  background-color: $accordion-button-bg;
+  background-color: var(--#{$prefix}accordion-btn-bg);
  border: 0;
  @include border-radius(0);
  overflow-anchor: none;
-  @include transition($accordion-transition);
+  @include transition(var(--#{$prefix}accordion-transition));

  &:not(.collapsed) {
-    color: $accordion-button-active-color;
-    background-color: $accordion-button-active-bg;
-    box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
+    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: escape-svg($accordion-button-active-icon);
-      transform: $accordion-icon-transform;
+      background-image: var(--#{$prefix}accordion-btn-active-icon);
+      transform: var(--#{$prefix}accordion-btn-icon-transform);
    }
  }

  // Accordion icon
  &::after {
    flex-shrink: 0;
-    width: $accordion-icon-width;
-    height: $accordion-icon-width;
+    width: var(--#{$prefix}accordion-btn-icon-width);
+    height: var(--#{$prefix}accordion-btn-icon-width);
    margin-left: auto;
    content: "";
-    background-image: escape-svg($accordion-button-icon);
+    background-image: var(--#{$prefix}accordion-btn-icon);
    background-repeat: no-repeat;
-    background-size: $accordion-icon-width;
-    @include transition($accordion-icon-transition);
+    background-size: var(--#{$prefix}accordion-btn-icon-width);
+    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
  }

  &:hover {
@@ -47,9 +74,9 @@

  &:focus {
    z-index: 3;
-    border-color: $accordion-button-focus-border-color;
+    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
    outline: 0;
-    box-shadow: $accordion-button-focus-box-shadow;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
  }
 }

@@ -58,14 +85,15 @@
 }

 .accordion-item {
-  background-color: $accordion-bg;
-  border: $accordion-border-width solid $accordion-border-color;
+  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($accordion-border-radius);
+    @include border-top-radius(var(--#{$prefix}accordion-border-radius));

    .accordion-button {
-      @include border-top-radius($accordion-inner-border-radius);
+      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
    }
  }

@@ -75,22 +103,22 @@

  // Only set a border-radius on the last item if the accordion is collapsed
  &:last-of-type {
-    @include border-bottom-radius($accordion-border-radius);
+    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));

    .accordion-button {
      &.collapsed {
-        @include border-bottom-radius($accordion-inner-border-radius);
+        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
      }
    }

    .accordion-collapse {
-      @include border-bottom-radius($accordion-border-radius);
+      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
    }
  }
 }

 .accordion-body {
-  padding: $accordion-body-padding-y $accordion-body-padding-x;
+  padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
 }


@@ -112,7 +140,10 @@
    &:last-child { border-bottom: 0; }

    .accordion-button {
-      @include border-radius(0);
+      &,
+      &.collapsed {
+        @include border-radius(0);
+      }
    }
  }
 }
@@ -3,11 +3,24 @@
 //

 .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};
+  // scss-docs-end alert-css-vars
+
  position: relative;
-  padding: $alert-padding-y $alert-padding-x;
-  margin-bottom: $alert-margin-bottom;
-  border: $alert-border-width solid transparent;
-  @include border-radius($alert-border-radius);
+  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
@@ -47,6 +60,7 @@
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
+
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
@@ -4,16 +4,25 @@
 // `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
+
  display: inline-block;
-  padding: $badge-padding-y $badge-padding-x;
-  @include font-size($badge-font-size);
-  font-weight: $badge-font-weight;
+  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: $badge-color;
+  color: var(--#{$prefix}badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
-  @include border-radius($badge-border-radius);
+  @include border-radius(var(--#{$prefix}badge-border-radius));
  @include gradient-bg();

  // Empty badges collapse automatically
@@ -1,28 +1,40 @@
 .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: $breadcrumb-padding-y $breadcrumb-padding-x;
-  margin-bottom: $breadcrumb-margin-bottom;
-  @include font-size($breadcrumb-font-size);
+  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: $breadcrumb-bg;
-  @include border-radius($breadcrumb-border-radius);
+  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: $breadcrumb-item-padding-x;
+    padding-left: var(--#{$prefix}breadcrumb-item-padding-x);

    &::before {
      float: left; // Suppress inline spacings and underlining of the separator
-      padding-right: $breadcrumb-item-padding-x;
-      color: $breadcrumb-divider-color;
-      content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+      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: $breadcrumb-active-color;
+    color: var(--#{$prefix}breadcrumb-item-active-color);
  }
 }
@@ -34,14 +34,17 @@
 }

 .btn-group {
+  @include border-radius($btn-border-radius);
+
  // Prevent double borders when buttons are next to each other
-  > .btn:not(:first-child),
+  > :not(.btn-check:first-child) + .btn,
  > .btn-group:not(:first-child) {
    margin-left: -$btn-border-width;
  }

  // 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);
  }
@@ -3,49 +3,112 @@
 //

 .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: #{$body-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;
-  font-family: $btn-font-family;
-  font-weight: $btn-font-weight;
-  line-height: $btn-line-height;
-  color: $body-color;
+  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;
-  background-color: transparent;
-  border: $btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
+  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: $body-color;
+    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 + &,
-  &:focus {
+  .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);
+  }
+
+  &: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;
-    box-shadow: $btn-focus-box-shadow;
+    // 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 + &,
-  .btn-check:active + &,
-  &:active,
-  &.active {
-    @include box-shadow($btn-active-box-shadow);
+  :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 {
-      @include box-shadow($btn-focus-box-shadow, $btn-active-box-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);
+      }
    }
  }

  &:disabled,
  &.disabled,
  fieldset:disabled & {
+    color: var(--#{$prefix}btn-disabled-color);
    pointer-events: none;
-    opacity: $btn-disabled-opacity;
+    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);
  }
 }
@@ -58,7 +121,27 @@
 // scss-docs-start btn-variant-loops
@each $color, $value in $theme-colors {
  .btn-#{$color} {
-    @include button-variant($value, $value);
+    @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);
+    }
  }
 }

@@ -76,22 +159,35 @@

 // Make a button look and behave like a link
 .btn-link {
-  font-weight: $font-weight-normal;
-  color: $btn-link-color;
+  --#{$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: none;
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
+
  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: $btn-link-hover-color;
-    text-decoration: $link-hover-decoration;
-  }
-
-  &:focus {
-    text-decoration: $link-hover-decoration;
-  }
-
-  &:disabled,
-  &.disabled {
-    color: $btn-link-disabled-color;
+    color: var(--#{$prefix}btn-hover-color);
  }

  // No need for an active state here
@@ -3,17 +3,37 @@
 //

 .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-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: $card-height;
+  height: var(--#{$prefix}card-height);
  word-wrap: break-word;
-  background-color: $card-bg;
+  background-color: var(--#{$prefix}card-bg);
  background-clip: border-box;
-  border: $card-border-width solid $card-border-color;
-  @include border-radius($card-border-radius);
-  @include box-shadow($card-box-shadow);
+  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;
@@ -26,12 +46,12 @@

    &:first-child {
      border-top-width: 0;
-      @include border-top-radius($card-inner-border-radius);
+      @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
    }

    &:last-child  {
      border-bottom-width: 0;
-      @include border-bottom-radius($card-inner-border-radius);
+      @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
    }
  }

@@ -47,16 +67,16 @@
  // 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: $card-spacer-y $card-spacer-x;
-  color: $card-color;
+  padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
+  color: var(--#{$prefix}card-color);
 }

 .card-title {
-  margin-bottom: $card-title-spacer-y;
+  margin-bottom: var(--#{$prefix}card-title-spacer-y);
 }

 .card-subtitle {
-  margin-top: -$card-title-spacer-y * .5;
+  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
  margin-bottom: 0;
 }

@@ -70,7 +90,7 @@
  }

  + .card-link {
-    margin-left: $card-spacer-x;
+    margin-left: var(--#{$prefix}card-spacer-x);
  }
 }

@@ -79,25 +99,25 @@
 //

 .card-header {
-  padding: $card-cap-padding-y $card-cap-padding-x;
+  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
  margin-bottom: 0; // Removes the default margin-bottom of <hN>
-  color: $card-cap-color;
-  background-color: $card-cap-bg;
-  border-bottom: $card-border-width solid $card-border-color;
+  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 {
-    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
+    @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
  }
 }

 .card-footer {
-  padding: $card-cap-padding-y $card-cap-padding-x;
-  color: $card-cap-color;
-  background-color: $card-cap-bg;
-  border-top: $card-border-width solid $card-border-color;
+  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 $card-inner-border-radius $card-inner-border-radius);
+    @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
  }
 }

@@ -107,22 +127,20 @@
 //

 .card-header-tabs {
-  margin-right: -$card-cap-padding-x * .5;
-  margin-bottom: -$card-cap-padding-y;
-  margin-left: -$card-cap-padding-x * .5;
+  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;

-  @if $nav-tabs-link-active-bg != $card-bg {
-    .nav-link.active {
-      background-color: $card-bg;
-      border-bottom-color: $card-bg;
-    }
+  .nav-link.active {
+    background-color: var(--#{$prefix}card-bg);
+    border-bottom-color: var(--#{$prefix}card-bg);
  }
 }

 .card-header-pills {
-  margin-right: -$card-cap-padding-x * .5;
-  margin-left: -$card-cap-padding-x * .5;
+  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
@@ -132,8 +150,8 @@
  right: 0;
  bottom: 0;
  left: 0;
-  padding: $card-img-overlay-padding;
-  @include border-radius($card-inner-border-radius);
+  padding: var(--#{$prefix}card-img-overlay-padding);
+  @include border-radius(var(--#{$prefix}card-inner-border-radius));
 }

 .card-img,
@@ -144,12 +162,12 @@

 .card-img,
 .card-img-top {
-  @include border-top-radius($card-inner-border-radius);
+  @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
 }

 .card-img,
 .card-img-bottom {
-  @include border-bottom-radius($card-inner-border-radius);
+  @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
 }


@@ -161,7 +179,7 @@
  // The child selector allows nested `.card` within `.card-group`
  // to display properly.
  > .card {
-    margin-bottom: $card-group-margin;
+    margin-bottom: var(--#{$prefix}card-group-margin);
  }

  @include media-breakpoint-up(sm) {
@@ -42,7 +42,6 @@
  display: block;
 }

-/* rtl:begin:ignore */
 .carousel-item-next:not(.carousel-item-start),
 .active.carousel-item-end {
  transform: translateX(100%);
@@ -53,8 +52,6 @@
  transform: translateX(-100%);
 }

-/* rtl:end:ignore */
-

 //
 // Alternate transitions
@@ -1,4 +1,4 @@
-// transparent background and border properties included for button version.
+// Transparent background and border properties included for button version.
 // iOS requires the button element instead of an anchor tag.
 // If you want the anchor version, it requires `href="#"`.
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
@@ -2,7 +2,7 @@
 //
 // Set the container width, and override it for fixed navbars in media queries.

-@if $enable-grid-classes {
+@if $enable-container-classes {
  // Single container class with breakpoint max-widths
  .container,
  // 100% wide container at all breakpoints
@@ -2,7 +2,9 @@
 .dropup,
 .dropend,
 .dropdown,
-.dropstart {
+.dropstart,
+.dropup-center,
+.dropdown-center {
  position: relative;
 }

@@ -15,26 +17,67 @@

 // 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: $zindex-dropdown;
+  z-index: var(--#{$prefix}dropdown-zindex);
  display: none; // none by default, but block on "open" of the menu
-  min-width: $dropdown-min-width;
-  padding: $dropdown-padding-y $dropdown-padding-x;
+  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($dropdown-font-size);
-  color: $dropdown-color;
+  @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: $dropdown-bg;
+  background-color: var(--#{$prefix}dropdown-bg);
  background-clip: padding-box;
-  border: $dropdown-border-width solid $dropdown-border-color;
-  @include border-radius($dropdown-border-radius);
-  @include box-shadow($dropdown-box-shadow);
+  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: $dropdown-spacer;
+    margin-top: var(--#{$prefix}dropdown-spacer);
+  }
+
+  @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));
+    }
+
  }
 }

@@ -74,7 +117,7 @@
    top: auto;
    bottom: 100%;
    margin-top: 0;
-    margin-bottom: $dropdown-spacer;
+    margin-bottom: var(--#{$prefix}dropdown-spacer);
  }

  .dropdown-toggle {
@@ -88,7 +131,7 @@
    right: auto;
    left: 100%;
    margin-top: 0;
-    margin-left: $dropdown-spacer;
+    margin-left: var(--#{$prefix}dropdown-spacer);
  }

  .dropdown-toggle {
@@ -105,7 +148,7 @@
    right: 100%;
    left: auto;
    margin-top: 0;
-    margin-right: $dropdown-spacer;
+    margin-right: var(--#{$prefix}dropdown-spacer);
  }

  .dropdown-toggle {
@@ -120,9 +163,10 @@
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
  height: 0;
-  margin: $dropdown-divider-margin-y 0;
+  margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
  overflow: hidden;
-  border-top: 1px solid $dropdown-divider-bg;
+  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
@@ -131,45 +175,33 @@
 .dropdown-item {
  display: block;
  width: 100%; // For `<button>`s
-  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
  clear: both;
  font-weight: $font-weight-normal;
-  color: $dropdown-link-color;
+  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

-  // Prevent dropdown overflow if there's no padding
-  // See https://github.com/twbs/bootstrap/pull/27703
-  @if $dropdown-padding-y == 0 {
-    &:first-child {
-      @include border-top-radius($dropdown-inner-border-radius);
-    }
-
-    &:last-child {
-      @include border-bottom-radius($dropdown-inner-border-radius);
-    }
-  }
-
  &:hover,
  &:focus {
-    color: $dropdown-link-hover-color;
+    color: var(--#{$prefix}dropdown-link-hover-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
-    @include gradient-bg($dropdown-link-hover-bg);
+    @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
  }

  &.active,
  &:active {
-    color: $dropdown-link-active-color;
+    color: var(--#{$prefix}dropdown-link-active-color);
    text-decoration: none;
-    @include gradient-bg($dropdown-link-active-bg);
+    @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
  }

  &.disabled,
  &:disabled {
-    color: $dropdown-link-disabled-color;
+    color: var(--#{$prefix}dropdown-link-disabled-color);
    pointer-events: none;
    background-color: transparent;
    // Remove CSS gradients if they're enabled
@@ -184,57 +216,34 @@
 // Dropdown section headers
 .dropdown-header {
  display: block;
-  padding: $dropdown-header-padding;
+  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: $dropdown-header-color;
+  color: var(--#{$prefix}dropdown-header-color);
  white-space: nowrap; // as with > li > a
 }

 // Dropdown text
 .dropdown-item-text {
  display: block;
-  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-  color: $dropdown-link-color;
+  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
+  color: var(--#{$prefix}dropdown-link-color);
 }

 // Dark dropdowns
 .dropdown-menu-dark {
-  color: $dropdown-dark-color;
-  background-color: $dropdown-dark-bg;
-  border-color: $dropdown-dark-border-color;
-  @include box-shadow($dropdown-dark-box-shadow);
-
-  .dropdown-item {
-    color: $dropdown-dark-link-color;
-
-    &:hover,
-    &:focus {
-      color: $dropdown-dark-link-hover-color;
-      @include gradient-bg($dropdown-dark-link-hover-bg);
-    }
-
-    &.active,
-    &:active {
-      color: $dropdown-dark-link-active-color;
-      @include gradient-bg($dropdown-dark-link-active-bg);
-    }
-
-    &.disabled,
-    &:disabled {
-      color: $dropdown-dark-link-disabled-color;
-    }
-  }
-
-  .dropdown-divider {
-    border-color: $dropdown-dark-divider-bg;
-  }
-
-  .dropdown-item-text {
-    color: $dropdown-dark-link-color;
-  }
-
-  .dropdown-header {
-    color: $dropdown-dark-header-color;
-  }
+  // 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
 }
@@ -40,11 +40,11 @@
 // stylelint-disable scss/dollar-variable-pattern
@function rgba-css-var($identifier, $target) {
  @if $identifier == "body" and $target == "bg" {
-    @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
  } @if $identifier == "body" and $target == "text" {
-    @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+    @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
  } @else {
-    @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+    @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
  }
 }

@@ -68,7 +68,7 @@
@function varify($list) {
  $result: null;
  @each $entry in $list {
-    $result: append($result, var(--#{$variable-prefix}#{$entry}), space);
+    $result: append($result, var(--#{$prefix}#{$entry}), space);
  }
  @return $result;
 }
@@ -109,7 +109,7 @@
 // Replace `$search` with `$replace` in `$string`
 // Used on our SVG icon backgrounds for custom forms.
 //
-// @author Hugo Giraudel
+// @author Kitty Giraudel
 // @param {String} $string - Initial string
 // @param {String} $search - Substring to replace
 // @param {String} $replace ('') - New value
@@ -177,9 +177,9 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
 }

-// Return WCAG2.0 relative luminance
-// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+// Return WCAG2.1 relative luminance
+// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
@function luminance($color) {
  $rgb: (
    "r": red($color),
@@ -198,7 +198,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
+  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
 }

 // scss-docs-start color-functions
@@ -15,9 +15,9 @@
@if $enable-cssgrid {
  .grid {
    display: grid;
-    grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);
-    grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);
-    gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});
+    grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
+    grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
+    gap: var(--#{$prefix}gap, #{$grid-gutter-width});

    @include make-cssgrid();
  }
@@ -1,4 +1,5 @@
@import "helpers/clearfix";
+@import "helpers/color-bg";
@import "helpers/colored-links";
@import "helpers/ratio";
@import "helpers/position";
@@ -3,27 +3,46 @@
 // 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
+
  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($list-group-border-radius);
+  @include border-radius(var(--#{$prefix}list-group-border-radius));
 }

 .list-group-numbered {
  list-style-type: none;
  counter-reset: section;

-  > li::before {
+  > .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
@@ -31,25 +50,24 @@

 .list-group-item-action {
  width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: $list-group-action-color;
+  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: $list-group-action-hover-color;
+    color: var(--#{$prefix}list-group-action-hover-color);
    text-decoration: none;
-    background-color: $list-group-hover-bg;
+    background-color: var(--#{$prefix}list-group-action-hover-bg);
  }

  &:active {
-    color: $list-group-action-active-color;
-    background-color: $list-group-action-active-bg;
+    color: var(--#{$prefix}list-group-action-active-color);
+    background-color: var(--#{$prefix}list-group-action-active-bg);
  }
 }

-
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
@@ -57,11 +75,11 @@
 .list-group-item {
  position: relative;
  display: block;
-  padding: $list-group-item-padding-y $list-group-item-padding-x;
-  color: $list-group-color;
+  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: $list-group-bg;
-  border: $list-group-border-width solid $list-group-border-color;
+  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);
@@ -73,30 +91,30 @@

  &.disabled,
  &:disabled {
-    color: $list-group-disabled-color;
+    color: var(--#{$prefix}list-group-disabled-color);
    pointer-events: none;
-    background-color: $list-group-disabled-bg;
+    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: $list-group-active-color;
-    background-color: $list-group-active-bg;
-    border-color: $list-group-active-border-color;
+    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: -$list-group-border-width;
-      border-top-width: $list-group-border-width;
+      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.
@@ -109,13 +127,13 @@
      flex-direction: row;

      > .list-group-item {
-        &:first-child {
-          @include border-bottom-start-radius($list-group-border-radius);
+        &:first-child:not(:last-child) {
+          @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
          @include border-top-end-radius(0);
        }

-        &:last-child {
-          @include border-top-end-radius($list-group-border-radius);
+        &:last-child:not(:first-child) {
+          @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
          @include border-bottom-start-radius(0);
        }

@@ -124,12 +142,12 @@
        }

        + .list-group-item {
-          border-top-width: $list-group-border-width;
+          border-top-width: var(--#{$prefix}list-group-border-width);
          border-left-width: 0;

          &.active {
-            margin-left: -$list-group-border-width;
-            border-left-width: $list-group-border-width;
+            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);
          }
        }
      }
@@ -147,7 +165,7 @@
  @include border-radius(0);

  > .list-group-item {
-    border-width: 0 0 $list-group-border-width;
+    border-width: 0 0 var(--#{$prefix}list-group-border-width);

    &:last-child {
      border-bottom-width: 0;
@@ -0,0 +1,54 @@
+// Re-assigned maps
+//
+// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+// scss-docs-start theme-colors-rgb
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+// scss-docs-end theme-colors-rgb
+
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// scss-docs-start utilities-colors
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-color)
+  )
+) !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+// scss-docs-end utilities-text-colors
+
+// scss-docs-start utilities-bg-colors
+$utilities-bg: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-bg)
+  )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+// scss-docs-end utilities-bg-colors
+
+// scss-docs-start utilities-border-colors
+$utilities-border: map-merge(
+  $utilities-colors,
+  (
+    "white": to-rgb($white)
+  )
+) !default;
+$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+// scss-docs-end utilities-border-colors
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+$gutters: $spacers !default;
@@ -1,3 +1,5 @@
+// stylelint-disable function-disallowed-list
+
 // .modal-open      - body class for killing the scroll
 // .modal           - container to scroll within
 // .modal-dialog    - positioning shell for the actual modal
@@ -6,10 +8,34 @@

 // 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: $zindex-modal;
+  z-index: var(--#{$prefix}modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
@@ -27,7 +53,7 @@
 .modal-dialog {
  position: relative;
  width: auto;
-  margin: $modal-dialog-margin;
+  margin: var(--#{$prefix}modal-margin);
  // allow clicks to pass through for custom click handling to close modal
  pointer-events: none;

@@ -47,7 +73,7 @@
 }

 .modal-dialog-scrollable {
-  height: subtract(100%, $modal-dialog-margin * 2);
+  height: calc(100% - var(--#{$prefix}modal-margin) * 2);

  .modal-content {
    max-height: 100%;
@@ -62,7 +88,7 @@
 .modal-dialog-centered {
  display: flex;
  align-items: center;
-  min-height: subtract(100%, $modal-dialog-margin * 2);
+  min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
 }

 // Actual modal
@@ -72,20 +98,26 @@
  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: $modal-content-color;
+  color: var(--#{$prefix}modal-color);
  pointer-events: auto;
-  background-color: $modal-content-bg;
+  background-color: var(--#{$prefix}modal-bg);
  background-clip: padding-box;
-  border: $modal-content-border-width solid $modal-content-border-color;
-  @include border-radius($modal-content-border-radius);
-  @include box-shadow($modal-content-box-shadow-xs);
+  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 {
-  @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
+  // 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
@@ -95,20 +127,20 @@
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
-  padding: $modal-header-padding;
-  border-bottom: $modal-header-border-width solid $modal-header-border-color;
-  @include border-top-radius($modal-content-inner-border-radius);
+  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: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
-    margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
+    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: $modal-title-line-height;
+  line-height: var(--#{$prefix}modal-title-line-height);
 }

 // Modal body
@@ -118,60 +150,59 @@
  // 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: $modal-inner-padding;
+  padding: var(--#{$prefix}modal-padding);
 }

 // Footer (for actions)
 .modal-footer {
  display: flex;
-  flex-wrap: wrap;
  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: $modal-inner-padding - $modal-footer-margin-between * .5;
-  border-top: $modal-footer-border-width solid $modal-footer-border-color;
-  @include border-bottom-radius($modal-content-inner-border-radius);
+  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: $modal-footer-margin-between * .5;
+    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: $modal-md;
-    margin: $modal-dialog-margin-y-sm-up auto;
+    max-width: var(--#{$prefix}modal-width);
+    margin-right: auto;
+    margin-left: auto;
  }

-  .modal-dialog-scrollable {
-    height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
+  .modal-sm {
+    --#{$prefix}modal-width: #{$modal-sm};
  }
-
-  .modal-dialog-centered {
-    min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
-  }
-
-  .modal-content {
-    @include box-shadow($modal-content-box-shadow-sm-up);
-  }
-
-  .modal-sm { max-width: $modal-sm; }
 }

@include media-breakpoint-up(lg) {
  .modal-lg,
  .modal-xl {
-    max-width: $modal-lg;
+    --#{$prefix}modal-width: #{$modal-lg};
  }
 }

@include media-breakpoint-up(xl) {
-  .modal-xl { max-width: $modal-xl; }
+  .modal-xl {
+    --#{$prefix}modal-width: #{$modal-xl};
+  }
 }

 // scss-docs-start modal-fullscreen-loop
@@ -192,17 +223,14 @@
        @include border-radius(0);
      }

-      .modal-header {
+      .modal-header,
+      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
-
-      .modal-footer {
-        @include border-radius(0);
-      }
    }
  }
 }
@@ -4,6 +4,16 @@
 // `<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
+
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
@@ -13,22 +23,22 @@

 .nav-link {
  display: block;
-  padding: $nav-link-padding-y $nav-link-padding-x;
-  @include font-size($nav-link-font-size);
-  font-weight: $nav-link-font-weight;
-  color: $nav-link-color;
+  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);
  @include transition($nav-link-transition);

  &:hover,
  &:focus {
-    color: $nav-link-hover-color;
+    color: var(--#{$prefix}nav-link-hover-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
  }

  // Disabled state lightens text
  &.disabled {
-    color: $nav-link-disabled-color;
+    color: var(--#{$prefix}nav-link-disabled-color);
    pointer-events: none;
    cursor: default;
  }
@@ -39,23 +49,34 @@
 //

 .nav-tabs {
-  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+  // 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: -$nav-tabs-border-width;
+    margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
    background: none;
-    border: $nav-tabs-border-width solid transparent;
-    @include border-top-radius($nav-tabs-border-radius);
+    border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
+    @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));

    &:hover,
    &:focus {
-      border-color: $nav-tabs-link-hover-border-color;
      // 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);
    }

-    &.disabled {
-      color: $nav-link-disabled-color;
+    &.disabled,
+    &:disabled {
+      color: var(--#{$prefix}nav-link-disabled-color);
      background-color: transparent;
      border-color: transparent;
    }
@@ -63,14 +84,14 @@

  .nav-link.active,
  .nav-item.show .nav-link {
-    color: $nav-tabs-link-active-color;
-    background-color: $nav-tabs-link-active-bg;
-    border-color: $nav-tabs-link-active-border-color;
+    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: -$nav-tabs-border-width;
+    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);
  }
@@ -82,16 +103,28 @@
 //

 .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 {
    background: none;
    border: 0;
-    @include border-radius($nav-pills-border-radius);
+    @include border-radius(var(--#{$prefix}nav-pills-border-radius));
+
+    &:disabled {
+      color: var(--#{$prefix}nav-link-disabled-color);
+      background-color: transparent;
+      border-color: transparent;
+    }
  }

  .nav-link.active,
  .show > .nav-link {
-    color: $nav-pills-link-active-color;
-    @include gradient-bg($nav-pills-link-active-bg);
+    color: var(--#{$prefix}nav-pills-link-active-color);
+    @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
  }
 }

@@ -1,29 +1,38 @@
-// Contents
-//
-// Navbar
-// Navbar brand
-// Navbar nav
-// Navbar text
-// Responsive navbar
-// Navbar position
-// Navbar themes
-
-
 // Navbar
 //
 // 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
+
  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-top: $navbar-padding-y;
-  padding-right: $navbar-padding-x; // default: null
-  padding-bottom: $navbar-padding-y;
-  padding-left: $navbar-padding-x; // default: null
+  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
@@ -54,15 +63,17 @@
 // Used for brand, project, or site names.

 .navbar-brand {
-  padding-top: $navbar-brand-padding-y;
-  padding-bottom: $navbar-brand-padding-y;
-  margin-right: $navbar-brand-margin-end;
-  @include font-size($navbar-brand-font-size);
+  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);
  }
 }
@@ -73,15 +84,25 @@
 // 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
+
  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 {
-    padding-right: 0;
-    padding-left: 0;
+  .show > .nav-link,
+  .nav-link.active {
+    color: var(--#{$prefix}navbar-active-color);
  }

  .dropdown-menu {
@@ -97,6 +118,13 @@
 .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);
+  }
 }


@@ -118,13 +146,14 @@

 // Button for toggling the navbar when in its collapsed state
 .navbar-toggler {
-  padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
-  @include font-size($navbar-toggler-font-size);
+  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: $border-width solid transparent; // remove default button style
-  @include border-radius($navbar-toggler-border-radius);
-  @include transition($navbar-toggler-transition);
+  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;
@@ -133,7 +162,7 @@
  &:focus {
    text-decoration: none;
    outline: 0;
-    box-shadow: 0 0 0 $navbar-toggler-focus-width;
+    box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
  }
 }

@@ -144,13 +173,14 @@
  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(--#{$variable-prefix}scroll-height, 75vh);
+  max-height: var(--#{$prefix}scroll-height, 75vh);
  overflow-y: auto;
 }

@@ -176,8 +206,8 @@
          }

          .nav-link {
-            padding-right: $navbar-nav-link-padding-x;
-            padding-left: $navbar-nav-link-padding-x;
+            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
+            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

@@ -194,34 +224,31 @@
          display: none;
        }

-        .offcanvas-header {
-          display: none;
-        }
-
        .offcanvas {
-          position: inherit;
-          bottom: 0;
-          z-index: 1000;
+          // stylelint-disable declaration-no-important
+          position: static;
+          z-index: auto;
          flex-grow: 1;
-          visibility: visible !important; // stylelint-disable-line declaration-no-important
-          background-color: transparent;
-          border-right: 0;
-          border-left: 0;
+          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);
-          transform: none;
-        }
-        .offcanvas-top,
-        .offcanvas-bottom {
-          height: auto;
-          border-top: 0;
-          border-bottom: 0;
-        }
+          // stylelint-enable declaration-no-important

-        .offcanvas-body {
-          display: flex;
-          flex-grow: 0;
-          padding: 0;
-          overflow-y: visible;
+          .offcanvas-header {
+            display: none;
+          }
+
+          .offcanvas-body {
+            display: flex;
+            flex-grow: 0;
+            padding: 0;
+            overflow-y: visible;
+          }
        }
      }
    }
@@ -233,103 +260,19 @@
 //
 // Styles for switching between navbars with light or dark background.

-// Dark links against a light background
 .navbar-light {
-  .navbar-brand {
-    color: $navbar-light-brand-color;
-
-    &:hover,
-    &:focus {
-      color: $navbar-light-brand-hover-color;
-    }
-  }
-
-  .navbar-nav {
-    .nav-link {
-      color: $navbar-light-color;
-
-      &:hover,
-      &:focus {
-        color: $navbar-light-hover-color;
-      }
-
-      &.disabled {
-        color: $navbar-light-disabled-color;
-      }
-    }
-
-    .show > .nav-link,
-    .nav-link.active {
-      color: $navbar-light-active-color;
-    }
-  }
-
-  .navbar-toggler {
-    color: $navbar-light-color;
-    border-color: $navbar-light-toggler-border-color;
-  }
-
-  .navbar-toggler-icon {
-    background-image: escape-svg($navbar-light-toggler-icon-bg);
-  }
-
-  .navbar-text {
-    color: $navbar-light-color;
-
-    a,
-    a:hover,
-    a:focus  {
-      color: $navbar-light-active-color;
-    }
-  }
+  @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
 }

-// White links against a dark background
 .navbar-dark {
-  .navbar-brand {
-    color: $navbar-dark-brand-color;
-
-    &:hover,
-    &:focus {
-      color: $navbar-dark-brand-hover-color;
-    }
-  }
-
-  .navbar-nav {
-    .nav-link {
-      color: $navbar-dark-color;
-
-      &:hover,
-      &:focus {
-        color: $navbar-dark-hover-color;
-      }
-
-      &.disabled {
-        color: $navbar-dark-disabled-color;
-      }
-    }
-
-    .show > .nav-link,
-    .nav-link.active {
-      color: $navbar-dark-active-color;
-    }
-  }
-
-  .navbar-toggler {
-    color: $navbar-dark-color;
-    border-color: $navbar-dark-toggler-border-color;
-  }
-
-  .navbar-toggler-icon {
-    background-image: escape-svg($navbar-dark-toggler-icon-bg);
-  }
-
-  .navbar-text {
-    color: $navbar-dark-color;
-    a,
-    a:hover,
-    a:focus {
-      color: $navbar-dark-active-color;
-    }
-  }
+  // 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
 }
@@ -1,17 +1,117 @@
-.offcanvas {
-  position: fixed;
-  bottom: 0;
-  z-index: $zindex-offcanvas;
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  color: $offcanvas-color;
-  visibility: hidden;
-  background-color: $offcanvas-bg-color;
-  background-clip: padding-box;
-  outline: 0;
-  @include box-shadow($offcanvas-box-shadow);
-  @include transition(transform $offcanvas-transition-duration ease-in-out);
+// 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};
+  // 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;
+  }
+}
+
+@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(transform $offcanvas-transition-duration ease-in-out);
+
+      &.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;
+      }
+    }
+
+    @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 {
@@ -22,13 +122,13 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: $offcanvas-padding-y $offcanvas-padding-x;
+  padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);

  .btn-close {
-    padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
-    margin-top: $offcanvas-padding-y * -.5;
-    margin-right: $offcanvas-padding-x * -.5;
-    margin-bottom: $offcanvas-padding-y * -.5;
+    padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
+    margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+    margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
+    margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
  }
 }

@@ -39,45 +139,6 @@

 .offcanvas-body {
  flex-grow: 1;
-  padding: $offcanvas-padding-y $offcanvas-padding-x;
+  padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
  overflow-y: auto;
 }
-
-.offcanvas-start {
-  top: 0;
-  left: 0;
-  width: $offcanvas-horizontal-width;
-  border-right: $offcanvas-border-width solid $offcanvas-border-color;
-  transform: translateX(-100%);
-}
-
-.offcanvas-end {
-  top: 0;
-  right: 0;
-  width: $offcanvas-horizontal-width;
-  border-left: $offcanvas-border-width solid $offcanvas-border-color;
-  transform: translateX(100%);
-}
-
-.offcanvas-top {
-  top: 0;
-  right: 0;
-  left: 0;
-  height: $offcanvas-vertical-height;
-  max-height: 100%;
-  border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
-  transform: translateY(-100%);
-}
-
-.offcanvas-bottom {
-  right: 0;
-  left: 0;
-  height: $offcanvas-vertical-height;
-  max-height: 100%;
-  border-top: $offcanvas-border-width solid $offcanvas-border-color;
-  transform: translateY(100%);
-}
-
-.offcanvas.show {
-  transform: none;
-}
@@ -1,4 +1,27 @@
 .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();
 }
@@ -6,26 +29,44 @@
 .page-link {
  position: relative;
  display: block;
-  color: $pagination-color;
+  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: $pagination-bg;
-  border: $pagination-border-width solid $pagination-border-color;
+  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: $pagination-hover-color;
+    color: var(--#{$prefix}pagination-hover-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: $pagination-hover-bg;
-    border-color: $pagination-hover-border-color;
+    background-color: var(--#{$prefix}pagination-hover-bg);
+    border-color: var(--#{$prefix}pagination-hover-border-color);
  }

  &:focus {
    z-index: 3;
-    color: $pagination-focus-color;
-    background-color: $pagination-focus-bg;
+    color: var(--#{$prefix}pagination-focus-color);
+    background-color: var(--#{$prefix}pagination-focus-bg);
    outline: $pagination-focus-outline;
-    box-shadow: $pagination-focus-box-shadow;
+    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);
  }
 }

@@ -34,18 +75,23 @@
    margin-left: $pagination-margin-start;
  }

-  &.active .page-link {
-    z-index: 3;
-    color: $pagination-active-color;
-    @include gradient-bg($pagination-active-bg);
-    border-color: $pagination-active-border-color;
-  }
+  @if $pagination-margin-start == ($pagination-border-width * -1) {
+    &:first-child {
+      .page-link {
+        @include border-start-radius(var(--#{$prefix}pagination-border-radius));
+      }
+    }

-  &.disabled .page-link {
-    color: $pagination-disabled-color;
-    pointer-events: none;
-    background-color: $pagination-disabled-bg;
-    border-color: $pagination-disabled-border-color;
+    &: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));
+    }
  }
 }

@@ -53,7 +99,6 @@
 //
 // Sizing
 //
-@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);

 .pagination-lg {
  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
@@ -3,7 +3,7 @@
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
-  background-color: currentColor;
+  background-color: currentcolor;
  opacity: $placeholder-opacity-max;

  &.btn::before {
@@ -1,27 +1,46 @@
 .popover {
-  position: absolute;
-  top: 0;
-  left: 0 #{"/* rtl:ignore */"};
-  z-index: $zindex-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: $popover-max-width;
+  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($popover-font-size);
+  @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: $popover-bg;
+  background-color: var(--#{$prefix}popover-bg);
  background-clip: padding-box;
-  border: $popover-border-width solid $popover-border-color;
-  @include border-radius($popover-border-radius);
-  @include box-shadow($popover-box-shadow);
+  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 {
-    position: absolute;
    display: block;
-    width: $popover-arrow-width;
-    height: $popover-arrow-height;
+    width: var(--#{$prefix}popover-arrow-width);
+    height: var(--#{$prefix}popover-arrow-height);

    &::before,
    &::after {
@@ -30,62 +49,75 @@
      content: "";
      border-color: transparent;
      border-style: solid;
+      border-width: 0;
    }
  }
 }

 .bs-popover-top {
  > .popover-arrow {
-    bottom: subtract(-$popover-arrow-height, $popover-border-width);
+    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 {
      bottom: 0;
-      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
-      border-top-color: $popover-arrow-outer-color;
+      border-top-color: var(--#{$prefix}popover-arrow-border);
    }

    &::after {
-      bottom: $popover-border-width;
-      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
-      border-top-color: $popover-arrow-color;
+      bottom: var(--#{$prefix}popover-border-width);
+      border-top-color: var(--#{$prefix}popover-bg);
    }
  }
 }

+/* rtl:begin:ignore */
 .bs-popover-end {
  > .popover-arrow {
-    left: subtract(-$popover-arrow-height, $popover-border-width);
-    width: $popover-arrow-height;
-    height: $popover-arrow-width;
+    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 {
      left: 0;
-      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
-      border-right-color: $popover-arrow-outer-color;
+      border-right-color: var(--#{$prefix}popover-arrow-border);
    }

    &::after {
-      left: $popover-border-width;
-      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
-      border-right-color: $popover-arrow-color;
+      left: var(--#{$prefix}popover-border-width);
+      border-right-color: var(--#{$prefix}popover-bg);
    }
  }
 }

+/* rtl:end:ignore */
+
 .bs-popover-bottom {
  > .popover-arrow {
-    top: subtract(-$popover-arrow-height, $popover-border-width);
+    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 {
      top: 0;
-      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
-      border-bottom-color: $popover-arrow-outer-color;
+      border-bottom-color: var(--#{$prefix}popover-arrow-border);
    }

    &::after {
-      top: $popover-border-width;
-      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
-      border-bottom-color: $popover-arrow-color;
+      top: var(--#{$prefix}popover-border-width);
+      border-bottom-color: var(--#{$prefix}popover-bg);
    }
  }

@@ -95,33 +127,39 @@
    top: 0;
    left: 50%;
    display: block;
-    width: $popover-arrow-width;
-    margin-left: -$popover-arrow-width * .5;
+    width: var(--#{$prefix}popover-arrow-width);
+    margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
    content: "";
-    border-bottom: $popover-border-width solid $popover-header-bg;
+    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
  }
 }

+/* rtl:begin:ignore */
 .bs-popover-start {
  > .popover-arrow {
-    right: subtract(-$popover-arrow-height, $popover-border-width);
-    width: $popover-arrow-height;
-    height: $popover-arrow-width;
+    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 {
      right: 0;
-      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
-      border-left-color: $popover-arrow-outer-color;
+      border-left-color: var(--#{$prefix}popover-arrow-border);
    }

    &::after {
-      right: $popover-border-width;
-      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
-      border-left-color: $popover-arrow-color;
+      right: var(--#{$prefix}popover-border-width);
+      border-left-color: var(--#{$prefix}popover-bg);
    }
  }
 }

+/* rtl:end:ignore */
+
 .bs-popover-auto {
  &[data-popper-placement^="top"] {
    @extend .bs-popover-top;
@@ -139,13 +177,13 @@

 // Offset the popover to account for the popover arrow
 .popover-header {
-  padding: $popover-header-padding-y $popover-header-padding-x;
+  padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
  margin-bottom: 0; // Reset the default from Reboot
-  @include font-size($font-size-base);
-  color: $popover-header-color;
-  background-color: $popover-header-bg;
-  border-bottom: $popover-border-width solid $popover-border-color;
-  @include border-top-radius($popover-inner-border-radius);
+  @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;
@@ -153,6 +191,6 @@
 }

 .popover-body {
-  padding: $popover-body-padding-y $popover-body-padding-x;
-  color: $popover-body-color;
+  padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
+  color: var(--#{$prefix}popover-body-color);
 }
@@ -9,13 +9,24 @@
 // scss-docs-end progress-keyframes

 .progress {
+  // 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: $progress-height;
+  height: var(--#{$prefix}progress-height);
  overflow: hidden; // force rounded corners by cropping it
-  @include font-size($progress-font-size);
-  background-color: $progress-bg;
-  @include border-radius($progress-border-radius);
-  @include box-shadow($progress-box-shadow);
+  @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 {
@@ -23,16 +34,16 @@
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
-  color: $progress-bar-color;
+  color: var(--#{$prefix}progress-bar-color);
  text-align: center;
  white-space: nowrap;
-  background-color: $progress-bar-bg;
-  @include transition($progress-bar-transition);
+  background-color: var(--#{$prefix}progress-bar-bg);
+  @include transition(var(--#{$prefix}progress-bar-transition));
 }

 .progress-bar-striped {
  @include gradient-striped();
-  background-size: $progress-height $progress-height;
+  background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
 }

@if $enable-transitions {
@@ -27,7 +27,7 @@

 :root {
  @if $font-size-root != null {
-    font-size: var(--#{$variable-prefix}root-font-size);
+    @include font-size(var(--#{$prefix}root-font-size));
  }

  @if $enable-smooth-scroll {
@@ -48,13 +48,13 @@
 // scss-docs-start reboot-body-rules
 body {
  margin: 0; // 1
-  font-family: var(--#{$variable-prefix}body-font-family);
-  @include font-size(var(--#{$variable-prefix}body-font-size));
-  font-weight: var(--#{$variable-prefix}body-font-weight);
-  line-height: var(--#{$variable-prefix}body-line-height);
-  color: var(--#{$variable-prefix}body-color);
-  text-align: var(--#{$variable-prefix}body-text-align);
-  background-color: var(--#{$variable-prefix}body-bg); // 2
+  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
 }
@@ -64,20 +64,15 @@ body {
 // Content grouping
 //
 // 1. Reset Firefox's gray color
-// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field

 hr {
  margin: $hr-margin-y 0;
  color: $hr-color; // 1
-  background-color: currentColor;
  border: 0;
+  border-top: $hr-border-width solid $hr-border-color;
  opacity: $hr-opacity;
 }

-hr:not([size]) {
-  height: $hr-height; // 2
-}
-

 // Typography
 //
@@ -139,16 +134,14 @@ p {

 // Abbreviations
 //
-// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
-// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
-// 3. Add explicit cursor to indicate changed behavior.
-// 4. Prevent the text-decoration to be skipped.
+// 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],
-abbr[data-bs-original-title] { // 1
-  text-decoration: underline dotted; // 2
-  cursor: help; // 3
-  text-decoration-skip-ink: none; // 4
+abbr[title] {
+  text-decoration: underline dotted; // 1
+  cursor: help; // 2
+  text-decoration-skip-ink: none; // 3
 }


@@ -224,7 +217,7 @@ small {

 mark {
  padding: $mark-padding;
-  background-color: $mark-bg;
+  background-color: var(--#{$prefix}highlight-bg);
 }


@@ -248,11 +241,11 @@ sup { top: -.5em; }
 // Links

 a {
-  color: $link-color;
+  color: var(--#{$prefix}link-color);
  text-decoration: $link-decoration;

  &:hover {
-    color: $link-hover-color;
+    color: var(--#{$prefix}link-hover-color);
    text-decoration: $link-hover-decoration;
  }
 }
@@ -279,8 +272,6 @@ kbd,
 samp {
  font-family: $font-family-code;
  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
-  direction: ltr #{"/* rtl:ignore */"};
-  unicode-bidi: bidi-override;
 }

 // 1. Remove browser default top margin
@@ -305,7 +296,7 @@ pre {

 code {
  @include font-size($code-font-size);
-  color: $code-color;
+  color: var(--#{$prefix}code-color);
  word-wrap: break-word;

  // Streamline the style when inside anchors to avoid broken underline and more
@@ -445,11 +436,11 @@ select {
  }
 }

-// Remove the dropdown arrow in Chrome from inputs built with datalists.
+// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
 // See https://stackoverflow.com/a/54997118

-[list]::-webkit-calendar-picker-indicator {
-  display: none;
+[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`
@@ -571,16 +562,10 @@ legend {
 }


-// Inherit font family and line height for file input buttons
-
-::file-selector-button {
-  font: inherit;
-}
-
-// 1. Change font properties to `inherit`
+// 1. Inherit font family and line height for file input buttons
 // 2. Correct the inability to style clickable types in iOS and Safari.

-::-webkit-file-upload-button {
+::file-selector-button {
  font: inherit; // 1
  -webkit-appearance: button; // 2
 }
@@ -6,49 +6,68 @@
  // Generate palettes for full colors, grays, and theme colors.

  @each $color, $value in $colors {
-    --#{$variable-prefix}#{$color}: #{$value};
+    --#{$prefix}#{$color}: #{$value};
  }

  @each $color, $value in $grays {
-    --#{$variable-prefix}gray-#{$color}: #{$value};
+    --#{$prefix}gray-#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
-    --#{$variable-prefix}#{$color}: #{$value};
+    --#{$prefix}#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors-rgb {
-    --#{$variable-prefix}#{$color}-rgb: #{$value};
+    --#{$prefix}#{$color}-rgb: #{$value};
  }

-  --#{$variable-prefix}white-rgb: #{to-rgb($white)};
-  --#{$variable-prefix}black-rgb: #{to-rgb($black)};
-  --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)};
-  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
+  --#{$prefix}white-rgb: #{to-rgb($white)};
+  --#{$prefix}black-rgb: #{to-rgb($black)};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

  // Fonts

  // Note: Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
-  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
-  --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
-  --#{$variable-prefix}gradient: #{$gradient};
+  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$prefix}gradient: #{$gradient};

  // Root and body
-  // stylelint-disable custom-property-empty-line-before
  // scss-docs-start root-body-variables
  @if $font-size-root != null {
-    --#{$variable-prefix}root-font-size: #{$font-size-root};
+    --#{$prefix}root-font-size: #{$font-size-root};
  }
-  --#{$variable-prefix}body-font-family: #{$font-family-base};
-  --#{$variable-prefix}body-font-size: #{$font-size-base};
-  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
-  --#{$variable-prefix}body-line-height: #{$line-height-base};
-  --#{$variable-prefix}body-color: #{$body-color};
+  --#{$prefix}body-font-family: #{$font-family-base};
+  @include rfs($font-size-base, --#{$prefix}body-font-size);
+  --#{$prefix}body-font-weight: #{$font-weight-base};
+  --#{$prefix}body-line-height: #{$line-height-base};
+  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
-    --#{$variable-prefix}body-text-align: #{$body-text-align};
+    --#{$prefix}body-text-align: #{$body-text-align};
  }
-  --#{$variable-prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg: #{$body-bg};
  // scss-docs-end root-body-variables
-  // stylelint-enable custom-property-empty-line-before
+
+  // scss-docs-start root-border-var
+  --#{$prefix}border-width: #{$border-width};
+  --#{$prefix}border-style: #{$border-style};
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+
+  --#{$prefix}border-radius: #{$border-radius};
+  --#{$prefix}border-radius-sm: #{$border-radius-sm};
+  --#{$prefix}border-radius-lg: #{$border-radius-lg};
+  --#{$prefix}border-radius-xl: #{$border-radius-xl};
+  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
+  --#{$prefix}border-radius-pill: #{$border-radius-pill};
+  // scss-docs-end root-border-var
+
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+
+  --#{$prefix}code-color: #{$code-color};
+
+  --#{$prefix}highlight-bg: #{$mark-bg};
 }
@@ -2,6 +2,17 @@
 // 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 */"}; }
@@ -9,21 +20,25 @@
 // scss-docs-end spinner-border-keyframes

 .spinner-border {
-  display: inline-block;
-  width: $spinner-width;
-  height: $spinner-height;
-  vertical-align: $spinner-vertical-align;
-  border: $spinner-border-width solid currentColor;
+  // 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;
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: 50%;
-  animation: $spinner-animation-speed linear infinite spinner-border;
 }

 .spinner-border-sm {
-  width: $spinner-width-sm;
-  height: $spinner-height-sm;
-  border-width: $spinner-border-width-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
 }

 //
@@ -43,27 +58,28 @@
 // scss-docs-end spinner-grow-keyframes

 .spinner-grow {
-  display: inline-block;
-  width: $spinner-width;
-  height: $spinner-height;
-  vertical-align: $spinner-vertical-align;
-  background-color: currentColor;
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: 50%;
+  // 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;
-  animation: $spinner-animation-speed linear infinite spinner-grow;
 }

 .spinner-grow-sm {
-  width: $spinner-width-sm;
-  height: $spinner-height-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 {
-      animation-duration: $spinner-animation-speed * 2;
+      --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
    }
  }
 }
@@ -3,20 +3,22 @@
 //

 .table {
-  --#{$variable-prefix}table-bg: #{$table-bg};
-  --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
-  --#{$variable-prefix}table-striped-color: #{$table-striped-color};
-  --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
-  --#{$variable-prefix}table-active-color: #{$table-active-color};
-  --#{$variable-prefix}table-active-bg: #{$table-active-bg};
-  --#{$variable-prefix}table-hover-color: #{$table-hover-color};
-  --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
+  --#{$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;
-  color: $table-color;
+  color: var(--#{$prefix}table-color);
  vertical-align: $table-cell-vertical-align;
-  border-color: $table-border-color;
+  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.
@@ -25,9 +27,9 @@
  // stylelint-disable-next-line selector-max-universal
  > :not(caption) > * > * {
    padding: $table-cell-padding-y $table-cell-padding-x;
-    background-color: var(--#{$variable-prefix}table-bg);
+    background-color: var(--#{$prefix}table-bg);
    border-bottom-width: $table-border-width;
-    box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
+    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
  }

  > tbody {
@@ -37,13 +39,11 @@
  > thead {
    vertical-align: bottom;
  }
-
-  // Highlight border color between thead, tbody and tfoot.
-  > :not(:first-child) {
-    border-top: (2 * $table-border-width) solid $table-group-separator-color;
-  }
 }

+.table-group-divider {
+  border-top: ($table-border-width * 2) solid $table-group-separator-color;
+}

 //
 // Change placement of captions with a class
@@ -101,10 +101,19 @@
 //
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)

+// For rows
 .table-striped {
  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
-    color: var(--#{$variable-prefix}table-striped-color);
+    --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
+    color: var(--#{$prefix}table-striped-color);
+  }
+}
+
+// For columns
+.table-striped-columns {
+  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
+    --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
+    color: var(--#{$prefix}table-striped-color);
  }
 }

@@ -113,8 +122,8 @@
 // The `.table-active` class can be added to highlight rows or cells

 .table-active {
-  --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
-  color: var(--#{$variable-prefix}table-active-color);
+  --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg);
+  color: var(--#{$prefix}table-active-color);
 }

 // Hover effect
@@ -123,8 +132,8 @@

 .table-hover {
  > tbody > tr:hover > * {
-    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
-    color: var(--#{$variable-prefix}table-hover-color);
+    --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
+    color: var(--#{$prefix}table-hover-color);
  }
 }

@@ -1,14 +1,32 @@
 .toast {
-  width: $toast-max-width;
+  // 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($toast-font-size);
-  color: $toast-color;
+  @include font-size(var(--#{$prefix}toast-font-size));
+  color: var(--#{$prefix}toast-color);
  pointer-events: auto;
-  background-color: $toast-background-color;
+  background-color: var(--#{$prefix}toast-bg);
  background-clip: padding-box;
-  border: $toast-border-width solid $toast-border-color;
-  box-shadow: $toast-box-shadow;
-  @include border-radius($toast-border-radius);
+  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;
@@ -20,32 +38,36 @@
 }

 .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: $toast-spacing;
+    margin-bottom: var(--#{$prefix}toast-spacing);
  }
 }

 .toast-header {
  display: flex;
  align-items: center;
-  padding: $toast-padding-y $toast-padding-x;
-  color: $toast-header-color;
-  background-color: $toast-header-background-color;
+  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: $toast-border-width solid $toast-header-border-color;
-  @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
+  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: $toast-padding-x * -.5;
-    margin-left: $toast-padding-x;
+    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: $toast-padding-x; // apply to both vertical and horizontal
+  padding: var(--#{$prefix}toast-padding-x);
  word-wrap: break-word;
 }
@@ -1,24 +1,39 @@
 // Base class
 .tooltip {
-  position: absolute;
-  z-index: $zindex-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: $tooltip-margin;
+  padding: 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($tooltip-font-size);
+  @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: $tooltip-opacity; }
+  &.show { opacity: var(--#{$prefix}tooltip-opacity); }

  .tooltip-arrow {
-    position: absolute;
    display: block;
-    width: $tooltip-arrow-width;
-    height: $tooltip-arrow-height;
+    width: var(--#{$prefix}tooltip-arrow-width);
+    height: var(--#{$prefix}tooltip-arrow-height);

    &::before {
      position: absolute;
@@ -29,66 +44,56 @@
  }
 }

-.bs-tooltip-top {
-  padding: $tooltip-arrow-height 0;
+.bs-tooltip-top .tooltip-arrow {
+  bottom: 0;

-  .tooltip-arrow {
-    bottom: 0;
-
-    &::before {
-      top: -1px;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
-      border-top-color: $tooltip-arrow-color;
-    }
+  &::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);
  }
 }

-.bs-tooltip-end {
-  padding: 0 $tooltip-arrow-height;
+/* rtl:begin:ignore */
+.bs-tooltip-end .tooltip-arrow {
+  left: 0;
+  width: var(--#{$prefix}tooltip-arrow-height);
+  height: var(--#{$prefix}tooltip-arrow-width);

-  .tooltip-arrow {
-    left: 0;
-    width: $tooltip-arrow-height;
-    height: $tooltip-arrow-width;
-
-    &::before {
-      right: -1px;
-      border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
-      border-right-color: $tooltip-arrow-color;
-    }
+  &::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);
  }
 }

-.bs-tooltip-bottom {
-  padding: $tooltip-arrow-height 0;
+/* rtl:end:ignore */

-  .tooltip-arrow {
-    top: 0;
+.bs-tooltip-bottom .tooltip-arrow {
+  top: 0;

-    &::before {
-      bottom: -1px;
-      border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
-      border-bottom-color: $tooltip-arrow-color;
-    }
+  &::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);
  }
 }

-.bs-tooltip-start {
-  padding: 0 $tooltip-arrow-height;
+/* rtl:begin:ignore */
+.bs-tooltip-start .tooltip-arrow {
+  right: 0;
+  width: var(--#{$prefix}tooltip-arrow-height);
+  height: var(--#{$prefix}tooltip-arrow-width);

-  .tooltip-arrow {
-    right: 0;
-    width: $tooltip-arrow-height;
-    height: $tooltip-arrow-width;
-
-    &::before {
-      left: -1px;
-      border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
-      border-left-color: $tooltip-arrow-color;
-    }
+  &::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;
@@ -106,10 +111,10 @@

 // Wrapper for the tooltip content
 .tooltip-inner {
-  max-width: $tooltip-max-width;
-  padding: $tooltip-padding-y $tooltip-padding-x;
-  color: $tooltip-color;
+  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: $tooltip-bg;
-  @include border-radius($tooltip-border-radius);
+  background-color: var(--#{$prefix}tooltip-bg);
+  @include border-radius(var(--#{$prefix}tooltip-border-radius));
 }
@@ -35,6 +35,8 @@
@each $display, $font-size in $display-font-sizes {
  .display-#{$display} {
    @include font-size($font-size);
+    font-family: $display-font-family;
+    font-style: $display-font-style;
    font-weight: $display-font-weight;
    line-height: $display-line-height;
  }
@@ -1,5 +1,3 @@
-// stylelint-disable indentation
-
 // Utilities

 $utilities: () !default;
@@ -101,14 +99,14 @@ $utilities: map-merge(
    "border": (
      property: border,
      values: (
-        null: $border-width solid $border-color,
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-top": (
      property: border-top,
      values: (
-        null: $border-width solid $border-color,
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
@@ -116,14 +114,14 @@ $utilities: map-merge(
      property: border-right,
      class: border-end,
      values: (
-        null: $border-width solid $border-color,
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-bottom": (
      property: border-bottom,
      values: (
-        null: $border-width solid $border-color,
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
@@ -131,20 +129,35 @@ $utilities: map-merge(
      property: border-left,
      class: border-start,
      values: (
-        null: $border-width solid $border-color,
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-color": (
      property: border-color,
      class: border,
-      values: map-merge($theme-colors, ("white": $white))
+      local-vars: (
+        "border-opacity": 1
+      ),
+      values: $utilities-border-colors
    ),
    "border-width": (
-      property: border-width,
+      css-var: true,
+      css-variable-name: border-width,
      class: border,
      values: $border-widths
    ),
+    "border-opacity": (
+      css-var: true,
+      class: border-opacity,
+      values: (
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      )
+    ),
    // scss-docs-end utils-borders
    // Sizing utilities
    // scss-docs-start utils-sizing
@@ -238,12 +251,6 @@ $utilities: map-merge(
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
-    "gap": (
-      responsive: true,
-      property: gap,
-      class: gap,
-      values: $spacers
-    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
@@ -436,13 +443,20 @@ $utilities: map-merge(
      class: ps,
      values: $spacers
    ),
+    // Gap utility
+    "gap": (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $spacers
+    ),
    // scss-docs-end utils-spacing
    // Text
    // scss-docs-start utils-text
    "font-family": (
      property: font-family,
      class: font,
-      values: (monospace: var(--#{$variable-prefix}font-monospace))
+      values: (monospace: var(--#{$prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
@@ -463,6 +477,7 @@ $utilities: map-merge(
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
+        semibold: $font-weight-semibold,
        bolder: $font-weight-bolder
      )
    ),
@@ -567,7 +582,7 @@ $utilities: map-merge(
    "gradient": (
      property: background-image,
      class: bg,
-      values: (gradient: var(--#{$variable-prefix}gradient))
+      values: (gradient: var(--#{$prefix}gradient))
    ),
    // scss-docs-start utils-interaction
    "user-select": (
@@ -585,34 +600,36 @@ $utilities: map-merge(
      property: border-radius,
      class: rounded,
      values: (
-        null: $border-radius,
+        null: var(--#{$prefix}border-radius),
        0: 0,
-        1: $border-radius-sm,
-        2: $border-radius,
-        3: $border-radius-lg,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-2xl),
        circle: 50%,
-        pill: $border-radius-pill
+        pill: var(--#{$prefix}border-radius-pill)
      )
    ),
    "rounded-top": (
      property: border-top-left-radius border-top-right-radius,
      class: rounded-top,
-      values: (null: $border-radius)
+      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-end": (
      property: border-top-right-radius border-bottom-right-radius,
      class: rounded-end,
-      values: (null: $border-radius)
+      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-bottom": (
      property: border-bottom-right-radius border-bottom-left-radius,
      class: rounded-bottom,
-      values: (null: $border-radius)
+      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-start": (
      property: border-bottom-left-radius border-top-left-radius,
      class: rounded-start,
-      values: (null: $border-radius)
+      values: (null: var(--#{$prefix}border-radius))
    ),
    // scss-docs-end utils-border-radius
    // scss-docs-start utils-visibility
@@ -60,40 +60,13 @@ $colors: (
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
+  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
 ) !default;
 // scss-docs-end colors-map

-// scss-docs-start theme-color-variables
-$primary:       $blue !default;
-$secondary:     $gray-600 !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $gray-100 !default;
-$dark:          $gray-900 !default;
-// scss-docs-end theme-color-variables
-
-// scss-docs-start theme-colors-map
-$theme-colors: (
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "light":      $light,
-  "dark":       $dark
-) !default;
-// scss-docs-end theme-colors-map
-
-// scss-docs-start theme-colors-rgb
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
-// scss-docs-end theme-colors-rgb
-
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
 // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
 $min-contrast-ratio:   4.5 !default;
@@ -228,8 +201,8 @@ $indigos: (
 ) !default;

 $purples: (
-  "purple-100": $purple-200,
-  "purple-200": $purple-100,
+  "purple-100": $purple-100,
+  "purple-200": $purple-200,
  "purple-300": $purple-300,
  "purple-400": $purple-400,
  "purple-500": $purple-500,
@@ -324,6 +297,30 @@ $cyans: (
 ) !default;
 // fusv-enable

+// scss-docs-start theme-color-variables
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
+// scss-docs-end theme-color-variables
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark
+) !default;
+// scss-docs-end theme-colors-map
+
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
  ("<", "%3c"),
@@ -345,6 +342,7 @@ $enable-transitions:          true !default;
 $enable-reduced-motion:       true !default;
 $enable-smooth-scroll:        true !default;
 $enable-grid-classes:         true !default;
+$enable-container-classes:    true !default;
 $enable-cssgrid:              false !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;
@@ -355,7 +353,8 @@ $enable-important-utilities:  true !default;

 // Prefix for :root CSS variables

-$variable-prefix:             bs- !default;
+$variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+$prefix:                      $variable-prefix !default;

 // Gradient
 //
@@ -381,8 +380,6 @@ $spacers: (
  4: $spacer * 1.5,
  5: $spacer * 3,
 ) !default;
-
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 // scss-docs-end spacer-variables-maps

 // Position
@@ -405,39 +402,6 @@ $body-bg:                   $white !default;
 $body-color:                $gray-900 !default;
 $body-text-align:           null !default;

-// Utilities maps
-//
-// Extends the default `$theme-colors` maps to help create our utilities.
-
-// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
-// scss-docs-start utilities-colors
-$utilities-colors: $theme-colors-rgb !default;
-// scss-docs-end utilities-colors
-
-// scss-docs-start utilities-text-colors
-$utilities-text: map-merge(
-  $utilities-colors,
-  (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-color)
-  )
-) !default;
-$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
-// scss-docs-end utilities-text-colors
-
-// scss-docs-start utilities-bg-colors
-$utilities-bg: map-merge(
-  $utilities-colors,
-  (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-bg)
-  )
-) !default;
-$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
-// scss-docs-end utilities-bg-colors
-
 // Links
 //
 // Style anchor elements.
@@ -503,11 +467,9 @@ $grid-columns:                12 !default;
 $grid-gutter-width:           1.5rem !default;
 $grid-row-columns:            6 !default;

-$gutters: $spacers !default;
-
 // Container padding

-$container-padding-x: $grid-gutter-width * .5 !default;
+$container-padding-x: $grid-gutter-width !default;


 // Components
@@ -524,13 +486,17 @@ $border-widths: (
  5: 5px
 ) !default;

+$border-style:                solid !default;
 $border-color:                $gray-300 !default;
+$border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables

 // scss-docs-start border-radius-variables
-$border-radius:               .25rem !default;
-$border-radius-sm:            .2rem !default;
-$border-radius-lg:            .3rem !default;
+$border-radius:               .375rem !default;
+$border-radius-sm:            .25rem !default;
+$border-radius-lg:            .5rem !default;
+$border-radius-xl:            1rem !default;
+$border-radius-2xl:           2rem !default;
 $border-radius-pill:          50rem !default;
 // scss-docs-end border-radius-variables

@@ -574,11 +540,11 @@ $aspect-ratios: (

 // scss-docs-start font-variables
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
-$font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;
-$font-family-code:            var(--#{$variable-prefix}font-monospace) !default;
+$font-family-base:            var(--#{$prefix}font-sans-serif) !default;
+$font-family-code:            var(--#{$prefix}font-monospace) !default;

 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
 // $font-size-base affects the font size of the body text
@@ -590,6 +556,7 @@ $font-size-lg:                $font-size-base * 1.25 !default;
 $font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
 $font-weight-normal:          400 !default;
+$font-weight-semibold:        600 !default;
 $font-weight-bold:            700 !default;
 $font-weight-bolder:          bolder !default;

@@ -637,6 +604,8 @@ $display-font-sizes: (
  6: 2.5rem
 ) !default;

+$display-font-family: null !default;
+$display-font-style:  null !default;
 $display-font-weight: 300 !default;
 $display-line-height: $headings-line-height !default;
 // scss-docs-end display-headings
@@ -660,22 +629,26 @@ $blockquote-footer-font-size: $small-font-size !default;

 $hr-margin-y:                 $spacer !default;
 $hr-color:                    inherit !default;
-$hr-height:                   $border-width !default;
+
+// fusv-disable
+$hr-bg-color:                 null !default; // Deprecated in v5.2.0
+$hr-height:                   null !default; // Deprecated in v5.2.0
+// fusv-enable
+
+$hr-border-color:             null !default; // Allows for inherited colors
+$hr-border-width:             $border-width !default;
 $hr-opacity:                  .25 !default;

 $legend-margin-bottom:        .5rem !default;
 $legend-font-size:            1.5rem !default;
 $legend-font-weight:          null !default;

-$mark-padding:                .2em !default;
-
 $dt-font-weight:              $font-weight-bold !default;

-$nested-kbd-font-weight:      $font-weight-bold !default;
-
 $list-inline-padding:         .5rem !default;

-$mark-bg:                     #fcf8e3 !default;
+$mark-padding:                .1875em !default;
+$mark-bg:                     $yellow-100 !default;
 // scss-docs-end type-variables


@@ -691,7 +664,7 @@ $table-cell-padding-x-sm:     .25rem !default;

 $table-cell-vertical-align:   top !default;

-$table-color:                 $body-color !default;
+$table-color:                 var(--#{$prefix}body-color) !default;
 $table-bg:                    transparent !default;
 $table-accent-bg:             transparent !default;

@@ -711,11 +684,12 @@ $table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;

 $table-border-factor:         .1 !default;
 $table-border-width:          $border-width !default;
-$table-border-color:          $border-color !default;
+$table-border-color:          var(--#{$prefix}border-color) !default;

 $table-striped-order:         odd !default;
+$table-striped-columns-order: even !default;

-$table-group-separator-color: currentColor !default;
+$table-group-separator-color: currentcolor !default;

 $table-caption-color:         $text-muted !default;

@@ -794,8 +768,8 @@ $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
 $btn-disabled-opacity:        .65 !default;
 $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;

-$btn-link-color:              $link-color !default;
-$btn-link-hover-color:        $link-hover-color !default;
+$btn-link-color:              var(--#{$prefix}link-color) !default;
+$btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;

 // Allows for customizing button radius independently from global border radius
@@ -851,6 +825,7 @@ $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;

 $input-bg:                              $body-bg !default;
+$input-disabled-color:                  null !default;
 $input-disabled-bg:                     $gray-200 !default;
 $input-disabled-border-color:           null !default;

@@ -908,7 +883,7 @@ $form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow !default;
 $form-check-input-checked-color:          $component-active-color !default;
 $form-check-input-checked-bg-color:       $component-active-bg !default;
 $form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
-$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
+$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
 $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;

 $form-check-input-indeterminate-color:          $component-active-color !default;
@@ -964,7 +939,7 @@ $form-select-disabled-border-color: $input-disabled-border-color !default;
 $form-select-bg-position:           right $form-select-padding-x center !default;
 $form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
 $form-select-indicator-color:       $gray-800 !default;
-$form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
+$form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;

 $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
 $form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;
@@ -1041,7 +1016,7 @@ $form-feedback-valid-color:         $success !default;
 $form-feedback-invalid-color:       $danger !default;

 $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 // scss-docs-end form-feedback-variables
@@ -1074,6 +1049,7 @@ $zindex-modal-backdrop:             1050 !default;
 $zindex-modal:                      1055 !default;
 $zindex-popover:                    1070 !default;
 $zindex-tooltip:                    1080 !default;
+$zindex-toast:                      1090 !default;
 // scss-docs-end zindex-stack


@@ -1084,8 +1060,8 @@ $nav-link-padding-y:                .5rem !default;
 $nav-link-padding-x:                1rem !default;
 $nav-link-font-size:                null !default;
 $nav-link-font-weight:              null !default;
-$nav-link-color:                    $link-color !default;
-$nav-link-hover-color:              $link-hover-color !default;
+$nav-link-color:                    var(--#{$prefix}link-color) !default;
+$nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
 $nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
 $nav-link-disabled-color:           $gray-600 !default;

@@ -1124,15 +1100,6 @@ $navbar-toggler-font-size:          $font-size-lg !default;
 $navbar-toggler-border-radius:      $btn-border-radius !default;
 $navbar-toggler-focus-width:        $btn-focus-width !default;
 $navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
-// scss-docs-end navbar-variables
-
-// scss-docs-start navbar-theme-variables
-$navbar-dark-color:                 rgba($white, .55) !default;
-$navbar-dark-hover-color:           rgba($white, .75) !default;
-$navbar-dark-active-color:          $white !default;
-$navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-dark-toggler-border-color:  rgba($white, .1) !default;

 $navbar-light-color:                rgba($black, .55) !default;
 $navbar-light-hover-color:          rgba($black, .7) !default;
@@ -1140,12 +1107,20 @@ $navbar-light-active-color:         rgba($black, .9) !default;
 $navbar-light-disabled-color:       rgba($black, .3) !default;
 $navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-light-toggler-border-color: rgba($black, .1) !default;
+$navbar-light-brand-color:          $navbar-light-active-color !default;
+$navbar-light-brand-hover-color:    $navbar-light-active-color !default;
+// scss-docs-end navbar-variables

-$navbar-light-brand-color:                $navbar-light-active-color !default;
-$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
-$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
-// scss-docs-end navbar-theme-variables
+// scss-docs-start navbar-dark-variables
+$navbar-dark-color:                 rgba($white, .55) !default;
+$navbar-dark-hover-color:           rgba($white, .75) !default;
+$navbar-dark-active-color:          $white !default;
+$navbar-dark-disabled-color:        rgba($white, .25) !default;
+$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
+$navbar-dark-brand-color:           $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
+// scss-docs-end navbar-dark-variables


 // Dropdowns
@@ -1160,7 +1135,7 @@ $dropdown-spacer:                   .125rem !default;
 $dropdown-font-size:                $font-size-base !default;
 $dropdown-color:                    $body-color !default;
 $dropdown-bg:                       $white !default;
-$dropdown-border-color:             rgba($black, .15) !default;
+$dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            $border-radius !default;
 $dropdown-border-width:             $border-width !default;
 $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
@@ -1181,7 +1156,11 @@ $dropdown-item-padding-y:           $spacer * .25 !default;
 $dropdown-item-padding-x:           $spacer !default;

 $dropdown-header-color:             $gray-600 !default;
-$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
+$dropdown-header-padding-x:         $dropdown-item-padding-x !default;
+$dropdown-header-padding-y:         $dropdown-padding-y !default;
+// fusv-disable
+$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
+// fusv-enable
 // scss-docs-end dropdown-variables

 // scss-docs-start dropdown-dark-variables
@@ -1210,19 +1189,21 @@ $pagination-padding-x-sm:           .5rem !default;
 $pagination-padding-y-lg:           .75rem !default;
 $pagination-padding-x-lg:           1.5rem !default;

-$pagination-color:                  $link-color !default;
+$pagination-font-size:              $font-size-base !default;
+
+$pagination-color:                  var(--#{$prefix}link-color) !default;
 $pagination-bg:                     $white !default;
-$pagination-border-width:           $border-width !default;
 $pagination-border-radius:          $border-radius !default;
-$pagination-margin-start:           -$pagination-border-width !default;
+$pagination-border-width:           $border-width !default;
+$pagination-margin-start:           ($pagination-border-width * -1) !default;
 $pagination-border-color:           $gray-300 !default;

-$pagination-focus-color:            $link-hover-color !default;
+$pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
 $pagination-focus-bg:               $gray-200 !default;
 $pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
 $pagination-focus-outline:          0 !default;

-$pagination-hover-color:            $link-hover-color !default;
+$pagination-hover-color:            var(--#{$prefix}link-hover-color) !default;
 $pagination-hover-bg:               $gray-200 !default;
 $pagination-hover-border-color:     $gray-300 !default;

@@ -1255,7 +1236,7 @@ $card-spacer-y:                     $spacer !default;
 $card-spacer-x:                     $spacer !default;
 $card-title-spacer-y:               $spacer * .5 !default;
 $card-border-width:                 $border-width !default;
-$card-border-color:                 rgba($black, .125) !default;
+$card-border-color:                 var(--#{$prefix}border-color-translucent) !default;
 $card-border-radius:                $border-radius !default;
 $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
@@ -1275,10 +1256,10 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-start accordion-variables
 $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
-$accordion-color:                         $body-color !default;
+$accordion-color:                         $body-color !default; // Sass variable because of $accordion-button-icon
 $accordion-bg:                            $body-bg !default;
 $accordion-border-width:                  $border-width !default;
-$accordion-border-color:                  rgba($black, .125) !default;
+$accordion-border-color:                  var(--#{$prefix}border-color) !default;
 $accordion-border-radius:                 $border-radius !default;
 $accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;

@@ -1288,7 +1269,7 @@ $accordion-body-padding-x:                $accordion-padding-x !default;
 $accordion-button-padding-y:              $accordion-padding-y !default;
 $accordion-button-padding-x:              $accordion-padding-x !default;
 $accordion-button-color:                  $accordion-color !default;
-$accordion-button-bg:                     $accordion-bg !default;
+$accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
 $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
 $accordion-button-active-bg:              tint-color($component-active-bg, 90%) !default;
 $accordion-button-active-color:           shade-color($primary, 10%) !default;
@@ -1317,11 +1298,13 @@ $tooltip-border-radius:             $border-radius !default;
 $tooltip-opacity:                   .9 !default;
 $tooltip-padding-y:                 $spacer * .25 !default;
 $tooltip-padding-x:                 $spacer * .5 !default;
-$tooltip-margin:                    0 !default;
+$tooltip-margin:                    null !default; // TODO: remove this in v6

 $tooltip-arrow-width:               .8rem !default;
 $tooltip-arrow-height:              .4rem !default;
-$tooltip-arrow-color:               $tooltip-bg !default;
+// fusv-disable
+$tooltip-arrow-color:               null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
+// fusv-enable
 // scss-docs-end tooltip-variables

 // Form tooltips must come after regular tooltips
@@ -1342,11 +1325,12 @@ $popover-font-size:                 $font-size-sm !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
 $popover-border-width:              $border-width !default;
-$popover-border-color:              rgba($black, .2) !default;
+$popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             $border-radius-lg !default;
 $popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
 $popover-box-shadow:                $box-shadow !default;

+$popover-header-font-size:          $font-size-base !default;
 $popover-header-bg:                 shade-color($popover-bg, 6%) !default;
 $popover-header-color:              $headings-color !default;
 $popover-header-padding-y:          .5rem !default;
@@ -1358,11 +1342,14 @@ $popover-body-padding-x:            $spacer !default;

 $popover-arrow-width:               1rem !default;
 $popover-arrow-height:              .5rem !default;
-$popover-arrow-color:               $popover-bg !default;
-
-$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
 // scss-docs-end popover-variables

+// fusv-disable
+// Deprecated in Bootstrap 5.2.0 for CSS variables
+$popover-arrow-color:               $popover-bg !default;
+$popover-arrow-outer-color:         var(--#{$prefix}border-color-translucent) !default;
+// fusv-enable
+

 // Toasts

@@ -1373,8 +1360,8 @@ $toast-padding-y:                   .5rem !default;
 $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;
 $toast-background-color:            rgba($white, .85) !default;
-$toast-border-width:                1px !default;
-$toast-border-color:                rgba($black, .1) !default;
+$toast-border-width:                $border-width !default;
+$toast-border-color:                var(--#{$prefix}border-color-translucent) !default;
 $toast-border-radius:               $border-radius !default;
 $toast-box-shadow:                  $box-shadow !default;
 $toast-spacing:                     $container-padding-x !default;
@@ -1411,7 +1398,7 @@ $modal-title-line-height:           $line-height-base !default;

 $modal-content-color:               null !default;
 $modal-content-bg:                  $white !default;
-$modal-content-border-color:        rgba($black, .2) !default;
+$modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        $border-width !default;
 $modal-content-border-radius:       $border-radius-lg !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
@@ -1420,14 +1407,17 @@ $modal-content-box-shadow-sm-up:    $box-shadow !default;

 $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;
-$modal-header-border-color:         $border-color !default;
-$modal-footer-border-color:         $modal-header-border-color !default;
+
+$modal-header-border-color:         var(--#{$prefix}border-color) !default;
 $modal-header-border-width:         $modal-content-border-width !default;
-$modal-footer-border-width:         $modal-header-border-width !default;
 $modal-header-padding-y:            $modal-inner-padding !default;
 $modal-header-padding-x:            $modal-inner-padding !default;
 $modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility

+$modal-footer-bg:                   null !default;
+$modal-footer-border-color:         $modal-header-border-color !default;
+$modal-footer-border-width:         $modal-header-border-width !default;
+
 $modal-sm:                          300px !default;
 $modal-md:                          500px !default;
 $modal-lg:                          800px !default;
@@ -1509,7 +1499,7 @@ $list-group-action-active-bg:       $gray-200 !default;
 $thumbnail-padding:                 .25rem !default;
 $thumbnail-bg:                      $body-bg !default;
 $thumbnail-border-width:            $border-width !default;
-$thumbnail-border-color:            $gray-300 !default;
+$thumbnail-border-color:            var(--#{$prefix}border-color) !default;
 $thumbnail-border-radius:           $border-radius !default;
 $thumbnail-box-shadow:              $box-shadow-sm !default;
 // scss-docs-end thumbnail-variables
@@ -1569,11 +1559,13 @@ $carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://

 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+// scss-docs-end carousel-variables

+// scss-docs-start carousel-dark-variables
 $carousel-dark-indicator-active-bg:  $black !default;
 $carousel-dark-caption-color:        $black !default;
 $carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
-// scss-docs-end carousel-variables
+// scss-docs-end carousel-dark-variables


 // Spinners
@@ -1599,7 +1591,7 @@ $btn-close-height:           $btn-close-width !default;
 $btn-close-padding-x:        .25em !default;
 $btn-close-padding-y:        $btn-close-padding-x !default;
 $btn-close-color:            $black !default;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
 $btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
 $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;
@@ -1632,10 +1624,11 @@ $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
 $code-font-size:                    $small-font-size !default;
 $code-color:                        $pink !default;

-$kbd-padding-y:                     .2rem !default;
-$kbd-padding-x:                     .4rem !default;
+$kbd-padding-y:                     .1875rem !default;
+$kbd-padding-x:                     .375rem !default;
 $kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         $white !default;
-$kbd-bg:                            $gray-900 !default;
+$kbd-color:                         var(--#{$prefix}body-bg) !default;
+$kbd-bg:                            var(--#{$prefix}body-color) !default;
+$nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, removing in v6

 $pre-color:                         null !default;
@@ -1,14 +1,11 @@
-/*!
- * Bootstrap Grid v5.1.3 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
+@import "mixins/banner";
+@include bsBanner(Grid);

 $include-column-box-sizing: true !default;

@import "functions";
@import "variables";
+@import "maps";

@import "mixins/lists";
@import "mixins/breakpoints";
@@ -1,13 +1,9 @@
-/*!
- * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
- */
+@import "mixins/banner";
+@include bsBanner(Reboot);

@import "functions";
@import "variables";
+@import "maps";
@import "mixins";
@import "root";
@import "reboot";
@@ -1,16 +1,16 @@
-/*!
- * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
+@import "mixins/banner";
+@include bsBanner(Utilities);

 // Configuration
@import "functions";
@import "variables";
+@import "maps";
@import "mixins";
@import "utilities";

+// Layout & components
+@import "root";
+
 // Helpers
@import "helpers";

@@ -1,14 +1,12 @@
-/*!
- * Bootstrap v5.1.3 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
+@import "mixins/banner";
+@include bsBanner("");
+

 // scss-docs-start import-stack
 // Configuration
@import "functions";
@import "variables";
+@import "maps";
@import "mixins";
@import "utilities";

@@ -2,6 +2,7 @@
  position: relative;

  > .form-control,
+  > .form-control-plaintext,
  > .form-select {
    height: $form-floating-height;
    line-height: $form-floating-line-height;
@@ -11,16 +12,21 @@
    position: absolute;
    top: 0;
    left: 0;
+    width: 100%;
    height: 100%; // allow textareas
    padding: $form-floating-padding-y $form-floating-padding-x;
+    overflow: hidden;
+    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);
  }

-  // stylelint-disable no-duplicate-selectors
-  > .form-control {
+  > .form-control,
+  > .form-control-plaintext {
    padding: $form-floating-padding-y $form-floating-padding-x;

    &::placeholder {
@@ -46,6 +52,7 @@

  > .form-control:focus,
  > .form-control:not(:placeholder-shown),
+  > .form-control-plaintext,
  > .form-select {
    ~ label {
      opacity: $form-floating-label-opacity;
@@ -59,5 +66,10 @@
      transform: $form-floating-label-transform;
    }
  }
-  // stylelint-enable no-duplicate-selectors
+
+  > .form-control-plaintext {
+    ~ label {
+      border-width: $input-border-width 0; // Required to properly position label text - as explained above
+    }
+  }
 }
@@ -14,6 +14,18 @@
  }
 }

+.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 {
  width: $form-check-input-width;
  height: $form-check-input-width;
@@ -25,7 +37,7 @@
  background-size: contain;
  border: $form-check-input-border;
  appearance: none;
-  color-adjust: exact; // Keep themed appearance for print
+  print-color-adjust: exact; // Keep themed appearance for print
  @include transition($form-check-transition);

  &[type="checkbox"] {
@@ -53,7 +65,7 @@

    &[type="checkbox"] {
      @if $enable-gradients {
-        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
      } @else {
        background-image: escape-svg($form-check-input-checked-bg-image);
      }
@@ -61,7 +73,7 @@

    &[type="radio"] {
      @if $enable-gradients {
-        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
      } @else {
        background-image: escape-svg($form-check-radio-checked-bg-image);
      }
@@ -73,7 +85,7 @@
    border-color: $form-check-input-indeterminate-border-color;

    @if $enable-gradients {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
+      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
    } @else {
      background-image: escape-svg($form-check-input-indeterminate-bg-image);
    }
@@ -90,6 +102,7 @@
  &[disabled],
  &:disabled {
    ~ .form-check-label {
+      cursor: default;
      opacity: $form-check-label-disabled-opacity;
    }
  }
@@ -123,12 +136,22 @@
      background-position: $form-switch-checked-bg-position;

      @if $enable-gradients {
-        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
      } @else {
        background-image: 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 {
@@ -59,13 +59,13 @@
    opacity: 1;
  }

-  // Disabled and read-only inputs
+  // 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,
-  &[readonly] {
+  &: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.
@@ -91,25 +91,6 @@
  &:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: $form-file-button-hover-bg;
  }
-
-  &::-webkit-file-upload-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])::-webkit-file-upload-button {
-    background-color: $form-file-button-hover-bg;
-  }
 }

 // Readonly controls as plain text
@@ -128,6 +109,10 @@
  border: solid transparent;
  border-width: $input-border-width 0;

+  &:focus {
+    outline: 0;
+  }
+
  &.form-control-sm,
  &.form-control-lg {
    padding-right: 0;
@@ -153,12 +138,6 @@
    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
    margin-inline-end: $input-padding-x-sm;
  }
-
-  &::-webkit-file-upload-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 {
@@ -172,12 +151,6 @@
    margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
    margin-inline-end: $input-padding-x-lg;
  }
-
-  &::-webkit-file-upload-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
@@ -200,7 +173,7 @@ textarea {

 .form-control-color {
  width: $form-color-width;
-  height: auto; // Override fixed browser height
+  height: $input-height;
  padding: $input-padding-y;

  &:not(:disabled):not([readonly]) {
@@ -208,12 +181,14 @@ textarea {
  }

  &::-moz-color-swatch {
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    border: 0 !important; // stylelint-disable-line declaration-no-important
    @include border-radius($input-border-radius);
  }

  &::-webkit-color-swatch {
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
    @include border-radius($input-border-radius);
  }
+
+  &.form-control-sm { height: $input-height-sm; }
+  &.form-control-lg { height: $input-height-lg; }
 }
@@ -7,7 +7,6 @@
  display: block;
  width: 100%;
  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
-  // stylelint-disable-next-line property-no-vendor-prefix
  -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
  font-family: $form-select-font-family;
  @include font-size($form-select-font-size);
@@ -10,7 +10,8 @@
  width: 100%;

  > .form-control,
-  > .form-select {
+  > .form-select,
+  > .form-floating {
    position: relative; // For focus state's z-index
    flex: 1 1 auto;
    width: 1%;
@@ -19,8 +20,9 @@

  // Bring the "active" form control to the top of surrounding elements
  > .form-control:focus,
-  > .form-select:focus {
-    z-index: 3;
+  > .form-select:focus,
+  > .form-floating:focus-within {
+    z-index: 5;
  }

  // Ensure buttons are always above inputs for more visually pleasing borders.
@@ -31,7 +33,7 @@
    z-index: 2;

    &:focus {
-      z-index: 3;
+      z-index: 5;
    }
  }
 }
@@ -96,15 +98,19 @@
 // stylelint-disable-next-line no-duplicate-selectors
 .input-group {
  &:not(.has-validation) {
-    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
-    > .dropdown-toggle:nth-last-child(n + 3) {
+    > :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),
-    > .dropdown-toggle:nth-last-child(n + 4) {
+    > :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);
    }
  }
@@ -118,4 +124,9 @@
    margin-left: -$input-border-width;
    @include border-start-radius(0);
  }
+
+  > .form-floating:not(:first-child) > .form-control,
+  > .form-floating:not(:first-child) > .form-select {
+    @include border-start-radius(0);
+  }
 }
@@ -0,0 +1,10 @@
+// stylelint-disable function-name-case
+
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@each $color, $value in $theme-colors {
+  $color-rgb: to-rgb($value);
+  .text-bg-#{$color} {
+    color: color-contrast($value) if($enable-important-utilities, !important, null);
+    background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+  }
+}
@@ -1,11 +1,11 @@
@each $color, $value in $theme-colors {
  .link-#{$color} {
-    color: $value;
+    color: $value !important; // stylelint-disable-line declaration-no-important

    @if $link-shade-percentage != 0 {
      &:hover,
      &:focus {
-        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
      }
    }
  }
@@ -16,7 +16,7 @@
  z-index: $zindex-fixed;
 }

-// Responsive sticky top
+// Responsive sticky top and bottom
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -26,5 +26,11 @@
      top: 0;
      z-index: $zindex-sticky;
    }
+
+    .sticky#{$infix}-bottom {
+      position: sticky;
+      bottom: 0;
+      z-index: $zindex-sticky;
+    }
  }
 }
@@ -6,7 +6,7 @@

  &::before {
    display: block;
-    padding-top: var(--#{$variable-prefix}aspect-ratio);
+    padding-top: var(--#{$prefix}aspect-ratio);
    content: "";
  }

@@ -21,6 +21,6 @@

@each $key, $ratio in $aspect-ratios {
  .ratio-#{$key} {
-    --#{$variable-prefix}aspect-ratio: #{$ratio};
+    --#{$prefix}aspect-ratio: #{$ratio};
  }
 }
@@ -3,6 +3,6 @@
  align-self: stretch;
  width: 1px;
  min-height: 1em;
-  background-color: currentColor;
+  background-color: currentcolor;
  opacity: $hr-opacity;
 }
@@ -1,8 +1,12 @@
 // scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) {
-  color: $color;
-  @include gradient-bg($background);
-  border-color: $border;
+  --#{$prefix}alert-color: #{$color};
+  --#{$prefix}alert-bg: #{$background};
+  --#{$prefix}alert-border-color: #{$border};
+
+  @if $enable-gradients {
+    background-image: var(--#{$prefix}gradient);
+  }

  .alert-link {
    color: shade-color($color, 20%);
@@ -0,0 +1,9 @@
+@mixin bsBanner($file) {
+  /*!
+   * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/)
+   * Copyright 2011-2022 The Bootstrap Authors
+   * Copyright 2011-2022 Twitter, Inc.
+   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+   */
+}
+
@@ -2,7 +2,7 @@
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
-//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.

@@ -10,9 +10,9 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
 //    md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $n: index($breakpoint-names, $name);
@@ -24,7 +24,7 @@

 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
@@ -38,7 +38,7 @@
 // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 //
-//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $max: map-get($breakpoints, $name);
@@ -48,9 +48,9 @@
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
 // Useful for making responsive utilities.
 //
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -109,7 +109,7 @@
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
  $min:  breakpoint-min($name, $breakpoints);
  $next: breakpoint-next($name, $breakpoints);
-  $max:  breakpoint-max($next);
+  $max:  breakpoint-max($next, $breakpoints);

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
@@ -18,59 +18,20 @@
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
 ) {
-  color: $color;
-  @include gradient-bg($background);
-  border-color: $border;
-  @include box-shadow($btn-box-shadow);
-
-  &:hover {
-    color: $hover-color;
-    @include gradient-bg($hover-background);
-    border-color: $hover-border;
-  }
-
-  .btn-check:focus + &,
-  &:focus {
-    color: $hover-color;
-    @include gradient-bg($hover-background);
-    border-color: $hover-border;
-    @if $enable-shadows {
-      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
-    }
-  }
-
-  .btn-check:checked + &,
-  .btn-check:active + &,
-  &:active,
-  &.active,
-  .show > &.dropdown-toggle {
-    color: $active-color;
-    background-color: $active-background;
-    // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
-    border-color: $active-border;
-
-    &:focus {
-      @if $enable-shadows {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
-      } @else {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
-      }
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    color: $disabled-color;
-    background-color: $disabled-background;
-    // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
-    border-color: $disabled-border;
-  }
+  --#{$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

@@ -82,52 +43,28 @@
  $active-border: $color,
  $active-color: color-contrast($active-background)
 ) {
-  color: $color;
-  border-color: $color;
-
-  &:hover {
-    color: $color-hover;
-    background-color: $active-background;
-    border-color: $active-border;
-  }
-
-  .btn-check:focus + &,
-  &:focus {
-    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-  }
-
-  .btn-check:checked + &,
-  .btn-check:active + &,
-  &:active,
-  &.active,
-  &.dropdown-toggle.show {
-    color: $active-color;
-    background-color: $active-background;
-    border-color: $active-border;
-
-    &:focus {
-      @if $enable-shadows {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
-      } @else {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-      }
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    color: $color;
-    background-color: transparent;
-  }
+  --#{$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) {
-  padding: $padding-y $padding-x;
-  @include font-size($font-size);
-  // Manually declare to provide an override to the browser default
-  @include border-radius($border-radius, 0);
+  --#{$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
@@ -1,9 +1,11 @@
 // Container mixins

@mixin make-container($gutter: $container-padding-x) {
+  --#{$prefix}gutter-x: #{$gutter};
+  --#{$prefix}gutter-y: 0;
  width: 100%;
-  padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
-  padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
  margin-right: auto;
  margin-left: auto;
 }
@@ -104,6 +104,14 @@
    }
  }

+  .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: $color;
@@ -127,16 +135,16 @@
    }
  }

-  .input-group .form-control,
-  .input-group .form-select {
-    @include form-validation-state-selector($state) {
-      @if $state == "valid" {
-        z-index: 1;
-      } @else if $state == "invalid" {
-        z-index: 2;
-      }
-      &:focus {
-        z-index: 3;
+  .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;
+        }
      }
    }
  }
@@ -5,7 +5,7 @@
  background-color: $color;

  @if $enable-gradients {
-    background-image: var(--#{$variable-prefix}gradient);
+    background-image: var(--#{$prefix}gradient);
  }
 }
 // scss-docs-end gradient-bg-mixin
@@ -3,17 +3,17 @@
 // Generate semantic grid columns with these mixins.

@mixin make-row($gutter: $grid-gutter-width) {
-  --#{$variable-prefix}gutter-x: #{$gutter};
-  --#{$variable-prefix}gutter-y: 0;
+  --#{$prefix}gutter-x: #{$gutter};
+  --#{$prefix}gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
-  margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
 }

-@mixin make-col-ready($gutter: $grid-gutter-width) {
+@mixin make-col-ready() {
  // Add box sizing if only the grid is loaded
  box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
  // Prevent columns from becoming too narrow when at smaller grid tiers by
@@ -22,9 +22,9 @@
  flex-shrink: 0;
  width: 100%;
  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  margin-top: var(--#{$variable-prefix}gutter-y);
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  margin-top: var(--#{$prefix}gutter-y);
 }

@mixin make-col($size: false, $columns: $grid-columns) {
@@ -51,7 +51,7 @@
 // Row columns
 //
 // Specify on a parent element(e.g., .row) to force immediate children into NN
-// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// number of columns. Supports wrapping to new lines, but does not do a Masonry
 // style grid.
@mixin row-cols($count) {
  > * {
@@ -114,12 +114,12 @@
      @each $key, $value in $gutters {
        .g#{$infix}-#{$key},
        .gx#{$infix}-#{$key} {
-          --#{$variable-prefix}gutter-x: #{$value};
+          --#{$prefix}gutter-x: #{$value};
        }

        .g#{$infix}-#{$key},
        .gy#{$infix}-#{$key} {
-          --#{$variable-prefix}gutter-y: #{$value};
+          --#{$prefix}gutter-y: #{$value};
        }
      }
    }
@@ -2,30 +2,9 @@

 // scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
-  .page-link {
-    padding: $padding-y $padding-x;
-    @include font-size($font-size);
-  }
-
-  .page-item {
-    @if $pagination-margin-start == (-$pagination-border-width) {
-      &:first-child {
-        .page-link {
-          @include border-start-radius($border-radius);
-        }
-      }
-
-      &:last-child {
-        .page-link {
-          @include border-end-radius($border-radius);
-        }
-      }
-    } @else {
-      //Add border-radius to all pageLinks in case they have left margin
-      .page-link {
-        @include border-radius($border-radius);
-      }
-    }
-  }
+  --#{$prefix}pagination-padding-x: #{$padding-x};
+  --#{$prefix}pagination-padding-y: #{$padding-y};
+  @include rfs($font-size, --#{$prefix}pagination-font-size);
+  --#{$prefix}pagination-border-radius: #{$border-radius};
 }
 // scss-docs-end pagination-mixin
@@ -11,7 +11,7 @@
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
-  word-spacing: normal;
  white-space: normal;
+  word-spacing: normal;
  line-break: auto;
 }
@@ -5,17 +5,20 @@
    $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));

-    --#{$variable-prefix}table-bg: #{$background};
-    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
-    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
-    --#{$variable-prefix}table-active-bg: #{$active-bg};
-    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
-    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
-    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
+    --#{$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: $color;
-    border-color: mix($color, $background, percentage($table-border-factor));
+    color: var(--#{$prefix}table-color);
+    border-color: var(--#{$prefix}table-border-color);
  }
 }
 // scss-docs-end table-variant
@@ -20,12 +20,15 @@
    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
    $property-class: if($property-class == null, "", $property-class);

+    // Use custom CSS variable name if present, otherwise default to `class`
+    $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+
    // State params to generate pseudo-classes
    $state: if(map-has-key($utility, state), map-get($utility, state), ());

    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);

-    // Don't prefix if value key is null (eg. with shadow class)
+    // Don't prefix if value key is null (e.g. with shadow class)
    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");

    @if map-get($utility, rfs) {
@@ -52,20 +55,20 @@

      @if $is-css-var {
        .#{$property-class + $infix + $property-class-modifier} {
-          --#{$variable-prefix}#{$property-class}: #{$value};
+          --#{$prefix}#{$css-variable-name}: #{$value};
        }

        @each $pseudo in $state {
          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
-            --#{$variable-prefix}#{$property-class}: #{$value};
+            --#{$prefix}#{$css-variable-name}: #{$value};
          }
        }
      } @else {
        .#{$property-class + $infix + $property-class-modifier} {
          @each $property in $properties {
            @if $is-local-vars {
-              @each $local-var, $value in $is-local-vars {
-                --#{$variable-prefix}#{$local-var}: #{$value};
+              @each $local-var, $variable in $is-local-vars {
+                --#{$prefix}#{$local-var}: #{$variable};
              }
            }
            #{$property}: $value if($enable-important-utilities, !important, null);
@@ -75,6 +78,11 @@
        @each $pseudo in $state {
          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
+              }
              #{$property}: $value if($enable-important-utilities, !important, null);
            }
          }
@@ -1,17 +0,0 @@
-.card {
-  &.card-blog {
-    .card-image {
-      box-shadow: $box-shadow;
-
-      .img {
-        width: 100%;
-      }
-    }
-
-    .card-title {
-      a {
-        color: $dark;
-      }
-    }
-  }
-}
@@ -1,24 +0,0 @@
-.card {
-  &.card-horizontal {
-    box-shadow: none;
-
-    .card-image {
-      border-radius: $card-border-radius;
-
-      .img {
-        width: 100%;
-        border-radius: $card-border-radius;
-      }
-    }
-
-    .card-body {
-      .card-title {
-        font-size: $h4-font-size;
-
-        a {
-          color: $dark;
-        }
-      }
-    }
-  }
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Stefan	c673ed4f03	Update CHANGELOG.md	2023-05-03 18:35:28 +03:00
Stefan	470f1f1217	refactor: delete img	2023-05-03 18:25:52 +03:00
Stefan	53f1a70686	refactor: delete logos	2023-05-03 18:19:16 +03:00
Stefan	97136ffd25	refactor: delete campaign imgs	2023-05-03 18:14:51 +03:00
Stefan	a40e8447a1	refactor: update credits	2023-05-03 18:11:52 +03:00
Stefan	0ac206cfe8	refactor: update product to v3.1.0	2023-05-03 17:45:53 +03:00
Stefan	d5887c73ef	Update README.md	2023-03-31 11:24:56 +03:00
Stefan	08fee7e171	Merge pull request #210 from creativetimofficial/refactor/main refactor: update README	2023-03-29 18:52:11 +03:00
Stefan	70e4ed11a6	refactor: update README	2023-03-29 18:26:31 +03:00
Stefan	ef2f344f80	Merge pull request #209 from creativetimofficial/refactor/main refactor: add nepcha analytics script	2023-03-29 12:07:26 +03:00
Stefan	1c46532ace	refactor: add nepcha analytics script	2023-03-29 12:03:32 +03:00
Stefan	67a491b277	Merge pull request #200 from creativetimofficial/refactor/main Update README.md	2022-10-10 17:43:53 +03:00
Stefan	7a4b7f5571	Update README.md	2022-10-10 17:43:32 +03:00
Stefan	127584987e	Merge pull request #199 from creativetimofficial/refactor/main refactor: update product user aarchive version ot v3.0.5	2022-10-10 17:40:57 +03:00
Stefan	bf55b8d87c	Update template.html	2022-10-10 17:40:31 +03:00
Stefan	b2c270e965	refactor: update product user aarchive version ot v3.0.5	2022-10-10 17:38:41 +03:00
Stefan	12cc7f9c05	Merge pull request #193 from creativetimofficial/refactor/main refactor: update product to v3.0.4	2022-06-15 14:55:57 +03:00
Stefan	a759d06b62	refactor: update product to v3.0.4	2022-06-15 14:37:36 +03:00
Stefan	fc94c12af5	Merge pull request #192 from creativetimofficial/refactor/main feat: update product to v3.0.3	2022-06-08 15:45:31 +03:00
Stefan	7fe6c3ccdf	feat: update product to v3.0.3	2022-06-08 15:33:37 +03:00
Stefan	5eb4df9547	Merge pull request #189 from creativetimofficial/refactor/main refactor: update product to v3.0.2 - refactor SCSS	2022-03-25 11:06:20 +02:00
Stefan	2fdd99c9e4	refactor: update version - doc	2022-03-25 11:06:06 +02:00
Stefan	48761021be	refactor: update product to v3.0.2 - refactor SCSS	2022-03-25 11:02:05 +02:00
Stefan	9afc8fe4ff	Merge pull request #186 from creativetimofficial/refactor/main refactor: product update to v3.0.1	2022-03-07 16:37:30 +02:00
Stefan	23ad33bd81	refactor: product update to v3.0.1	2022-03-07 16:32:31 +02:00
dragosct	7969235347	Update README.md	2022-02-17 16:28:44 +02:00
Stefan	1da26598ab	Update README.md	2022-01-25 15:05:07 +02:00
Beniamin Marcu	2fed1729c2	Update README.md	2021-10-29 15:35:05 +03:00
Stefan	e64f44039a	Update README.md	2021-10-27 13:03:32 +03:00
Stefan	661b02057b	Update README.md	2021-10-27 12:08:57 +03:00
Stefan	49ce8ec474	Update README.md	2021-10-27 12:08:35 +03:00
Stefan	631720d24a	Update README.md	2021-10-27 12:07:25 +03:00
Stefan	94dfa20a1b	Update README.md	2021-10-27 12:04:31 +03:00
				`@@ -0,0 +1 @@`
				var __assign=this&&this.__assign\|\|function(){return(__assign=Object.assign\|\|function(t){for(var i,a=1,s=arguments.length;a<s;a++)for(var n in i=arguments[a])Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var s=this;this.target=t,this.endVal=i,this.options=a,this.version="2.0.7",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){s.startTime\|\|(s.startTime=t);var i=t-s.startTime;s.remaining=s.duration-i,s.useEasing?s.countDown?s.frameVal=s.startVal-s.easingFn(i,0,s.startVal-s.endVal,s.duration):s.frameVal=s.easingFn(i,s.startVal,s.endVal-s.startVal,s.duration):s.countDown?s.frameVal=s.startVal-(s.startVal-s.endVal)(i/s.duration):s.frameVal=s.startVal+(s.endVal-s.startVal)(i/s.duration),s.countDown?s.frameVal=s.frameVal<s.endVal?s.endVal:s.frameVal:s.frameVal=s.frameVal>s.endVal?s.endVal:s.frameVal,s.frameVal=Number(s.frameVal.toFixed(s.options.decimalPlaces)),s.printValue(s.frameVal),i<s.duration?s.rAF=requestAnimationFrame(s.count):null!==s.finalEndVal?s.update(s.finalEndVal):s.callback&&s.callback()},this.formatNumber=function(t){var i,a,n,e,r,o=t<0?"-":"";if(i=Math.abs(t).toFixed(s.options.decimalPlaces),n=(a=(i+="").split("."))[0],e=a.length>1?s.options.decimal+a[1]:"",s.options.useGrouping){r="";for(var l=0,h=n.length;l<h;++l)0!==l&&l%3==0&&(r=s.options.separator+r),r=n[h-l-1]+r;n=r}return s.options.numerals&&s.options.numerals.length&&(n=n.replace(/[0-9]/g,function(t){return s.options.numerals[+t]}),e=e.replace(/[0-9]/g,function(t){return s.options.numerals[+t]})),o+s.options.prefix+n+e+s.options.suffix},this.easeOutExpo=function(t,i,a,s){return a(1-Math.pow(2,-10t/s))1024/1023+i},this.options=__assign(__assign({},this.defaults),a),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined"}return t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var a=this.countDown?1:-1;this.endVal=t+athis.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error\|\|(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal\|\|this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName\|\|"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();