diff --git a/core/scss/_settings.scss b/core/scss/_settings.scss
index 0e19fba79..6d277ccd7 100644
--- a/core/scss/_settings.scss
+++ b/core/scss/_settings.scss
@@ -12,8 +12,8 @@ $prefix: 'tblr-' !default;
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
 
-$black: #000000 !default;
-$white: #ffffff !default;
+$black: #000 !default;
+$white: #fff !default;
 
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
 $min-contrast-ratio: 2 !default;
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index 93b396765..8d3032ba0 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -631,12 +631,12 @@ $extra-colors: (
 ) !default;
 
 $social-colors: (
-  'x': #000000,
+  'x': #000,
   'facebook': #1877f2,
   'twitter': #1da1f2,
   'linkedin': #0a66c2,
   'google': #dc4e41,
-  'youtube': #ff0000,
+  'youtube': #f00,
   'vimeo': #1ab7ea,
   'dribbble': #ea4c89,
   'github': #181717,
diff --git a/core/scss/bootstrap/_carousel.scss b/core/scss/bootstrap/_carousel.scss
index bd4b76752..c0690f96c 100644
--- a/core/scss/bootstrap/_carousel.scss
+++ b/core/scss/bootstrap/_carousel.scss
@@ -46,13 +46,13 @@
 
 .carousel-item-next:not(.carousel-item-start),
 .active.carousel-item-end {
-  /*rtl:ignore*/
+  /* rtl:ignore */
   transform: translateX(calc(var(--#{$prefix}dir) * 100%));
 }
 
 .carousel-item-prev:not(.carousel-item-end),
 .active.carousel-item-start {
-  /*rtl:ignore*/
+  /* rtl:ignore */
   transform: translateX(calc(var(--#{$prefix}dir) * -100%));
 }
 
diff --git a/core/scss/bootstrap/_nav.scss b/core/scss/bootstrap/_nav.scss
index ddc242688..3976ba7b3 100644
--- a/core/scss/bootstrap/_nav.scss
+++ b/core/scss/bootstrap/_nav.scss
@@ -141,7 +141,7 @@
 
     &:hover,
     &:focus {
-      border-bottom-color: currentcolor;
+      border-bottom-color: currentColor;
     }
   }
 
@@ -149,7 +149,7 @@
   .show > .nav-link {
     font-weight: $font-weight-bold;
     color: var(--#{$prefix}nav-underline-link-active-color);
-    border-bottom-color: currentcolor;
+    border-bottom-color: currentColor;
   }
 }
 
diff --git a/core/scss/bootstrap/_offcanvas.scss b/core/scss/bootstrap/_offcanvas.scss
index a03d35354..9d38f6435 100644
--- a/core/scss/bootstrap/_offcanvas.scss
+++ b/core/scss/bootstrap/_offcanvas.scss
@@ -55,7 +55,8 @@
         inset-inline-start: 0;
         width: var(--#{$prefix}offcanvas-width);
         border-inline-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-        /*rtl:ignore*/
+
+        /* rtl:ignore */
         transform: translateX(calc(var(--#{$prefix}dir) * -100%));
       }
 
@@ -64,7 +65,8 @@
         inset-inline-end: 0;
         width: var(--#{$prefix}offcanvas-width);
         border-inline-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-        /*rtl:ignore*/
+
+        /* rtl:ignore */
         transform: translateX(calc(var(--#{$prefix}dir) * 100%));
       }
 
diff --git a/core/scss/bootstrap/_placeholders.scss b/core/scss/bootstrap/_placeholders.scss
index 3a50c23d2..d6121b5af 100644
--- a/core/scss/bootstrap/_placeholders.scss
+++ b/core/scss/bootstrap/_placeholders.scss
@@ -5,7 +5,7 @@
   min-height: 1em;
   vertical-align: middle;
   cursor: wait;
-  background-color: currentcolor;
+  background-color: currentColor;
   opacity: $placeholder-opacity-max;
 
   &.btn::before {
diff --git a/core/scss/bootstrap/_spinners.scss b/core/scss/bootstrap/_spinners.scss
index 2a0bd22fc..7619eb08a 100644
--- a/core/scss/bootstrap/_spinners.scss
+++ b/core/scss/bootstrap/_spinners.scss
@@ -71,7 +71,7 @@
   --#{$prefix}spinner-animation-name: spinner-grow;
   // scss-docs-end spinner-grow-css-vars
 
-  background-color: currentcolor;
+  background-color: currentColor;
   opacity: 0;
 }
 
diff --git a/core/scss/fonts/_geist.scss b/core/scss/fonts/_geist.scss
index d2f7fa9f0..12c64062a 100644
--- a/core/scss/fonts/_geist.scss
+++ b/core/scss/fonts/_geist.scss
@@ -2,204 +2,204 @@
 @use '../config' as *;
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 200;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 300;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 400;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 500;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 600;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 700;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 800;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
-  font-weight: 800;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 900;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
   font-display: swap;
 }
 
 // Geist Sans Variable Font
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100 900;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
-  font-weight: 100 900;
-  font-style: normal;
   font-display: swap;
 }
 
 // Geist Mono Font Family
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 100;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 200;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 300;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 400;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 500;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 600;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 700;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 800;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
-  font-weight: 800;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 900;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
   font-display: swap;
 }
 
 // Geist Mono Variable Font
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 100 900;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
-  font-weight: 100 900;
-  font-style: normal;
   font-display: swap;
 }
diff --git a/core/scss/helpers/_index.scss b/core/scss/helpers/_index.scss
index 9cbdbd53c..20dd9b908 100644
--- a/core/scss/helpers/_index.scss
+++ b/core/scss/helpers/_index.scss
@@ -24,7 +24,7 @@
   align-self: stretch;
   width: $vr-border-width;
   min-height: 1em;
-  background-color: currentcolor;
+  background-color: currentColor;
   opacity: $hr-opacity;
 }
 
@@ -34,10 +34,10 @@
 .stretched-link {
   &::after {
     position: absolute;
-    top: 0;
-    inset-inline-end: 0;
-    bottom: 0;
     inset-inline-start: 0;
+    inset-inline-end: 0;
+    top: 0;
+    bottom: 0;
     z-index: 1;
     content: '';
   }
@@ -75,17 +75,17 @@
 
 .fixed-top {
   position: fixed;
-  top: 0;
-  inset-inline-end: 0;
   inset-inline-start: 0;
+  inset-inline-end: 0;
+  top: 0;
   z-index: $zindex-fixed;
 }
 
 .fixed-bottom {
   position: fixed;
+  inset-inline-start: 0;
   inset-inline-end: 0;
   bottom: 0;
-  inset-inline-start: 0;
   z-index: $zindex-fixed;
 }
 
@@ -123,8 +123,8 @@
 
   > * {
     position: absolute;
-    top: 0;
     inset-inline-start: 0;
+    top: 0;
     width: 100%;
     height: 100%;
   }
diff --git a/core/scss/layout/_animations.scss b/core/scss/layout/_animations.scss
index 61cc99a97..b44196216 100644
--- a/core/scss/layout/_animations.scss
+++ b/core/scss/layout/_animations.scss
@@ -61,7 +61,7 @@
 }
 
 @keyframes blink {
-  from {
+  0% {
     opacity: 0;
   }
 
@@ -69,7 +69,7 @@
     opacity: 1;
   }
 
-  to {
+  100% {
     opacity: 0;
   }
 }
@@ -94,7 +94,7 @@
     transform: scale3d(1.25, 1.25, 1.25) rotate(-5deg);
   }
 
-  to {
+  100% {
     transform: scaleX(1);
   }
 }
diff --git a/core/scss/layout/_core.scss b/core/scss/layout/_core.scss
index 198cb8d4c..c4b236f17 100644
--- a/core/scss/layout/_core.scss
+++ b/core/scss/layout/_core.scss
@@ -12,28 +12,28 @@ html {
 
 // stylelint-disable property-no-vendor-prefix
 body {
-  letter-spacing: $body-letter-spacing;
-  touch-action: manipulation;
-  text-rendering: optimizeLegibility;
+  position: relative;
+  height: 100%;
+  min-height: 100%;
+  padding: 0;
   font-feature-settings:
     'liga' 0,
     'cv03',
     'cv04',
     'cv11';
-  position: relative;
-  min-height: 100%;
-  height: 100%;
-  padding: 0;
+  letter-spacing: $body-letter-spacing;
+  touch-action: manipulation;
+  text-rendering: optimizeLegibility;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  @include media-print {
+  @include media-print() {
     background: transparent;
   }
 }
 
-@include scrollbar;
+@include scrollbar();
 
 //
 // Fluid container
@@ -54,20 +54,20 @@ body {
   --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
 
   @include media-breakpoint-up(md) {
-    background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
     padding: 1rem;
+    background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
     --#{$prefix}theme-boxed-border-radius: #{$border-radius};
   }
 
   .page {
-    margin: 0 auto;
     max-width: var(--#{$prefix}theme-boxed-width);
-    @include border-radius(var(--#{$prefix}theme-boxed-border-radius));
+    margin: 0 auto;
     color: var(--#{$prefix}body-color);
+    @include border-radius(var(--#{$prefix}theme-boxed-border-radius));
 
     @include media-breakpoint-up(md) {
-      border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
       background: var(--#{$prefix}body-bg);
+      border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
     }
 
     > .navbar:first-child {
diff --git a/core/scss/layout/_dark.scss b/core/scss/layout/_dark.scss
index 3a787dcdd..499db4b2b 100644
--- a/core/scss/layout/_dark.scss
+++ b/core/scss/layout/_dark.scss
@@ -40,7 +40,7 @@
 
     .navbar-brand-autodark {
       .navbar-brand-image {
-        @include autodark-image;
+        @include autodark-image();
       }
     }
   }
diff --git a/core/scss/layout/_footer.scss b/core/scss/layout/_footer.scss
index f9aeee880..b38851d5c 100644
--- a/core/scss/layout/_footer.scss
+++ b/core/scss/layout/_footer.scss
@@ -1,13 +1,13 @@
 @use '../config' as *;
 
 .footer {
-  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
-  background-color: $footer-bg;
   padding: $footer-padding-y 0;
-  color: $footer-color;
   margin-top: auto;
+  color: $footer-color;
+  background-color: $footer-bg;
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss
index f374288f3..12bd4ab03 100644
--- a/core/scss/layout/_navbar.scss
+++ b/core/scss/layout/_navbar.scss
@@ -17,8 +17,8 @@
       margin-inline-end: 0;
 
       .nav-link {
-        padding: 0.5rem calc(#{$container-padding-x} / 2);
         justify-content: start;
+        padding: 0.5rem calc(#{$container-padding-x} / 2);
       }
     }
 
@@ -27,19 +27,19 @@
     }
 
     .dropdown-menu {
-      padding: 0;
-      background: transparent;
       position: static;
-      color: inherit;
-      box-shadow: none;
-      border: none;
       min-width: 0;
+      padding: 0;
       margin: 0;
+      color: inherit;
+      background: transparent;
+      border: none;
+      box-shadow: none;
 
       .dropdown-item {
-        min-width: 0;
         display: flex;
         width: auto;
+        min-width: 0;
         padding-inline-start: add(calc(#{$container-padding-x} / 2), 1.75rem);
         color: inherit;
 
@@ -64,16 +64,16 @@
       }
     }
 
-    .dropdown-toggle:after {
+    .dropdown-toggle::after {
       margin-inline-start: auto;
     }
 
-    .nav-item.active:after {
-      border-bottom-width: 0;
-      border-inline-start-width: 3px;
+    .nav-item.active::after {
       inset-inline-end: auto;
       top: 0;
       bottom: 0;
+      border-inline-start-width: 3px;
+      border-bottom-width: 0;
     }
   }
 }
@@ -90,9 +90,9 @@ Navbar
   --#{$prefix}navbar-hover-color: #{$navbar-hover-color};
   align-items: stretch;
   min-height: $navbar-height;
-  box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
-  background: var(--#{$prefix}navbar-bg);
   color: var(--#{$prefix}navbar-color);
+  background: var(--#{$prefix}navbar-bg);
+  box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
 
   .navbar-collapse & {
     flex-grow: 1;
@@ -113,16 +113,17 @@ Navbar
 
     .nav-link {
       position: relative;
+      justify-content: center;
       min-width: 2.5rem;
       min-height: 2.5rem;
-      justify-content: center;
       @include border-radius(var(--#{$prefix}border-radius));
 
       .badge {
         position: absolute;
-        top: 0.5rem;
         inset-inline-end: 0.5rem;
-        /*rtl:ignore*/
+        top: 0.5rem;
+
+        /* rtl:ignore */
         transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
       }
     }
@@ -136,13 +137,13 @@ Navbar
 
     &#{$infix} {
       @include media-breakpoint-down(breakpoint-next($breakpoint)) {
-        @include navbar-vertical-nav;
+        @include navbar-vertical-nav();
       }
 
       @include media-breakpoint-up($next) {
         .navbar-collapse {
-          width: auto;
           flex: 1 1 auto;
+          width: auto;
         }
 
         .nav-item.active {
@@ -152,12 +153,12 @@ Navbar
             color: var(--#{$prefix}navbar-active-color);
           }
 
-          &:after {
-            content: '';
+          &::after {
             position: absolute;
             inset-inline-start: 0;
             inset-inline-end: 0;
             bottom: -0.25rem;
+            content: '';
             border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
             border-bottom-width: 2px;
           }
@@ -197,57 +198,57 @@ Navbar brand
  */
 .navbar-brand {
   display: inline-flex;
-  align-items: center;
-  font-weight: $navbar-brand-font-weight;
-  margin: 0;
-  line-height: 1;
   gap: $spacer-2;
+  align-items: center;
+  margin: 0;
+  font-weight: $navbar-brand-font-weight;
+  line-height: 1;
 }
 
 .navbar-brand-image {
-  height: $navbar-brand-image-height;
   width: auto;
+  height: $navbar-brand-image-height;
 }
 
 /**
 Navbar toggler
  */
 .navbar-toggler {
-  border: 0;
-  width: $navbar-brand-image-height;
-  height: $navbar-brand-image-height;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: $navbar-brand-image-height;
+  height: $navbar-brand-image-height;
+  border: 0;
 }
 
 .navbar-toggler-icon {
-  height: 2px;
+  position: relative;
   width: 1.25em;
+  height: 2px;
   background: currentColor;
   @include border-radius(var(--#{$prefix}border-radius-pill));
-  position: relative;
   @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
 
-  &:before,
-  &:after {
-    content: '';
-    display: block;
-    height: inherit;
-    width: inherit;
-    border-radius: inherit;
-    background: inherit;
+  &::before,
+  &::after {
     position: absolute;
     inset-inline-start: 0;
+    display: block;
+    width: inherit;
+    height: inherit;
+    content: '';
+    background: inherit;
+    border-radius: inherit;
     @include transition(inherit);
   }
 
-  &:before {
+  &::before {
     top: -0.45em;
   }
 
-  &:after {
+  &::after {
     bottom: -0.45em;
   }
 
@@ -255,12 +256,12 @@ Navbar toggler
     transform: rotate(45deg);
     @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
 
-    &:before {
+    &::before {
       top: 0;
       transform: rotate(-90deg);
     }
 
-    &:after {
+    &::after {
       bottom: 0;
       opacity: 0;
     }
@@ -282,9 +283,9 @@ Navbar nav
   --#{$prefix}nav-link-hover-bg: #{$navbar-nav-link-hover-bg};
   --#{$prefix}nav-link-icon-color: #{$nav-link-icon-color};
   --#{$prefix}nav-link-hover-icon-color: #{$nav-link-hover-icon-color};
-  margin: 0;
-  padding: 0;
   align-items: stretch;
+  padding: 0;
+  margin: 0;
 
   .nav-item {
     display: flex;
@@ -297,11 +298,11 @@ Navbar nav
 Navbar side
  */
 .navbar-side {
-  margin: 0;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
+  margin: 0;
 }
 
 /**
@@ -316,15 +317,15 @@ Navbar vertical
 
         &#{$infix} {
           @include media-breakpoint-up($next) {
-            width: $sidebar-width;
             position: fixed;
-            top: 0;
             inset-inline-start: 0;
+            top: 0;
             bottom: 0;
             z-index: $zindex-fixed;
             align-items: start;
-            overflow-y: scroll;
+            width: $sidebar-width;
             padding: 0;
+            overflow-y: scroll;
             @include transition(transform $transition-time);
 
             &.navbar-right,
@@ -334,8 +335,8 @@ Navbar vertical
             }
 
             .navbar-brand {
-              padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
               justify-content: center;
+              padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
             }
 
             .navbar-collapse {
@@ -343,8 +344,8 @@ Navbar vertical
             }
 
             .navbar-nav {
-              flex-direction: column;
               flex-grow: 1;
+              flex-direction: column;
               min-height: auto;
 
               .nav-link {
@@ -356,8 +357,8 @@ Navbar vertical
             > [class^='container'] {
               flex-direction: column;
               align-items: stretch;
-              min-height: 100%;
               justify-content: start;
+              min-height: 100%;
               padding: 0;
             }
 
@@ -376,7 +377,7 @@ Navbar vertical
               padding-inline-end: $sidebar-width;
             }
 
-            @include navbar-vertical-nav;
+            @include navbar-vertical-nav();
           }
         }
       }
@@ -385,15 +386,15 @@ Navbar vertical
 }
 
 .navbar-overlap {
-  &:after {
-    content: '';
-    height: $navbar-overlap-height;
+  &::after {
     position: absolute;
-    top: 100%;
     inset-inline-start: 0;
     inset-inline-end: 0;
-    background: inherit;
+    top: 100%;
     z-index: -1;
+    height: $navbar-overlap-height;
+    content: '';
+    background: inherit;
     box-shadow: inherit;
   }
 }
diff --git a/core/scss/layout/_page.scss b/core/scss/layout/_page.scss
index 268d3d723..32f18bba1 100644
--- a/core/scss/layout/_page.scss
+++ b/core/scss/layout/_page.scss
@@ -1,9 +1,9 @@
 @use '../config' as *;
 
 .page {
+  position: relative;
   display: flex;
   flex-direction: column;
-  position: relative;
   min-height: 100%;
 }
 
@@ -12,11 +12,11 @@
 }
 
 .page-wrapper {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
 
-  @include media-print {
+  @include media-print() {
     margin: 0 !important;
   }
 }
@@ -30,19 +30,19 @@
 
 // Content body
 .page-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
   margin-top: var(--#{$prefix}page-padding-y);
   margin-bottom: var(--#{$prefix}page-padding-y);
-  display: flex;
-  flex-direction: column;
-  flex: 1;
 }
 
 .page-body-card {
-  background: var(--#{$prefix}bg-surface);
-  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
+  flex: 1;
   padding: var(--#{$prefix}page-padding) 0;
   margin-bottom: 0;
-  flex: 1;
+  background: var(--#{$prefix}bg-surface);
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
 
   .page-body ~ & {
     margin-top: 0;
@@ -50,8 +50,8 @@
 }
 
 .page-cover {
-  background: no-repeat center/cover;
   min-height: 9rem;
+  background: no-repeat center/cover;
 
   @include media-breakpoint-up(md) {
     min-height: 12rem;
@@ -65,24 +65,24 @@
 .page-cover-overlay {
   position: relative;
 
-  &:after {
-    content: '';
+  &::after {
     position: absolute;
-    top: 0;
     inset-inline-start: 0;
     inset-inline-end: 0;
+    top: 0;
     bottom: 0;
+    content: '';
     background-image: $overlay-gradient;
   }
 }
 
 .page-header {
   display: flex;
-  flex-wrap: wrap;
-  min-height: 2.25rem;
   flex-direction: column;
+  flex-wrap: wrap;
   justify-content: center;
   max-width: 100%;
+  min-height: 2.25rem;
 
   .page-wrapper & {
     margin: var(--#{$prefix}page-padding-y) 0 0;
@@ -90,24 +90,24 @@
 }
 
 .page-header-border {
-  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   padding: var(--#{$prefix}page-padding-y) 0;
   margin: 0 !important;
   background-color: var(--#{$prefix}bg-surface);
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 }
 
 .page-pretitle {
-  @include subheader;
+  @include subheader();
 }
 
 .page-title {
-  margin: 0;
-  font-size: $page-title-font-size;
-  line-height: $page-title-line-height;
-  font-weight: $page-title-font-weight;
-  color: inherit;
   display: flex;
   align-items: center;
+  margin: 0;
+  font-size: $page-title-font-size;
+  font-weight: $page-title-font-weight;
+  line-height: $page-title-line-height;
+  color: inherit;
 
   svg {
     width: 1.5rem;
@@ -132,32 +132,32 @@
 .page-cover {
   --#{$prefix}page-cover-blur: 20px;
   --#{$prefix}page-cover-padding: 1rem;
+  position: relative;
   min-height: 6rem;
   padding: var(--#{$prefix}page-cover-padding) 0;
-  position: relative;
   overflow: hidden;
 }
 
 .page-cover-img {
   position: absolute;
-  top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
   inset-inline-start: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
   inset-inline-end: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
   bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
-  pointer-events: none;
-  filter: blur(var(--#{$prefix}page-cover-blur));
-  object-fit: cover;
-  background-size: cover;
-  background-position: center;
   z-index: -1;
+  pointer-events: none;
+  object-fit: cover;
+  filter: blur(var(--#{$prefix}page-cover-blur));
+  background-position: center;
+  background-size: cover;
 }
 
 //
 // Page tabs
 //
 .page-tabs {
-  margin-top: 0.5rem;
   position: relative;
+  margin-top: 0.5rem;
 }
 
 .page-header-tabs {
diff --git a/core/scss/layout/_root.scss b/core/scss/layout/_root.scss
index 544c9027d..5c291ac22 100644
--- a/core/scss/layout/_root.scss
+++ b/core/scss/layout/_root.scss
@@ -2,8 +2,8 @@
 
 :root,
 :host {
-  font-size: 16px;
   height: 100%;
+  font-size: 16px;
 }
 
 :root,
diff --git a/core/scss/marketing/_browser.scss b/core/scss/marketing/_browser.scss
index 617f94f0c..eccd4d95e 100644
--- a/core/scss/marketing/_browser.scss
+++ b/core/scss/marketing/_browser.scss
@@ -5,9 +5,9 @@
 
 .browser {
   @include border-radius(var(--#{$prefix}border-radius-lg));
-  box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
-  background: var(--#{$prefix}bg-surface-secondary);
   overflow: hidden;
+  background: var(--#{$prefix}bg-surface-secondary);
+  box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
 }
 
 .browser-header {
@@ -18,8 +18,8 @@
 }
 
 .browser-dots {
-  margin-inline-end: 3rem;
   display: flex;
+  margin-inline-end: 3rem;
 }
 
 .browser-dots-colored {
@@ -39,31 +39,31 @@
 }
 
 .browser-dot {
-  margin-inline-end: 0.5rem;
   width: 0.75rem;
   min-width: 0.75rem;
   height: 0.75rem;
+  margin-inline-end: 0.5rem;
   background: var(--#{$prefix}border-color);
-  @include border-radius(var(--#{$prefix}border-radius-circle));
   border: 1px solid var(--#{$prefix}border-color-dark);
+  @include border-radius(var(--#{$prefix}border-radius-circle));
 }
 
 .browser-input {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
-  text-decoration: none;
   padding: 0.25rem;
-  color: var(--#{$prefix}secondary);
   font-size: var(--#{$prefix}font-size-h5);
-  @include border-radius(var(--#{$prefix}border-radius));
   line-height: 1;
+  color: var(--#{$prefix}secondary);
+  text-decoration: none;
   cursor: pointer;
+  background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
   box-shadow:
     0 0 0 1px rgba(0, 0, 0, 0.05),
     0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
+  @include border-radius(var(--#{$prefix}border-radius));
 
   &:hover {
     text-decoration: none;
diff --git a/core/scss/marketing/_hero.scss b/core/scss/marketing/_hero.scss
index ed6d18c60..d4dab1e5f 100644
--- a/core/scss/marketing/_hero.scss
+++ b/core/scss/marketing/_hero.scss
@@ -4,15 +4,15 @@
 @use '../config' as *;
 
 .hero {
-  text-align: center;
   padding: 6.5rem 0;
+  text-align: center;
 }
 
 .hero-title {
   font-size: 3rem;
   font-weight: var(--#{$prefix}font-weight-black);
-  letter-spacing: $spacing-tight;
   line-height: $headings-line-height;
+  letter-spacing: $spacing-tight;
 
   @include media-breakpoint-down(md) {
     font-size: 2rem;
@@ -20,11 +20,11 @@
 }
 
 .hero-description {
-  color: var(--#{$prefix}secondary);
+  max-width: 45rem;
+  margin: 0 auto;
   font-size: var(--#{$prefix}font-size-h2);
   line-height: 1.5;
-  margin: 0 auto;
-  max-width: 45rem;
+  color: var(--#{$prefix}secondary);
 
   @include media-breakpoint-down(sm) {
     font-size: var(--#{$prefix}font-size-h3);
@@ -39,25 +39,25 @@
 // Hero subheader
 //
 .hero-subheader {
-  @include subheader;
+  @include subheader();
   margin-bottom: 0.5rem;
 }
 
 .hero-img {
-  margin: 4rem auto;
-  max-width: 65rem;
-  @include border-radius($border-radius-lg);
   position: relative;
   z-index: 1;
+  max-width: 65rem;
+  margin: 4rem auto;
+  @include border-radius($border-radius-lg);
   //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
   //  0 4px 6px -2px rgba($color-text, 0.05);
 
   img,
   svg {
+    position: relative;
+    display: block;
     max-width: 100%;
     height: auto;
-    display: block;
-    position: relative;
   }
 }
 //
diff --git a/core/scss/marketing/_pricing.scss b/core/scss/marketing/_pricing.scss
index 08051b838..842a78958 100644
--- a/core/scss/marketing/_pricing.scss
+++ b/core/scss/marketing/_pricing.scss
@@ -5,8 +5,8 @@ $pricing-card-width: 22rem;
 .pricing {
   display: flex;
   flex-direction: column;
-  margin: 0 auto;
   justify-content: center;
+  margin: 0 auto;
 
   @include media-breakpoint-up(md) {
     flex-direction: row;
@@ -14,21 +14,21 @@ $pricing-card-width: 22rem;
 }
 
 .pricing-card {
-  flex: 1;
+  position: relative;
   display: flex;
+  flex: 1;
   flex-direction: column;
-  background: var(--#{$prefix}bg-surface);
-  border: 1px solid $border-color;
   padding: 2rem;
   margin: 0 0 1rem;
-  position: relative;
-  box-shadow: var(--#{$prefix}shadow-card);
   text-align: center;
+  background: var(--#{$prefix}bg-surface);
+  border: 1px solid $border-color;
+  box-shadow: var(--#{$prefix}shadow-card);
   @include border-radius($border-radius-lg);
 
   @include media-breakpoint-up(md) {
-    margin: 1rem -1px;
     max-width: $pricing-card-width;
+    margin: 1rem -1px;
 
     &:first-child {
       @include border-radius($border-radius-lg 0 0 $border-radius-lg);
@@ -41,8 +41,8 @@ $pricing-card-width: 22rem;
 
   &.featured {
     z-index: 1;
-    border: 2px solid var(--#{$prefix}primary);
     order: -1;
+    border: 2px solid var(--#{$prefix}primary);
 
     @include media-breakpoint-up(md) {
       order: unset;
@@ -61,51 +61,51 @@ $pricing-card-width: 22rem;
 
 .pricing-label {
   position: absolute;
-  top: 0;
   inset-inline-start: 0;
-  transform: translateY(-50%);
-  vertical-align: bottom;
   inset-inline-end: 0;
+  top: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  vertical-align: bottom;
+  transform: translateY(-50%);
 }
 
 .pricing-btn {
-  margin-top: auto;
   padding-top: 2rem;
+  margin-top: auto;
 }
 
 .pricing-price {
   display: flex;
   justify-content: center;
-  font-size: 2.5rem;
-  line-height: 1;
-  font-weight: $font-weight-semibold;
   margin: 0.75rem 0;
+  font-size: 2.5rem;
+  font-weight: $font-weight-semibold;
+  line-height: 1;
 }
 
 .pricing-price-currency {
-  font-size: $h2-font-size;
-  line-height: 1.5;
   margin-inline-end: 0.25rem;
+  font-size: $h2-font-size;
   font-weight: $font-weight-semibold;
+  line-height: 1.5;
 }
 
 .pricing-price-description {
-  font-size: $h4-font-size;
-  line-height: $h4-line-height;
-  font-weight: $font-weight-normal;
-  color: $text-secondary;
   align-self: center;
   margin-inline-start: 0.5rem;
+  font-size: $h4-font-size;
+  font-weight: $font-weight-normal;
+  line-height: $h4-line-height;
+  color: $text-secondary;
 }
 
 .pricing-features {
-  margin: 1rem 0 0;
   padding: 0;
-  list-style: none;
+  margin: 1rem 0 0;
   text-align: start;
+  list-style: none;
 
   > li:not(:first-child) {
     margin-top: 0.25rem;
diff --git a/core/scss/marketing/_sections.scss b/core/scss/marketing/_sections.scss
index 44447b110..b91e0bfaa 100644
--- a/core/scss/marketing/_sections.scss
+++ b/core/scss/marketing/_sections.scss
@@ -35,9 +35,9 @@
 //
 .section {
   --section-bg: transparent;
-  background: var(--section-bg);
   position: relative;
   padding: 5rem 0;
+  background: var(--section-bg);
 }
 
 .section-sm {
@@ -63,9 +63,9 @@
 }
 
 .section-header {
-  text-align: center;
   max-width: 45rem;
   margin: 0 auto 5rem;
+  text-align: center;
 
   @at-root .section-sm & {
     margin-bottom: 4rem;
@@ -83,10 +83,10 @@
 }
 
 .section-description {
-  color: var(--#{$prefix}secondary);
+  margin-top: 1rem;
   font-size: var(--#{$prefix}font-size-h3);
   line-height: var(--#{$prefix}line-height-h3);
-  margin-top: 1rem;
+  color: var(--#{$prefix}secondary);
 }
 
 //
@@ -95,9 +95,9 @@
 .section-divider {
   position: absolute;
   bottom: 100%;
-  pointer-events: none;
-  height: 5rem;
   width: 100%;
+  height: 5rem;
+  pointer-events: none;
 
   path {
     fill: var(--section-bg);
@@ -109,14 +109,14 @@
   }
 
   .wave-2 {
-    animation: move-forever2 24s linear infinite;
     opacity: 0.5;
+    animation: move-forever2 24s linear infinite;
     animation-delay: -2s;
   }
 
   .wave-3 {
-    animation: move-forever3 18s linear infinite;
     opacity: 0.3;
+    animation: move-forever3 18s linear infinite;
     animation-delay: -2s;
   }
 }
diff --git a/core/scss/marketing/_shape.scss b/core/scss/marketing/_shape.scss
index 6da8c9574..312ada5e9 100644
--- a/core/scss/marketing/_shape.scss
+++ b/core/scss/marketing/_shape.scss
@@ -6,14 +6,14 @@
   --#{$prefix}shape-size: #{$avatar-size};
   --#{$prefix}shape-icon-size: #{$avatar-icon-size};
   --#{$prefix}shape-border-radius: 35%;
-  background-color: var(--#{$prefix}primary-lt);
-  color: var(--#{$prefix}primary);
-  @include border-radius(var(--#{$prefix}shape-border-radius));
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: var(--#{$prefix}shape-size);
   width: var(--#{$prefix}shape-size);
+  height: var(--#{$prefix}shape-size);
+  color: var(--#{$prefix}primary);
+  background-color: var(--#{$prefix}primary-lt);
+  @include border-radius(var(--#{$prefix}shape-border-radius));
 
   .icon {
     width: var(--#{$prefix}shape-icon-size);
@@ -30,7 +30,7 @@
 
 @each $name, $color in $colors {
   .shape-#{$name} {
-    background: var(--#{$prefix}#{$name}-lt);
     color: var(--#{$prefix}#{$name});
+    background: var(--#{$prefix}#{$name}-lt);
   }
 }
diff --git a/core/scss/mixins/bootstrap/_caret.scss b/core/scss/mixins/bootstrap/_caret.scss
index f4522d372..b9f3c69e7 100644
--- a/core/scss/mixins/bootstrap/_caret.scss
+++ b/core/scss/mixins/bootstrap/_caret.scss
@@ -65,7 +65,7 @@
   }
 
   @if $direction == 'left' {
-    &:after {
+    &::after {
       content: none;
     }
   }
diff --git a/core/scss/tests/_caret.test.scss b/core/scss/tests/_caret.test.scss
index 69322fe87..2adc55bcc 100644
--- a/core/scss/tests/_caret.test.scss
+++ b/core/scss/tests/_caret.test.scss
@@ -106,7 +106,7 @@
           margin-inline-end: 0.306em;
           transform: rotate(45deg);
         }
-        .t:after {
+        .t::after {
           content: none;
         }
       }
diff --git a/core/scss/ui/_accordion.scss b/core/scss/ui/_accordion.scss
index 6a79191f1..fc8f821c3 100644
--- a/core/scss/ui/_accordion.scss
+++ b/core/scss/ui/_accordion.scss
@@ -27,37 +27,37 @@
 .accordion-button {
   position: relative;
   display: flex;
+  gap: var(--#{$prefix}accordion-btn-gap);
   align-items: center;
   width: 100%;
   padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-padding-x);
+  font-size: inherit;
+  font-weight: var(--#{$prefix}accordion-btn-font-weight);
   color: inherit;
   text-align: inherit;
   background-color: transparent;
   border: 0;
-  font-size: inherit;
-  font-weight: var(--#{$prefix}accordion-btn-font-weight);
-  gap: var(--#{$prefix}accordion-btn-gap);
 
   &:not(.collapsed) {
+    color: var(--#{$prefix}accordion-active-color);
     border-bottom-color: transparent;
     box-shadow: none;
-    color: var(--#{$prefix}accordion-active-color);
   }
 }
 
 .accordion-header {
-  margin: 0;
   position: relative;
   display: flex;
   gap: var(--#{$prefix}accordion-header-gap);
   align-items: center;
   width: 100%;
+  margin: 0;
   color: var(--#{$prefix}accordion-btn-color);
   text-align: start;
   background-color: transparent;
   border: 0;
-  overflow-anchor: none;
   transition: transform $transition-time;
+  overflow-anchor: none;
 
   &:hover {
     z-index: 2;
@@ -81,17 +81,17 @@
 
 .accordion-button-toggle {
   display: flex;
-  line-height: 1;
-  transition: $transition-time transform;
-  margin-inline-start: auto;
-  margin-inline-end: 0;
-  color: var(--#{$prefix}secondary);
   width: var(--#{$prefix}accordion-btn-toggle-width);
   height: var(--#{$prefix}accordion-btn-toggle-width);
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+  line-height: 1;
+  color: var(--#{$prefix}secondary);
+  transition: $transition-time transform;
 
   .accordion-button:not(.collapsed) & {
-    transform: rotate(-180deg);
     color: var(--#{$prefix}accordion-active-color);
+    transform: rotate(-180deg);
   }
 
   path {
@@ -139,14 +139,14 @@
 }
 
 .accordion-body {
-  color: var(--#{$prefix}secondary);
   padding: 0 var(--#{$prefix}accordion-body-padding-x) var(--#{$prefix}accordion-body-padding-y);
+  color: var(--#{$prefix}secondary);
 }
 
 .accordion-flush {
   > .accordion-item {
-    border-inline-end: 0;
     border-inline-start: 0;
+    border-inline-end: 0;
     @include border-radius(0);
 
     &:first-child {
diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss
index 9538530ac..e7cf5c788 100644
--- a/core/scss/ui/_alerts.scss
+++ b/core/scss/ui/_alerts.scss
@@ -19,22 +19,22 @@
   --#{$prefix}alert-gap: #{$alert-gap};
 
   position: relative;
-  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
-  margin-bottom: var(--#{$prefix}alert-margin-bottom);
-  background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
-  @include border-radius(var(--#{$prefix}alert-border-radius));
-  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
-  box-shadow: var(--#{$prefix}box-shadow);
-  color: var(--#{$prefix}alert-color);
   display: flex;
   flex-direction: row;
   gap: var(--#{$prefix}alert-gap);
+  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: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
+  box-shadow: var(--#{$prefix}box-shadow);
+  @include border-radius(var(--#{$prefix}alert-border-radius));
 }
 
 .alert-heading {
-  color: inherit;
   margin-bottom: var(--#{$prefix}alert-heading-margin-bottom);
   font-weight: var(--#{$prefix}alert-heading-font-weight);
+  color: inherit;
 }
 
 .alert-description {
@@ -42,9 +42,9 @@
 }
 
 .alert-icon {
-  color: var(--#{$prefix}alert-color);
   width: var(--#{$prefix}alert-icon-size) !important;
   height: var(--#{$prefix}alert-icon-size) !important;
+  color: var(--#{$prefix}alert-color);
 }
 
 .alert-action {
@@ -75,16 +75,16 @@
 
   .btn-close {
     position: absolute;
-    top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
     inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
+    top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
     z-index: 1;
     padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
   }
 }
 
 .alert-important {
-  background-color: var(--#{$prefix}alert-variant-color);
   color: var(--#{$prefix}white);
+  background-color: var(--#{$prefix}alert-variant-color);
 
   .alert-description {
     color: inherit;
diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss
index de1d90047..0097c2a25 100644
--- a/core/scss/ui/_avatars.scss
+++ b/core/scss/ui/_avatars.scss
@@ -13,26 +13,26 @@
   --#{$prefix}avatar-brand-size: #{$avatar-brand-size};
   --#{$prefix}avatar-border-radius: #{$avatar-border-radius};
   position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: var(--#{$prefix}avatar-size);
   height: var(--#{$prefix}avatar-size);
   font-size: var(--#{$prefix}avatar-font-size);
   font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   color: var(--#{$prefix}secondary);
   text-align: center;
   text-transform: uppercase;
   vertical-align: bottom;
   user-select: none;
   background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
-  @include border-radius(var(--#{$prefix}avatar-border-radius));
   box-shadow: var(--#{$prefix}avatar-box-shadow);
   transition:
     color $transition-time,
     background-color $transition-time,
     box-shadow $transition-time;
+  @include border-radius(var(--#{$prefix}avatar-border-radius));
 
   .icon {
     width: var(--#{$prefix}avatar-icon-size);
@@ -89,7 +89,7 @@
 //
 .avatar-list {
   --#{$prefix}avatar-list-size: #{$avatar-size};
-  @include elements-list;
+  @include elements-list();
 
   a.avatar {
     &:hover {
@@ -125,11 +125,11 @@
 .avatar-upload {
   --#{$prefix}avatar-upload-icon-size: #{$avatar-upload-icon-size};
   --#{$prefix}avatar-upload-text-margin-top: #{$avatar-upload-text-margin-top};
+  flex-direction: column;
+  background: $form-check-input-bg;
 
   border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
-  background: $form-check-input-bg;
   box-shadow: none;
-  flex-direction: column;
   @include transition(color $transition-time, background-color $transition-time);
 
   svg {
@@ -139,16 +139,16 @@
   }
 
   &:hover {
-    border-color: var(--#{$prefix}primary);
     color: var(--#{$prefix}primary);
     text-decoration: none;
+    border-color: var(--#{$prefix}primary);
   }
 }
 
 .avatar-upload-text {
+  margin-top: var(--#{$prefix}avatar-upload-text-margin-top);
   font-size: $h6-font-size;
   line-height: 1;
-  margin-top: var(--#{$prefix}avatar-upload-text-margin-top);
 }
 
 .avatar-cover {
@@ -160,13 +160,13 @@
 
 .avatar-brand {
   --#{$prefix}avatar-brand-offset: #{$avatar-brand-offset};
-  width: var(--#{$prefix}avatar-brand-size);
-  height: var(--#{$prefix}avatar-brand-size);
   position: absolute;
   inset-inline-end: var(--#{$prefix}avatar-brand-offset);
   bottom: var(--#{$prefix}avatar-brand-offset);
   z-index: 1000;
+  width: var(--#{$prefix}avatar-brand-size);
+  height: var(--#{$prefix}avatar-brand-size);
   background: var(--#{$prefix}bg-surface);
-  @include border-radius(var(--#{$prefix}border-radius));
   border: 1px solid var(--#{$prefix}border-color);
+  @include border-radius(var(--#{$prefix}border-radius));
 }
diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss
index 70f952d0a..bb1688f5f 100644
--- a/core/scss/ui/_badges.scss
+++ b/core/scss/ui/_badges.scss
@@ -11,24 +11,24 @@
   --#{$prefix}badge-line-height: 1;
   --#{$prefix}badge-gap: #{$badge-gap};
   display: inline-flex;
+  gap: var(--#{$prefix}badge-gap);
+  align-items: center;
+  justify-content: center;
+  min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px);
   padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
-  font-weight: var(--#{$prefix}badge-font-weight);
+  overflow: hidden;
   font-size: var(--#{$prefix}badge-font-size);
+  font-weight: var(--#{$prefix}badge-font-weight);
+  line-height: var(--#{$prefix}badge-line-height);
   color: var(--#{$prefix}badge-color);
   text-align: center;
+  letter-spacing: 0.04em;
   white-space: nowrap;
-  justify-content: center;
-  align-items: center;
-  gap: var(--#{$prefix}badge-gap);
-  background: $badge-bg-color;
-  overflow: hidden;
+  vertical-align: bottom;
   user-select: none;
+  background: $badge-bg-color;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
   @include border-radius(var(--#{$prefix}badge-border-radius));
-  min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px);
-  letter-spacing: 0.04em;
-  vertical-align: bottom;
-  line-height: var(--#{$prefix}badge-line-height);
 
   @at-root a#{&} {
     background: var(--#{$prefix}bg-surface-secondary);
@@ -46,12 +46,12 @@
 .badge-dot {
   display: inline-block;
   width: $badge-empty-size;
-  height: $badge-empty-size;
   min-width: 0;
+  height: $badge-empty-size;
   min-height: auto;
   padding: 0;
-  @include border-radius(var(--#{$prefix}border-radius-pill));
   vertical-align: baseline;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 }
 
 //
@@ -73,7 +73,7 @@
 // Badges list
 //
 .badges-list {
-  @include elements-list;
+  @include elements-list();
 }
 
 //
@@ -81,11 +81,12 @@
 //
 .badge-notification {
   position: absolute !important;
-  top: 0 !important;
   inset-inline-end: 0 !important;
-  /*rtl:ignore*/
-  transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
+  top: 0 !important;
   z-index: 1;
+
+  /* rtl:ignore */
+  transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
 }
 
 .badge-blink {
diff --git a/core/scss/ui/_breadcrumbs.scss b/core/scss/ui/_breadcrumbs.scss
index ea8f2b752..f0fabd4a7 100644
--- a/core/scss/ui/_breadcrumbs.scss
+++ b/core/scss/ui/_breadcrumbs.scss
@@ -18,13 +18,13 @@
 
   display: flex;
   flex-wrap: wrap;
-  @include font-size(var(--#{$prefix}breadcrumb-font-size));
-  list-style: none;
-  background-color: var(--#{$prefix}breadcrumb-bg);
-  @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
   padding: 0;
   margin: 0;
+  list-style: none;
   background: transparent;
+  background-color: var(--#{$prefix}breadcrumb-bg);
+  @include font-size(var(--#{$prefix}breadcrumb-font-size));
+  @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
 
   a {
     color: var(--#{$prefix}breadcrumb-link-color);
@@ -41,8 +41,8 @@
 
 .breadcrumb-item {
   &.active {
-    color: var(--#{$prefix}breadcrumb-item-active-color);
     font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
+    color: var(--#{$prefix}breadcrumb-item-active-color);
 
     a {
       color: inherit;
@@ -53,7 +53,7 @@
   &.disabled {
     color: var(--#{$prefix}breadcrumb-item-disabled-color);
 
-    &:before {
+    &::before {
       color: inherit;
     }
 
@@ -71,7 +71,8 @@
       padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
       color: var(--#{$prefix}breadcrumb-divider-color);
       content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
-      /*rtl:raw:
+
+      /* rtl:raw:
       transform: scaleX(-1);
       */
     }
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index 53d5cdc3d..7d1f10ba5 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -17,26 +17,26 @@
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-bg};
   --#{$prefix}btn-active-border-color: #{$active-border-color};
+  position: relative;
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
-  box-shadow: var(--#{$prefix}btn-box-shadow);
-  position: relative;
   min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
   min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
+  white-space: nowrap;
+  box-shadow: var(--#{$prefix}btn-box-shadow);
 
   @include border-radius(var(--#{$prefix}btn-border-radius));
 
   .icon {
     width: var(--#{$prefix}btn-icon-size);
-    height: var(--#{$prefix}btn-icon-size);
     min-width: var(--#{$prefix}btn-icon-size);
-    font-size: var(--#{$prefix}btn-icon-size);
+    height: var(--#{$prefix}btn-icon-size);
     margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
-    vertical-align: bottom;
+    font-size: var(--#{$prefix}btn-icon-size);
     color: var(--#{$prefix}btn-icon-color);
+    vertical-align: bottom;
   }
 
   .avatar {
@@ -175,8 +175,8 @@
 // Button shapes
 //
 .btn-pill {
-  padding-inline-end: 1.5em;
   padding-inline-start: 1.5em;
+  padding-inline-end: 1.5em;
   @include border-radius(var(--#{$prefix}border-radius-pill));
 
   &[class*='btn-icon'] {
@@ -195,23 +195,22 @@
 //
 .btn-icon,
 .btn-action {
+  //[BUG] btn-sm and btn-xl with an icon looks broken
+  //issue #2470 fixed
+  min-width: calc(var(--#{$prefix}btn-line-height) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
   padding-inline-start: 0;
   padding-inline-end: 0;
 
   .icon {
     margin: calc(-1 * var(--#{$prefix}btn-padding-x));
   }
-
-  //[BUG] btn-sm and btn-xl with an icon looks broken
-  //issue #2470 fixed
-  min-width: calc(var(--#{$prefix}btn-line-height) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
 }
 
 //
 // Button list
 //
 .btn-list {
-  @include elements-list;
+  @include elements-list();
 }
 
 .btn-list-center {
@@ -224,12 +223,12 @@
 .btn-floating {
   --#{$prefix}btn-floating-offset: #{$btn-floating-offset};
   position: fixed;
-  z-index: $zindex-fixed;
-  bottom: var(--#{$prefix}btn-floating-offset);
   inset-inline-start: var(--#{$prefix}btn-floating-offset);
+  bottom: var(--#{$prefix}btn-floating-offset);
+  z-index: $zindex-fixed;
   box-shadow: var(--#{$prefix}shadow-dropdown);
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
@@ -247,20 +246,20 @@
     opacity: 0;
   }
 
-  &:after {
-    content: '';
-    display: inline-block;
-    vertical-align: text-bottom;
-    border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
-    border-inline-end-color: transparent;
-    @include border-radius(var(--#{$prefix}border-radius-pill));
-    color: var(--#{$prefix}btn-color);
+  &::after {
     position: absolute;
-    width: var(--#{$prefix}btn-icon-size);
-    height: var(--#{$prefix}btn-icon-size);
     inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
+    display: inline-block;
+    width: var(--#{$prefix}btn-icon-size);
+    height: var(--#{$prefix}btn-icon-size);
+    color: var(--#{$prefix}btn-color);
+    vertical-align: text-bottom;
+    content: '';
+    border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
+    border-inline-end-color: transparent;
     animation: spinner-border 0.75s linear infinite;
+    @include border-radius(var(--#{$prefix}border-radius-pill));
   }
 }
 
@@ -274,7 +273,7 @@
   background: transparent;
   box-shadow: none;
 
-  &:after {
+  &::after {
     content: none;
   }
 
@@ -294,7 +293,7 @@
     color: var(--#{$prefix}primary);
   }
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
@@ -302,7 +301,7 @@
 .btn-actions {
   display: flex;
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
@@ -315,7 +314,7 @@
   &:hover,
   &:focus-visible {
     .icon {
-      /*rtl:ignore*/
+      /* rtl:ignore */
       transform: translateX(calc(var(--#{$prefix}dir) * 4px));
     }
   }
@@ -333,7 +332,7 @@
     &:hover,
     &:focus-visible {
       .icon {
-        /*rtl:ignore*/
+        /* rtl:ignore */
         transform: translateX(calc(var(--#{$prefix}dir) * -4px));
       }
     }
diff --git a/core/scss/ui/_calendars.scss b/core/scss/ui/_calendars.scss
index c9e37979b..f1602e48d 100644
--- a/core/scss/ui/_calendars.scss
+++ b/core/scss/ui/_calendars.scss
@@ -79,11 +79,11 @@
 .calendar-range {
   position: relative;
 
-  &:before {
+  &::before {
     position: absolute;
-    top: 50%;
-    inset-inline-end: 0;
     inset-inline-start: 0;
+    inset-inline-end: 0;
+    top: 50%;
     height: var(--#{$prefix}calendar-date-size);
     content: '';
     background: color-transparent(var(--#{$prefix}primary), 0.1);
@@ -99,11 +99,11 @@
     }
   }
 
-  &.range-start:before {
+  &.range-start::before {
     inset-inline-start: 50%;
   }
 
-  &.range-end:before {
+  &.range-end::before {
     inset-inline-end: 50%;
   }
 }
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index cad4c346a..1b717cc56 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -21,7 +21,7 @@
 .card {
   @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
 
-  @include media-print {
+  @include media-print() {
     border: none;
     box-shadow: none;
   }
@@ -65,15 +65,15 @@
 .card-stamp {
   --#{$prefix}stamp-size: #{$card-stamp-size};
   position: absolute;
-  top: 0;
   inset-inline-end: 0;
+  top: 0;
   width: calc(var(--#{$prefix}stamp-size) * 1);
   height: calc(var(--#{$prefix}stamp-size) * 1);
   max-height: 100%;
-  border-start-end-radius: $border-radius;
-  opacity: $card-stamp-opacity;
   overflow: hidden;
   pointer-events: none;
+  border-start-end-radius: $border-radius;
+  opacity: $card-stamp-opacity;
 }
 
 .card-stamp-lg {
@@ -81,24 +81,24 @@
 }
 
 .card-stamp-icon {
-  background: var(--#{$prefix}secondary);
-  color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  position: relative;
+  inset-inline-end: calc(var(--#{$prefix}stamp-size) * -0.25);
+  top: calc(var(--#{$prefix}stamp-size) * -0.25);
   display: flex;
   align-items: center;
   justify-content: center;
-  @include border-radius(var(--#{$prefix}border-radius-pill));
   width: calc(var(--#{$prefix}stamp-size) * 1);
   height: calc(var(--#{$prefix}stamp-size) * 1);
-  position: relative;
-  top: calc(var(--#{$prefix}stamp-size) * -0.25);
-  inset-inline-end: calc(var(--#{$prefix}stamp-size) * -0.25);
   font-size: calc(var(--#{$prefix}stamp-size) * 0.75);
+  color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  background: var(--#{$prefix}secondary);
   transform: rotate(10deg);
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 
   .icon {
-    stroke-width: 2;
     width: calc(var(--#{$prefix}stamp-size) * 0.75);
     height: calc(var(--#{$prefix}stamp-size) * 0.75);
+    stroke-width: 2;
   }
 }
 
@@ -139,14 +139,14 @@
 
 .card-btn {
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
   padding: $card-spacer-y $card-spacer-x;
+  font-weight: var(--#{$prefix}font-weight-medium);
+  color: inherit;
   text-align: center;
   border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  flex: 1;
-  color: inherit;
-  font-weight: var(--#{$prefix}font-weight-medium);
   @include transition(background $transition-time);
 
   &:hover {
@@ -166,11 +166,11 @@ Stacked card
   --#{$prefix}card-stacked-offset: #{$card-stacked-offset};
   position: relative;
 
-  &:after {
+  &::after {
     position: absolute;
-    top: calc(-1 * var(--#{$prefix}card-stacked-offset));
-    inset-inline-end: var(--#{$prefix}card-stacked-offset);
     inset-inline-start: var(--#{$prefix}card-stacked-offset);
+    inset-inline-end: var(--#{$prefix}card-stacked-offset);
+    top: calc(-1 * var(--#{$prefix}card-stacked-offset));
     height: var(--#{$prefix}card-stacked-offset);
     content: '';
     background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
@@ -182,34 +182,34 @@ Stacked card
 .card-cover {
   position: relative;
   padding: $card-spacer-y $card-spacer-x;
-  background: #666666 no-repeat center/cover;
+  background: #666 no-repeat center/cover;
 
-  &:before {
+  &::before {
     position: absolute;
-    top: 0;
-    inset-inline-end: 0;
-    bottom: 0;
     inset-inline-start: 0;
+    inset-inline-end: 0;
+    top: 0;
+    bottom: 0;
     content: '';
     background: rgba($dark, 0.48);
   }
 
   &:first-child,
-  &:first-child:before {
+  &:first-child::before {
     @include border-radius($border-radius $border-radius 0 0);
   }
 }
 
 .card-cover-blurred {
-  &:before {
+  &::before {
     backdrop-filter: blur(2px);
   }
 }
 
 .card-actions {
   --#{$prefix}card-actions-gutter: #{$card-actions-gutter};
-  margin: calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) auto;
   padding-inline-start: var(--#{$prefix}card-actions-gutter);
+  margin: calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) auto;
 
   a {
     text-decoration: none;
@@ -218,9 +218,9 @@ Stacked card
 
 // Card header
 .card-header {
-  color: inherit;
   display: flex;
   align-items: center;
+  color: inherit;
   background-color: var(--#{$prefix}card-cap-bg);
 
   &:first-child {
@@ -229,15 +229,15 @@ Stacked card
 }
 
 .card-header-light {
-  border-bottom-color: transparent;
   background: var(--#{$prefix}bg-surface-tertiary);
+  border-bottom-color: transparent;
 }
 
 .card-header-tabs {
-  background: $card-header-tabs-bg;
   flex: 1;
-  margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
   padding: calc(var(--#{$prefix}card-cap-padding-y) * 0.5) calc(var(--#{$prefix}card-cap-padding-x) * 0.5) 0;
+  margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
+  background: $card-header-tabs-bg;
   @include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
 }
 
@@ -271,13 +271,13 @@ Stacked card
 }
 
 .card-link-rotate:hover {
-  transform: rotate(1.5deg);
   opacity: 1;
+  transform: rotate(1.5deg);
 }
 
 .card-link-pop:hover {
-  transform: translateY(-2px);
   opacity: 1;
+  transform: translateY(-2px);
 }
 
 // Card footer
@@ -290,9 +290,9 @@ Stacked card
 }
 
 .card-footer-transparent {
+  padding-top: 0;
   background: transparent;
   border-color: transparent;
-  padding-top: 0;
 }
 
 .card-footer-borderless {
@@ -324,8 +324,8 @@ Stacked card
   margin: 0 0 var(--#{$prefix}card-title-margin-bottom);
   font-size: $h3-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
-  color: var(--#{$prefix}heading-color);
   line-height: var(--#{$prefix}card-title-line-height);
+  color: var(--#{$prefix}heading-color);
 
   @at-root a#{&}:hover {
     color: inherit;
@@ -339,8 +339,8 @@ Stacked card
 .card-subtitle {
   --#{$prefix}card-subtitle-margin-start: #{$card-subtitle-margin-start};
   margin-bottom: $card-title-spacer-y;
+  font-weight: 400;
   color: var(--#{$prefix}secondary);
-  font-weight: normal;
 
   .card-header & {
     margin: 0;
@@ -383,7 +383,7 @@ Stacked card
     }
   }
 
-  @include media-print {
+  @include media-print() {
     padding: 0;
   }
 
@@ -402,8 +402,8 @@ Card optinos
 .card-options {
   --#{$prefix}card-options-top: #{$card-options-top};
   --#{$prefix}card-options-inset: #{$card-options-inset};
-  top: var(--#{$prefix}card-options-top);
   inset-inline-end: var(--#{$prefix}card-options-inset);
+  top: var(--#{$prefix}card-options-top);
   display: flex;
   margin-inline-start: auto;
 }
@@ -422,9 +422,9 @@ Card status
  */
 .card-status-top {
   position: absolute;
-  top: 0;
-  inset-inline-end: 0;
   inset-inline-start: 0;
+  inset-inline-end: 0;
+  top: 0;
   height: $card-status-size;
   @include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
 }
@@ -554,8 +554,8 @@ Card avatar
   --#{$prefix}card-avatar-ring-width: #{$card-avatar-ring-width};
   margin-inline-start: auto;
   margin-inline-end: auto;
-  box-shadow: 0 0 0 var(--#{$prefix}card-avatar-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * 0.5));
+  box-shadow: 0 0 0 var(--#{$prefix}card-avatar-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
 }
 
 /*
@@ -567,10 +567,10 @@ Card list group
   }
 
   .list-group-item {
-    padding-inline-end: $card-spacer-x;
     padding-inline-start: $card-spacer-x;
-    border-inline-end: 0;
+    padding-inline-end: $card-spacer-x;
     border-inline-start: 0;
+    border-inline-end: 0;
     border-radius: 0;
 
     &:last-child {
@@ -597,8 +597,8 @@ Card list group
       &.active,
       &:active,
       &:hover {
-        border-color: $card-border-color;
         color: var(--#{$prefix}body-color);
+        border-color: $card-border-color;
       }
 
       &.active {
@@ -662,8 +662,8 @@ Card list group
   }
 
   .nav-tabs + .tab-content .card {
-    border-end-start-radius: var(--#{$prefix}card-border-radius);
     border-start-start-radius: 0 !important;
+    border-end-start-radius: var(--#{$prefix}card-border-radius);
   }
 
   .tab-content:has(+ .nav-tabs) .card {
diff --git a/core/scss/ui/_carousel.scss b/core/scss/ui/_carousel.scss
index cc7b9afe8..3fe03c300 100644
--- a/core/scss/ui/_carousel.scss
+++ b/core/scss/ui/_carousel.scss
@@ -8,14 +8,14 @@
 
   inset-inline-start: auto;
   top: 0;
-  margin: 0 var(--#{$prefix}carousel-indicators-vertical-margin-inline-end) 0 0;
   flex-direction: column;
+  margin: 0 var(--#{$prefix}carousel-indicators-vertical-margin-inline-end) 0 0;
 
   [data-bs-target],
   [data-target] {
-    margin: $carousel-indicator-spacer 0 $carousel-indicator-spacer;
     width: $carousel-indicator-height;
     height: $carousel-indicator-width;
+    margin: $carousel-indicator-spacer 0 $carousel-indicator-spacer;
     border: 0;
     border-inline-start: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
     border-inline-end: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
@@ -27,9 +27,9 @@
   [data-target] {
     width: $carousel-indicator-dot-width;
     height: $carousel-indicator-dot-width;
-    @include border-radius(var(--#{$prefix}border-radius-pill));
-    border: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
     margin: 0;
+    border: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
+    @include border-radius(var(--#{$prefix}border-radius-pill));
   }
 }
 
@@ -38,21 +38,21 @@
   [data-target] {
     width: $carousel-indicator-thumb-width * 0.5;
     height: auto;
+    margin: 0 $carousel-indicator-spacer;
     background: no-repeat center/cover;
     border: 0;
-    @include border-radius(var(--#{$prefix}border-radius));
     box-shadow: $box-shadow;
-    margin: 0 $carousel-indicator-spacer;
     opacity: $carousel-indicator-thumb-opacity;
+    @include border-radius(var(--#{$prefix}border-radius));
 
     @include media-breakpoint-up(lg) {
       width: $carousel-indicator-thumb-width;
     }
 
-    &:before {
-      content: '';
-      padding-top: var(--#{$prefix}aspect-ratio, 100%);
+    &::before {
       display: block;
+      padding-top: var(--#{$prefix}aspect-ratio, 100%);
+      content: '';
     }
   }
 
@@ -65,11 +65,11 @@
 }
 
 .carousel-caption-background {
-  background: red;
   position: absolute;
   inset-inline-start: 0;
   inset-inline-end: 0;
   bottom: 0;
   height: 90%;
+  background: red;
   background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));
 }
diff --git a/core/scss/ui/_charts.scss b/core/scss/ui/_charts.scss
index 5ffeefcd3..e2416871a 100644
--- a/core/scss/ui/_charts.scss
+++ b/core/scss/ui/_charts.scss
@@ -39,8 +39,8 @@ Chart sparkline
   position: relative;
   width: var(--#{$prefix}chart-sparkline-width);
   height: var(--#{$prefix}chart-sparkline-height);
-  line-height: 1;
   min-height: 0 !important;
+  line-height: 1;
 }
 
 .chart-sparkline-sm {
@@ -65,10 +65,10 @@ Chart sparkline
   --#{$prefix}chart-sparkline-label-icon-size: #{$chart-sparkline-label-icon-size};
 
   position: absolute;
-  top: 0;
-  inset-inline-end: 0;
-  bottom: 0;
   inset-inline-start: 0;
+  inset-inline-end: 0;
+  top: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/core/scss/ui/_chat.scss b/core/scss/ui/_chat.scss
index 2b0518601..0cb167cb2 100644
--- a/core/scss/ui/_chat.scss
+++ b/core/scss/ui/_chat.scss
@@ -13,10 +13,10 @@
 }
 
 .chat-bubble {
+  position: relative;
+  padding: var(--#{$prefix}chat-bubble-padding);
   background: var(--#{$prefix}bg-surface-secondary);
   @include border-radius(var(--#{$prefix}border-radius-lg));
-  padding: var(--#{$prefix}chat-bubble-padding);
-  position: relative;
 }
 
 .chat-bubble-me {
diff --git a/core/scss/ui/_close.scss b/core/scss/ui/_close.scss
index a72a0a003..4d39746a4 100644
--- a/core/scss/ui/_close.scss
+++ b/core/scss/ui/_close.scss
@@ -9,24 +9,24 @@
   --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
   --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
   --#{$prefix}btn-close-size: #{$btn-close-width};
+  display: block;
 
   width: var(--#{$prefix}btn-close-size);
   height: var(--#{$prefix}btn-close-size);
   padding: $btn-close-padding-y $btn-close-padding-x;
   color: var(--#{$prefix}btn-close-color);
-  mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * 0.75);
+  cursor: pointer;
   background-color: var(--#{$prefix}btn-close-color);
   border: 0;
-  @include border-radius(var(--tblr-border-radius));
   opacity: var(--#{$prefix}btn-close-opacity);
-  cursor: pointer;
-  display: block;
+  mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * 0.75);
+  @include border-radius(var(--tblr-border-radius));
 
   &:hover {
     color: var(--#{$prefix}btn-close-color);
     text-decoration: none;
-    opacity: var(--#{$prefix}btn-close-hover-opacity);
     background-color: var(--#{$prefix}btn-close-color);
+    opacity: var(--#{$prefix}btn-close-hover-opacity);
   }
 
   &:focus {
@@ -42,7 +42,7 @@
     opacity: var(--#{$prefix}btn-close-disabled-opacity);
   }
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_datagrid.scss b/core/scss/ui/_datagrid.scss
index c4af24ab1..472d2c83d 100644
--- a/core/scss/ui/_datagrid.scss
+++ b/core/scss/ui/_datagrid.scss
@@ -10,11 +10,11 @@
   --#{$prefix}datagrid-title-margin-bottom: #{$datagrid-title-margin-bottom};
 
   display: grid;
-  grid-gap: var(--#{$prefix}datagrid-padding);
   grid-template-columns: repeat(auto-fit, minmax(var(--#{$prefix}datagrid-item-width), 1fr));
+  grid-gap: var(--#{$prefix}datagrid-padding);
 }
 
 .datagrid-title {
-  @include subheader;
+  @include subheader();
   margin-bottom: var(--#{$prefix}datagrid-title-margin-bottom);
 }
diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss
index 43e749cd8..e1133bd7f 100644
--- a/core/scss/ui/_dropdowns.scss
+++ b/core/scss/ui/_dropdowns.scss
@@ -14,27 +14,27 @@
   background-clip: border-box;
 
   &.card {
-    padding: 0;
-    min-width: $dropdown-max-width;
     display: none;
+    min-width: $dropdown-max-width;
+    padding: 0;
 
     &.show {
       display: flex;
     }
   }
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
 
 .dropdown-item {
-  min-width: $dropdown-min-width;
   display: flex;
+  gap: var(--#{$prefix}dropdown-item-gap);
   align-items: center;
+  min-width: $dropdown-min-width;
   margin: 0;
   line-height: $line-height-base;
-  gap: var(--#{$prefix}dropdown-item-gap);
 }
 
 .dropdown-item-icon {
@@ -45,15 +45,15 @@
 }
 
 .dropdown-item-indicator {
-  height: var(--#{$prefix}dropdown-item-icon-size);
   display: inline-flex;
+  align-items: center;
+  height: var(--#{$prefix}dropdown-item-icon-size);
   line-height: 1;
   vertical-align: bottom;
-  align-items: center;
 }
 
 .dropdown-header {
-  @include subheader;
+  @include subheader();
   padding-bottom: var(--#{$prefix}dropdown-header-padding-bottom);
   pointer-events: none;
 }
@@ -78,48 +78,49 @@
 }
 
 .dropdown-menu-arrow {
-  &:before {
-    content: '';
+  &::before {
     position: absolute;
-    top: calc(-1 * var(--#{$prefix}dropdown-arrow-offset));
     inset-inline-start: var(--#{$prefix}dropdown-arrow-inset);
+    top: calc(-1 * var(--#{$prefix}dropdown-arrow-offset));
+    z-index: -1;
     display: block;
-    background: inherit;
     width: 14px;
     height: 14px;
-    /*rtl:ignore*/
-    transform: rotate(45deg);
-    transform-origin: center;
+    clip: rect(0, 9px, 9px, 0);
+    content: '';
+    background: inherit;
     border: 1px solid;
     border-color: inherit;
-    z-index: -1;
-    clip: rect(0px, 9px, 9px, 0px);
+
+    /* rtl:ignore */
+    transform: rotate(45deg);
+    transform-origin: center;
   }
 
   &.dropdown-menu-end {
-    &:before {
-      inset-inline-end: var(--#{$prefix}dropdown-arrow-inset);
+    &::before {
       inset-inline-start: auto;
+      inset-inline-end: var(--#{$prefix}dropdown-arrow-inset);
     }
   }
 }
 
 .dropend {
   > .dropdown-menu {
-    margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
     margin-inline-start: calc(-1 * var(--#{$prefix}dropdown-dropend-offset));
+    margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
   }
 
   .dropdown-toggle {
-    &:after {
+    &::after {
       margin-inline-start: auto;
     }
   }
 }
 
 .dropdown-menu-card {
-  padding: 0;
   min-width: var(--#{$prefix}dropdown-menu-card-min-width);
+  padding: 0;
 
   > .card {
     margin: 0;
diff --git a/core/scss/ui/_empty.scss b/core/scss/ui/_empty.scss
index 1c8f36536..720c59d5b 100644
--- a/core/scss/ui/_empty.scss
+++ b/core/scss/ui/_empty.scss
@@ -25,9 +25,9 @@
 }
 
 .empty-icon {
-  margin: 0 0 var(--#{$prefix}empty-icon-margin-bottom);
   width: var(--#{$prefix}empty-icon-size);
   height: var(--#{$prefix}empty-icon-size);
+  margin: 0 0 var(--#{$prefix}empty-icon-margin-bottom);
   line-height: 1;
   color: var(--#{$prefix}secondary);
 
@@ -52,8 +52,8 @@
 
 .empty-title {
   font-size: $h2-font-size;
-  line-height: $h2-line-height;
   font-weight: $headings-font-weight;
+  line-height: $h2-line-height;
 }
 
 .empty-title,
diff --git a/core/scss/ui/_flags.scss b/core/scss/ui/_flags.scss
index 07b6f9eef..1d38ce692 100644
--- a/core/scss/ui/_flags.scss
+++ b/core/scss/ui/_flags.scss
@@ -8,14 +8,14 @@
   display: inline-block;
   width: config.$avatar-size;
   aspect-ratio: 1.33333;
+  vertical-align: bottom;
   background: no-repeat center/cover;
   box-shadow: config.$flag-box-shadow;
   @include config.border-radius(config.$flag-border-radius);
-  vertical-align: bottom;
 
   &.flag-country-np {
-    box-shadow: none;
     border-radius: 0;
+    box-shadow: none;
   }
 }
 
diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss
index 9a1e0ebc0..3cee1a606 100644
--- a/core/scss/ui/_forms.scss
+++ b/core/scss/ui/_forms.scss
@@ -17,10 +17,10 @@ Form label
   font-weight: var(--#{$prefix}font-weight-medium);
 
   &.required {
-    &:after {
-      content: '*';
+    &::after {
       margin-inline-start: var(--#{$prefix}form-label-required-gap);
       color: $red;
+      content: '*';
     }
   }
 }
@@ -76,8 +76,8 @@ Form control
  */
 .form-control {
   &:-webkit-autofill {
-    box-shadow: 0 0 0 1000px var(--#{$prefix}bg-surface-secondary) inset;
     color: var(--#{$prefix}body-color);
+    box-shadow: 0 0 0 1000px var(--#{$prefix}bg-surface-secondary) inset;
     -webkit-text-fill-color: var(--#{$prefix}body-color);
   }
 
@@ -98,14 +98,14 @@ Form control
 }
 
 .form-control-dark {
-  background-color: rgba($black, 0.1);
   color: $white;
+  background-color: rgba($black, 0.1);
   border-color: transparent;
 
   &:focus {
     background-color: rgba($black, 0.1);
-    box-shadow: none;
     border-color: rgba($white, 0.24);
+    box-shadow: none;
   }
 
   &::placeholder {
@@ -119,11 +119,11 @@ Form control
 
 .form-control-flush {
   padding: 0;
+  line-height: inherit;
+  resize: none;
   background: none !important;
   border-color: transparent !important;
-  resize: none;
   box-shadow: none !important;
-  line-height: inherit;
 }
 
 .form-footer {
@@ -155,12 +155,12 @@ Form help
   --#{$prefix}form-help-font-size: #{$form-help-font-size};
 
   display: inline-flex;
-  font-weight: var(--#{$prefix}font-weight-semibold);
   align-items: center;
   justify-content: center;
   width: var(--#{$prefix}form-help-size);
   height: var(--#{$prefix}form-help-size);
   font-size: var(--#{$prefix}form-help-font-size);
+  font-weight: var(--#{$prefix}font-weight-semibold);
   color: $form-secondary-color;
   text-align: center;
   text-decoration: none;
@@ -222,8 +222,8 @@ Input group
   }
 
   .input-group-text {
-    background: $form-check-input-bg;
     z-index: 10;
+    background: $form-check-input-bg;
     @include transition($input-transition);
 
     &:first-child {
diff --git a/core/scss/ui/_grid.scss b/core/scss/ui/_grid.scss
index 71bb3a5ba..44cfbfaa6 100644
--- a/core/scss/ui/_grid.scss
+++ b/core/scss/ui/_grid.scss
@@ -22,13 +22,13 @@
 @each $name, $value in (0: 0, sm: $grid-row-gutter-sm, md: $grid-row-gutter-md, lg: $grid-row-gutter-lg) {
   .row-#{$name} {
     --#{$prefix}grid-row-gutter: #{$value};
-    margin-inline-end: calc(-1 * var(--#{$prefix}grid-row-gutter));
     margin-inline-start: calc(-1 * var(--#{$prefix}grid-row-gutter));
+    margin-inline-end: calc(-1 * var(--#{$prefix}grid-row-gutter));
 
     > .col,
     > [class*='col-'] {
-      padding-inline-end: var(--#{$prefix}grid-row-gutter);
       padding-inline-start: var(--#{$prefix}grid-row-gutter);
+      padding-inline-end: var(--#{$prefix}grid-row-gutter);
     }
 
     .card {
@@ -128,9 +128,9 @@
   height: 100%;
 
   > :not(template) {
-    flex: 1;
     display: flex;
-    justify-content: center;
+    flex: 1;
     flex-direction: column;
+    justify-content: center;
   }
 }
diff --git a/core/scss/ui/_icons.scss b/core/scss/ui/_icons.scss
index 1c2828a94..c5261935c 100644
--- a/core/scss/ui/_icons.scss
+++ b/core/scss/ui/_icons.scss
@@ -5,11 +5,11 @@
 
 .icon {
   --#{$prefix}icon-size: #{$font-size-base * $line-height-base};
+  display: inline-block;
   width: var(--#{$prefix}icon-size);
   height: var(--#{$prefix}icon-size);
   font-size: var(--#{$prefix}icon-size);
   vertical-align: bottom;
-  display: inline-block;
   transform-origin: center;
 
   @if $icon-stroke-width {
diff --git a/core/scss/ui/_images.scss b/core/scss/ui/_images.scss
index 3a16e8b1c..a0eda5f69 100644
--- a/core/scss/ui/_images.scss
+++ b/core/scss/ui/_images.scss
@@ -4,8 +4,8 @@
 
 .img-responsive {
   --#{$prefix}img-responsive-ratio: #{math.percentage(0.75)};
-  background: no-repeat center/cover;
   padding-top: var(--#{$prefix}img-responsive-ratio);
+  background: no-repeat center/cover;
 }
 
 .img-responsive-grid {
diff --git a/core/scss/ui/_legend.scss b/core/scss/ui/_legend.scss
index 6b072b978..5fc057945 100644
--- a/core/scss/ui/_legend.scss
+++ b/core/scss/ui/_legend.scss
@@ -6,9 +6,9 @@ Legend
 .legend {
   --#{$prefix}legend-size: #{$legend-size};
   display: inline-block;
-  background: $legend-bg;
   width: var(--#{$prefix}legend-size);
   height: var(--#{$prefix}legend-size);
-  @include border-radius($legend-border-radius);
+  background: $legend-bg;
   border: 1px solid var(--#{$prefix}border-color-translucent);
+  @include border-radius($legend-border-radius);
 }
diff --git a/core/scss/ui/_lists.scss b/core/scss/ui/_lists.scss
index 21d8f76b9..50e115309 100644
--- a/core/scss/ui/_lists.scss
+++ b/core/scss/ui/_lists.scss
@@ -8,13 +8,13 @@
 }
 
 .list-group-header {
-  background: $list-group-header-bg;
   padding: var(--#{$prefix}list-group-header-padding-y) $list-group-item-padding-x;
   font-size: $h5-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1;
-  text-transform: uppercase;
   color: $list-group-header-color;
+  text-transform: uppercase;
+  background: $list-group-header-bg;
   border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 
   .list-group-flush > & {
@@ -44,8 +44,8 @@
 
 .list-bordered {
   .list-item {
-    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
     margin-top: -1px;
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 
     &:first-child {
       border-top: none;
@@ -119,8 +119,8 @@ Inline list
 }
 
 .list-inline-dots {
-  .list-inline-item + .list-inline-item:before {
-    content: ' · ';
+  .list-inline-item + .list-inline-item::before {
     margin-inline-end: $list-inline-padding;
+    content: ' · ';
   }
 }
diff --git a/core/scss/ui/_loaders.scss b/core/scss/ui/_loaders.scss
index dbab834bf..8ed852cea 100644
--- a/core/scss/ui/_loaders.scss
+++ b/core/scss/ui/_loaders.scss
@@ -8,21 +8,21 @@
   color: $blue;
   vertical-align: middle;
 
-  &:after {
+  &::after {
     position: absolute;
-    top: 0;
     inset-inline-start: 0;
+    top: 0;
     width: 100%;
     height: 100%;
     content: '';
     border: 1px var(--#{$prefix}border-style);
     border-color: transparent;
-    border-top-color: currentColor;
     border-inline-start-color: currentColor;
-
-    @include border-radius(var(--#{$prefix}border-radius-pill));
+    border-top-color: currentColor;
     animation: rotate-360 0.6s linear;
     animation-iteration-count: infinite;
+
+    @include border-radius(var(--#{$prefix}border-radius-pill));
   }
 }
 
@@ -34,9 +34,9 @@ Dimmer
 
   .loader {
     position: absolute;
-    top: 50%;
-    inset-inline-end: 0;
     inset-inline-start: 0;
+    inset-inline-end: 0;
+    top: 50%;
     display: none;
     margin: 0 auto;
     transform: translateY(-50%);
@@ -56,7 +56,7 @@ Dimmer
 
 @keyframes animated-dots {
   0% {
-    /*rtl:ignore*/
+    /* rtl:ignore */
     transform: translateX(calc(var(--#{$prefix}dir) * -100%));
   }
 }
@@ -66,7 +66,7 @@ Dimmer
   overflow: hidden;
   vertical-align: bottom;
 
-  &:after {
+  &::after {
     display: inline-block;
     content: '...';
     animation: animated-dots 1.2s steps(4, jump-none) infinite;
diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss
index bfeabac55..b6639bcbf 100644
--- a/core/scss/ui/_markdown.scss
+++ b/core/scss/ui/_markdown.scss
@@ -13,8 +13,8 @@ Prose (formerly markdown)
   --#{$prefix}markdown-blockquote-padding-y: #{$markdown-blockquote-padding-y};
   --#{$prefix}markdown-blockquote-padding-x: #{$markdown-blockquote-padding-x};
   --#{$prefix}markdown-pre-max-height: #{$markdown-pre-max-height};
-  line-height: $markdown-line-height;
   font-size: $markdown-font-size;
+  line-height: $markdown-line-height;
 
   > :first-child {
     margin-top: 0;
@@ -58,9 +58,9 @@ Prose (formerly markdown)
   }
 
   > blockquote {
-    font-size: $h3-font-size;
-    margin: var(--#{$prefix}markdown-blockquote-margin-y) 0;
     padding: var(--#{$prefix}markdown-blockquote-padding-y) var(--#{$prefix}markdown-blockquote-padding-x);
+    margin: var(--#{$prefix}markdown-blockquote-margin-y) 0;
+    font-size: $h3-font-size;
   }
 
   > img,
diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss
index b54bc4029..68bb4d0ff 100644
--- a/core/scss/ui/_modals.scss
+++ b/core/scss/ui/_modals.scss
@@ -4,18 +4,18 @@
 .modal-header {
   > .btn-close {
     position: absolute;
-    top: 0;
     inset-inline-end: 0;
+    top: 0;
+    z-index: 10;
     width: $modal-header-height;
     height: $modal-header-height;
-    margin: 0;
     padding: 0;
-    z-index: 10;
+    margin: 0;
   }
 }
 
 .modal-body {
-  @include scrollbar;
+  @include scrollbar();
 
   .modal-title {
     margin-bottom: var(--#{$prefix}modal-body-title-margin-bottom);
@@ -28,9 +28,9 @@
 
 .modal-status {
   position: absolute;
-  top: 0;
   inset-inline-start: 0;
   inset-inline-end: 0;
+  top: 0;
   height: $modal-status-size;
   background: var(--#{$prefix}secondary);
   @include border-radius($modal-content-border-radius $modal-content-border-radius 0 0);
@@ -39,15 +39,15 @@
 .modal-header {
   align-items: center;
   min-height: $modal-header-height;
-  background: $modal-header-bg;
   padding: 0 $modal-header-height 0 $modal-inner-padding;
+  background: $modal-header-bg;
 }
 
 .modal-title {
   font-size: $h3-font-size;
   font-weight: $headings-font-weight;
-  color: $headings-color;
   line-height: $line-height-base;
+  color: $headings-color;
 }
 
 .modal-footer {
@@ -73,7 +73,7 @@
   --#{$prefix}modal-body-title-margin-bottom: #{$modal-body-title-margin-bottom};
   --#{$prefix}modal-footer-padding-y: #{$modal-footer-padding-y};
 
-  @include media-print {
+  @include media-print() {
     display: none !important;
   }
 }
diff --git a/core/scss/ui/_nav.scss b/core/scss/ui/_nav.scss
index 4e33c95d1..72379adee 100644
--- a/core/scss/ui/_nav.scss
+++ b/core/scss/ui/_nav.scss
@@ -16,9 +16,9 @@
   }
 
   .nav {
+    padding-inline-start: var(--#{$prefix}nav-vertical-nested-padding-start);
     margin-inline-start: var(--#{$prefix}nav-vertical-nested-margin-start);
     border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-    padding-inline-start: var(--#{$prefix}nav-vertical-nested-padding-start);
   }
 
   .nav-link.active,
@@ -81,12 +81,12 @@
 }
 
 .nav-link-toggle {
-  margin-inline-start: auto;
   padding: 0 var(--#{$prefix}nav-link-toggle-padding-x);
+  margin-inline-start: auto;
   @include transition(transform $transition-time);
   @include caret();
 
-  &:after {
+  &::after {
     margin: 0;
   }
 
diff --git a/core/scss/ui/_offcanvas.scss b/core/scss/ui/_offcanvas.scss
index 702b85218..c1b113afa 100644
--- a/core/scss/ui/_offcanvas.scss
+++ b/core/scss/ui/_offcanvas.scss
@@ -1,7 +1,7 @@
 @use '../config' as *;
 
 .offcanvas {
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_pagination.scss b/core/scss/ui/_pagination.scss
index 39acc83c6..a498e5a2d 100644
--- a/core/scss/ui/_pagination.scss
+++ b/core/scss/ui/_pagination.scss
@@ -1,15 +1,15 @@
 @use '../config' as *;
 
 .pagination {
+  gap: var(--#{$prefix}pagination-gap);
   margin: 0;
+  line-height: var(--#{$prefix}body-line-height);
+  user-select: none;
   --#{$prefix}pagination-gap: #{$pagination-gap};
   --#{$prefix}pagination-link-min-width: #{$pagination-link-min-width};
   --#{$prefix}page-text-padding-x: #{$page-text-padding-x};
-  user-select: none;
-  gap: var(--#{$prefix}pagination-gap);
-  line-height: var(--#{$prefix}body-line-height);
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_patterns.scss b/core/scss/ui/_patterns.scss
index df27f36e2..f42fe559f 100644
--- a/core/scss/ui/_patterns.scss
+++ b/core/scss/ui/_patterns.scss
@@ -32,8 +32,8 @@
   background-position:
     0 0,
     calc(var(--#{$prefix}pattern-size) / 2) calc(var(--#{$prefix}pattern-size) / 2);
-  background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
   background-clip: padding-box;
+  background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
 }
 
@@ -48,8 +48,8 @@
   background-position:
     -1px -1px,
     calc(var(--#{$prefix}pattern-size) - 1px) calc(var(--#{$prefix}pattern-size) - 1px);
-  background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   background-clip: padding-box;
+  background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
 }
 
@@ -58,10 +58,10 @@
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   --#{$prefix}pattern-size: #{$pattern-size};
-  background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
   background-image: repeating-linear-gradient(0deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
   background-position: -1px -1px;
   background-clip: padding-box;
+  background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
 }
 
@@ -70,10 +70,10 @@
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   --#{$prefix}pattern-size: #{$pattern-size};
-  background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
   background-image: repeating-linear-gradient(90deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
   background-position: -1px -1px;
   background-clip: padding-box;
+  background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
 }
 
@@ -83,11 +83,11 @@
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   --#{$prefix}pattern-size: #{$pattern-size};
   background-image: linear-gradient(to right, var(--#{$prefix}pattern-fill) 1px, transparent 1px), linear-gradient(to bottom, var(--#{$prefix}pattern-fill) 1px, transparent 1px);
-  background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   background-position:
     -1px -1px,
     -1px -1px;
   background-clip: padding-box;
+  background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
 }
 
@@ -97,9 +97,9 @@
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   --#{$prefix}pattern-size: #{$pattern-size};
   background-image: linear-gradient(45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%);
-  background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   background-position: center center;
   background-clip: padding-box;
+  background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
 }
 
@@ -109,17 +109,17 @@
   --#{$prefix}pattern-line: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background-image: linear-gradient(var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(var(--#{$prefix}pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 1px, transparent 1px);
-  background-size:
-    calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
-    calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
-    calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2),
-    calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   background-position:
     -3px -3px,
     -3px -3px,
     -2px -2px,
     -2px -2px;
   background-clip: padding-box;
+  background-size:
+    calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
+    calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
+    calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2),
+    calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
 }
 
@@ -129,11 +129,11 @@
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background-image: radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px), radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px);
-  background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   background-position:
     0 0,
     var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
   background-clip: padding-box;
+  background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
 }
 
@@ -182,8 +182,8 @@
     linear-gradient(225deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%) calc(-1 * var(--#{$prefix}pattern-size)) 0,
     linear-gradient(315deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%),
     linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%);
-  background-size: calc(2 * var(--#{$prefix}pattern-size)) calc(2 * var(--#{$prefix}pattern-size));
   background-clip: padding-box;
+  background-size: calc(2 * var(--#{$prefix}pattern-size)) calc(2 * var(--#{$prefix}pattern-size));
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
 }
 
diff --git a/core/scss/ui/_payments.scss b/core/scss/ui/_payments.scss
index 17ab75a6b..0ff3dd241 100644
--- a/core/scss/ui/_payments.scss
+++ b/core/scss/ui/_payments.scss
@@ -4,12 +4,12 @@
 @use '../config' as *;
 
 .payment {
+  display: inline-block;
   height: config.$avatar-size;
   aspect-ratio: 1.66666;
-  display: inline-block;
-  background: no-repeat center/100% 100%;
-  vertical-align: bottom;
   font-style: normal;
+  vertical-align: bottom;
+  background: no-repeat center/100% 100%;
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
   @include config.border-radius(var(--#{config.$prefix}border-radius));
 }
diff --git a/core/scss/ui/_popovers.scss b/core/scss/ui/_popovers.scss
index 8c5c55aed..462ee4b79 100644
--- a/core/scss/ui/_popovers.scss
+++ b/core/scss/ui/_popovers.scss
@@ -1,7 +1,7 @@
 @use '../config' as *;
 
 .popover {
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss
index 6101cf159..9f15e35a8 100644
--- a/core/scss/ui/_progress.scss
+++ b/core/scss/ui/_progress.scss
@@ -2,14 +2,14 @@
 
 @keyframes progress-indeterminate {
   0% {
-    inset-inline-end: 100%;
     inset-inline-start: -35%;
+    inset-inline-end: 100%;
   }
 
   100%,
   60% {
-    inset-inline-end: -90%;
     inset-inline-start: 100%;
+    inset-inline-end: -90%;
   }
 }
 
@@ -61,18 +61,18 @@ Progress bar
 }
 
 .progress-bar-indeterminate {
-  &:after,
-  &:before {
+  &::after,
+  &::before {
     position: absolute;
+    inset-inline-start: 0;
     top: 0;
     bottom: 0;
-    inset-inline-start: 0;
     content: '';
     background-color: inherit;
     will-change: left, right;
   }
 
-  &:before {
+  &::before {
     animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
 }
@@ -92,8 +92,8 @@ Progressbg
   --#{$prefix}progressbg-padding-y: #{$progressbg-padding-y};
   --#{$prefix}progressbg-padding-x: #{$progressbg-padding-x};
   position: relative;
-  padding: var(--#{$prefix}progressbg-padding-y) var(--#{$prefix}progressbg-padding-x);
   display: flex;
+  padding: var(--#{$prefix}progressbg-padding-y) var(--#{$prefix}progressbg-padding-x);
 }
 
 .progressbg-text {
@@ -101,26 +101,26 @@ Progressbg
   z-index: 1;
   display: flex;
   align-items: center;
-  @include text-truncate;
+  @include text-truncate();
 }
 
 .progressbg-progress {
   position: absolute;
-  top: 0;
-  inset-inline-end: 0;
-  bottom: 0;
   inset-inline-start: 0;
+  inset-inline-end: 0;
+  top: 0;
+  bottom: 0;
   z-index: 0;
   height: 100%;
-  background: transparent;
   pointer-events: none;
+  background: transparent;
 }
 
 .progressbg-value {
   --#{$prefix}progressbg-value-padding-start: #{$progressbg-value-padding-start};
-  font-weight: var(--#{$prefix}font-weight-medium);
-  margin-inline-start: auto;
   padding-inline-start: var(--#{$prefix}progressbg-value-padding-start);
+  margin-inline-start: auto;
+  font-weight: var(--#{$prefix}font-weight-medium);
 }
 
 /**
@@ -130,11 +130,11 @@ Progress steps
   --#{$prefix}progress-steps-gap: #{$progress-steps-gap};
   display: flex;
   flex-wrap: nowrap;
+  gap: var(--#{$prefix}progress-steps-gap);
   width: 100%;
   padding: 0;
   margin: 0;
   list-style: none;
-  gap: var(--#{$prefix}progress-steps-gap);
 }
 
 .progress-steps-item {
diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss
index 0fa8e8ccf..e88bb6a3d 100644
--- a/core/scss/ui/_ribbons.scss
+++ b/core/scss/ui/_ribbons.scss
@@ -17,9 +17,14 @@
   --#{$prefix}ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width};
 
   position: absolute;
-  top: var(--#{$prefix}ribbon-offset);
   inset-inline-end: calc(-1 * var(--#{$prefix}ribbon-margin));
+  top: var(--#{$prefix}ribbon-offset);
   z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--#{$prefix}ribbon-min-size);
+  min-height: var(--#{$prefix}ribbon-min-size);
   padding: var(--#{$prefix}ribbon-padding-y) var(--#{$prefix}ribbon-padding-x);
   font-size: var(--#{$prefix}ribbon-font-size);
   font-weight: var(--#{$prefix}font-weight-semibold);
@@ -30,13 +35,8 @@
   background: var(--#{$prefix}primary);
   border-color: var(--#{$prefix}primary);
   @include border-radius(var(--#{$prefix}ribbon-border-radius) 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--#{$prefix}ribbon-min-size);
-  min-width: var(--#{$prefix}ribbon-min-size);
 
-  &:before {
+  &::before {
     position: absolute;
     inset-inline-end: 0;
     bottom: 100%;
@@ -46,8 +46,8 @@
     filter: brightness(70%);
     border: calc(var(--#{$prefix}ribbon-margin) * 0.5) var(--#{$prefix}border-style);
     border-color: inherit;
-    border-top-color: transparent;
     border-inline-end-color: transparent;
+    border-top-color: transparent;
   }
 
   @if $enable-extra-colors {
@@ -70,45 +70,45 @@
 }
 
 .ribbon-top {
-  top: calc(-1 * var(--#{$prefix}ribbon-margin));
   inset-inline-end: var(--#{$prefix}ribbon-offset);
+  top: calc(-1 * var(--#{$prefix}ribbon-margin));
   width: var(--#{$prefix}ribbon-top-width);
   padding: var(--#{$prefix}ribbon-top-padding-y) 0;
   @include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
 
-  &:before {
-    top: 0;
+  &::before {
     inset-inline-end: 100%;
+    top: 0;
     bottom: auto;
     border-color: inherit;
-    border-top-color: transparent;
     border-inline-start-color: transparent;
+    border-top-color: transparent;
   }
 
   &.ribbon-start {
-    inset-inline-end: auto;
     inset-inline-start: var(--#{$prefix}ribbon-offset);
+    inset-inline-end: auto;
 
-    &:before {
-      top: 0;
-      inset-inline-end: 100%;
+    &::before {
       inset-inline-start: auto;
+      inset-inline-end: 100%;
+      top: 0;
     }
   }
 }
 
 .ribbon-start {
-  inset-inline-end: auto;
   inset-inline-start: calc(-1 * var(--#{$prefix}ribbon-margin));
+  inset-inline-end: auto;
   @include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
 
-  &:before {
+  &::before {
+    inset-inline-start: 0;
     top: auto;
     bottom: 100%;
-    inset-inline-start: 0;
     border-color: inherit;
-    border-top-color: transparent;
     border-inline-start-color: transparent;
+    border-top-color: transparent;
   }
 }
 
@@ -121,44 +121,44 @@
   padding-inline-start: var(--#{$prefix}ribbon-padding-y);
   @include border-radius(0 0 var(--#{$prefix}ribbon-border-radius) 0);
 
-  &:after {
+  &::after {
     position: absolute;
-    top: 0;
     inset-inline-end: 100%;
+    top: 0;
     display: block;
     width: 0;
     height: 0;
     content: '';
     border: var(--#{$prefix}ribbon-bookmark-border-size) var(--#{$prefix}border-style);
     border-color: inherit;
-    border-inline-end-width: 0;
     border-inline-start-color: transparent;
     border-inline-start-width: var(--#{$prefix}ribbon-bookmark-notch-width);
+    border-inline-end-width: 0;
   }
 
   &.ribbon-left {
     padding-inline-end: var(--#{$prefix}ribbon-bookmark-notch-width);
 
-    &:after {
-      inset-inline-end: auto;
+    &::after {
       inset-inline-start: 100%;
+      inset-inline-end: auto;
+      border-inline-start-width: 0;
       border-inline-end-color: transparent;
 
       border-inline-end-width: var(--#{$prefix}ribbon-bookmark-notch-width);
-      border-inline-start-width: 0;
     }
   }
 
   &.ribbon-top {
+    padding-inline-start: 0;
     padding-inline-end: 0;
     padding-bottom: var(--#{$prefix}ribbon-padding-y);
-    padding-inline-start: 0;
     @include border-radius(0 var(--#{$prefix}ribbon-border-radius) 0 0);
 
-    &:after {
-      top: 100%;
-      inset-inline-end: 0;
+    &::after {
       inset-inline-start: 0;
+      inset-inline-end: 0;
+      top: 100%;
       border-color: inherit;
       border-width: var(--#{$prefix}ribbon-bookmark-border-size);
       border-top-width: 0;
diff --git a/core/scss/ui/_segmented.scss b/core/scss/ui/_segmented.scss
index 7a29876b8..243e53217 100644
--- a/core/scss/ui/_segmented.scss
+++ b/core/scss/ui/_segmented.scss
@@ -25,31 +25,31 @@
 
   .nav-link {
     display: inline-flex;
+    flex-grow: 1;
     gap: calc(#{$nav-segmented-link-gap} + var(--#{$prefix}nav-link-gap));
     align-items: center;
-    margin: 0;
-    font-size: var(--#{$prefix}nav-font-size);
+    justify-content: center;
     min-width: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
     height: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
     padding: 0 calc(var(--#{$prefix}nav-link-padding-x) - 2px);
-    border: 1px solid transparent;
-    background: transparent;
+    margin: 0;
+    font-size: var(--#{$prefix}nav-font-size);
     color: var(--#{$prefix}secondary);
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
+    background: transparent;
+    border: 1px solid transparent;
     transition:
       background-color $transition-time,
       color $transition-time;
     @include border-radius(var(--#{$prefix}nav-radius));
-    flex-grow: 1;
-    justify-content: center;
 
     &:hover,
     &.hover {
-      background: rgba(0, 0, 0, 0.04);
       color: var(--#{$prefix}body-color);
+      background: rgba(0, 0, 0, 0.04);
     }
 
     &.disabled,
diff --git a/core/scss/ui/_signature.scss b/core/scss/ui/_signature.scss
index f62226f7c..280312c68 100644
--- a/core/scss/ui/_signature.scss
+++ b/core/scss/ui/_signature.scss
@@ -4,19 +4,19 @@
   --#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
   --#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
   --#{$prefix}signature-canvas-height: 12.5rem;
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   padding: var(--#{$prefix}signature-padding);
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   @include border-radius(var(--#{$prefix}border-radius));
 }
 
 .signature-canvas {
-  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
-  @include border-radius(calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding)));
   display: block;
-  cursor: crosshair;
   width: 100%;
   // A fixed height is required: without it the canvas height comes from its own
   // width/height attributes, which `resizeCanvas()` rewrites on every resize —
   // each run then measures a different `offsetHeight` and the pad drifts.
   height: var(--#{$prefix}signature-canvas-height);
+  cursor: crosshair;
+  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
+  @include border-radius(calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding)));
 }
diff --git a/core/scss/ui/_social.scss b/core/scss/ui/_social.scss
index b69c95c30..cf4574096 100644
--- a/core/scss/ui/_social.scss
+++ b/core/scss/ui/_social.scss
@@ -8,8 +8,8 @@
   display: inline-block;
   height: config.$avatar-size;
   aspect-ratio: 1;
-  background: no-repeat center/cover;
   vertical-align: bottom;
+  background: no-repeat center/cover;
 }
 
 @each $app in config.$social-apps {
diff --git a/core/scss/ui/_stars.scss b/core/scss/ui/_stars.scss
index 7740c61ac..d289a5b8b 100644
--- a/core/scss/ui/_stars.scss
+++ b/core/scss/ui/_stars.scss
@@ -4,8 +4,8 @@
   --#{$prefix}stars-gap: #{$stars-gap};
 
   display: inline-flex;
-  color: $gray-400;
   font-size: $h5-font-size;
+  color: $gray-400;
 
   .star:not(:first-child) {
     margin-inline-start: var(--#{$prefix}stars-gap);
diff --git a/core/scss/ui/_status.scss b/core/scss/ui/_status.scss
index 17696c92b..ebf9abf12 100644
--- a/core/scss/ui/_status.scss
+++ b/core/scss/ui/_status.scss
@@ -31,12 +31,12 @@
     transform: scale(1, 1);
   }
   80% {
-    transform: scale(3, 3);
     opacity: 0;
+    transform: scale(3, 3);
   }
   100% {
-    transform: scale(3, 3);
     opacity: 0;
+    transform: scale(3, 3);
   }
 }
 
@@ -52,19 +52,19 @@
   --#{$prefix}status-gap: #{$status-gap};
 
   display: inline-flex;
+  gap: var(--#{$prefix}status-gap);
   align-items: center;
   height: var(--#{$prefix}status-height);
   padding: var(--#{$prefix}status-padding-y) var(--#{$prefix}status-padding-x);
-  gap: var(--#{$prefix}status-gap);
-  color: var(--#{$prefix}status-color);
-  background: color-transparent(var(--#{$prefix}status-color), 0.1);
+  margin: 0;
   font-size: $font-size-base;
-  text-transform: none;
-  letter-spacing: normal;
-  @include border-radius(var(--#{$prefix}border-radius-pill));
   font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1;
-  margin: 0;
+  color: var(--#{$prefix}status-color);
+  text-transform: none;
+  letter-spacing: normal;
+  background: color-transparent(var(--#{$prefix}status-color), 0.1);
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 
   .status-dot {
     background: var(--#{$prefix}status-color);
@@ -76,9 +76,9 @@
 }
 
 .status-lite {
-  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
-  background: transparent !important;
   color: var(--#{$prefix}body-color) !important;
+  background: transparent !important;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
 }
 
 @each $name, $color in map.merge($theme-colors, $social-colors) {
@@ -103,11 +103,11 @@
 }
 
 .status-dot-animated {
-  &:before {
-    content: '';
+  &::before {
     position: absolute;
     inset: 0;
     z-index: 0;
+    content: '';
     background: inherit;
     border-radius: inherit;
     opacity: 0.6;
@@ -121,8 +121,8 @@
 .status-indicator {
   --#{$prefix}status-indicator-size: #{$status-indicator-size};
   --#{$prefix}status-indicator-color: var(--#{$prefix}status-color, #{$text-secondary});
-  display: block;
   position: relative;
+  display: block;
   width: var(--#{$prefix}status-indicator-size);
   height: var(--#{$prefix}status-indicator-size);
 }
@@ -132,11 +132,11 @@
   position: absolute;
   inset-inline-start: 50%;
   top: 50%;
-  margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2);
   width: var(--#{$prefix}status-circle-size);
   height: var(--#{$prefix}status-circle-size);
-  @include border-radius(var(--#{$prefix}border-radius-pill));
+  margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2);
   background: var(--#{$prefix}status-color);
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 
   &:nth-child(1) {
     z-index: 3;
diff --git a/core/scss/ui/_steps.scss b/core/scss/ui/_steps.scss
index 69a9d2291..48c05b331 100644
--- a/core/scss/ui/_steps.scss
+++ b/core/scss/ui/_steps.scss
@@ -40,11 +40,11 @@
   position: relative;
   flex: 1 1 0;
   min-height: var(--#{$prefix}step-item-min-height);
+  padding-top: calc(var(--#{$prefix}steps-dot-size));
   margin-top: 0;
   color: inherit;
   text-align: center;
   cursor: default;
-  padding-top: calc(var(--#{$prefix}steps-dot-size));
 
   @at-root a#{&} {
     cursor: pointer;
@@ -54,12 +54,12 @@
     }
   }
 
-  &:after,
-  &:before {
+  &::after,
+  &::before {
     background: var(--#{$prefix}steps-color);
   }
 
-  &:not(:last-child):after {
+  &:not(:last-child)::after {
     position: absolute;
     inset-inline-start: 50%;
     width: 100%;
@@ -67,41 +67,42 @@
     transform: translateY(-50%);
   }
 
-  &:after {
+  &::after {
     top: calc(var(--#{$prefix}steps-dot-size) * 0.5);
     height: var(--#{$prefix}steps-border-width);
   }
 
-  &:before {
-    content: '';
+  &::before {
     position: absolute;
-    top: 0;
     inset-inline-start: 50%;
+    top: 0;
     z-index: 1;
     box-sizing: content-box;
     display: flex;
     align-items: center;
     justify-content: center;
-    @include border-radius(var(--#{$prefix}border-radius-pill));
-    /*rtl:ignore*/
-    transform: translateX(calc(var(--#{$prefix}dir) * -50%));
-    color: var(--#{$prefix}white);
     width: var(--#{$prefix}steps-dot-size);
     height: var(--#{$prefix}steps-dot-size);
+    color: var(--#{$prefix}white);
+    content: '';
+
+    /* rtl:ignore */
+    transform: translateX(calc(var(--#{$prefix}dir) * -50%));
+    @include border-radius(var(--#{$prefix}border-radius-pill));
   }
 
   &.active {
     font-weight: var(--#{$prefix}font-weight-semibold);
 
-    &:after {
+    &::after {
       background: var(--#{$prefix}steps-inactive-color);
     }
 
     & ~ .step-item {
       color: var(--#{$prefix}disabled-color);
 
-      &:after,
-      &:before {
+      &::after,
+      &::before {
         background: var(--#{$prefix}steps-inactive-color);
       }
     }
@@ -118,7 +119,7 @@
   .step-item {
     counter-increment: steps;
 
-    &:before {
+    &::before {
       content: counter(steps);
     }
   }
@@ -139,31 +140,32 @@
   }
 
   .step-item {
-    text-align: start;
-    padding-top: 0;
-    padding-inline-start: calc(var(--#{$prefix}steps-dot-size) + var(--#{$prefix}steps-vertical-padding-start));
     min-height: auto;
+    padding-inline-start: calc(var(--#{$prefix}steps-dot-size) + var(--#{$prefix}steps-vertical-padding-start));
+    padding-top: 0;
+    text-align: start;
 
     &:not(:first-child) {
       margin-top: var(--#{$prefix}steps-vertical-item-gap);
     }
 
-    &:before {
-      top: var(--#{$prefix}steps-dot-offset);
+    &::before {
       inset-inline-start: 0;
+      top: var(--#{$prefix}steps-dot-offset);
       transform: translate(0, 0);
     }
 
     &:not(:last-child) {
-      &:after {
+      &::after {
         position: absolute;
-        content: '';
-        /*rtl:ignore*/
-        transform: translateX(calc(var(--#{$prefix}dir) * -50%));
-        top: var(--#{$prefix}steps-dot-offset);
         inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
+        top: var(--#{$prefix}steps-dot-offset);
         width: var(--#{$prefix}steps-border-width);
         height: calc(100% + var(--#{$prefix}steps-vertical-connector-gap));
+        content: '';
+
+        /* rtl:ignore */
+        transform: translateX(calc(var(--#{$prefix}dir) * -50%));
       }
     }
   }
diff --git a/core/scss/ui/_switch-icon.scss b/core/scss/ui/_switch-icon.scss
index d05bc02f6..ca80e56fb 100644
--- a/core/scss/ui/_switch-icon.scss
+++ b/core/scss/ui/_switch-icon.scss
@@ -1,16 +1,16 @@
 @use '../config' as *;
 
 .switch-icon {
+  position: relative;
   display: inline-block;
-  line-height: 1;
-  border: 0;
-  padding: 0;
-  background: transparent;
   width: $icon-size;
   height: $icon-size;
+  padding: 0;
+  line-height: 1;
   vertical-align: bottom;
-  position: relative;
   cursor: pointer;
+  background: transparent;
+  border: 0;
 
   &.disabled {
     pointer-events: none;
@@ -40,8 +40,8 @@
 
   .switch-icon-b {
     position: absolute;
-    top: 0;
     inset-inline-start: 0;
+    top: 0;
     opacity: 0;
   }
 
@@ -161,13 +161,13 @@
   }
 
   .switch-icon-b {
-    /*rtl:ignore*/
+    /* rtl:ignore */
     transform: translateX(calc(var(--#{$prefix}dir) * 100%));
   }
 
   &.active {
     .switch-icon-a {
-      /*rtl:ignore*/
+      /* rtl:ignore */
       transform: translateX(calc(var(--#{$prefix}dir) * -100%));
     }
 
@@ -184,13 +184,13 @@
   }
 
   .switch-icon-b {
-    /*rtl:ignore*/
+    /* rtl:ignore */
     transform: translateX(calc(var(--#{$prefix}dir) * -100%));
   }
 
   &.active {
     .switch-icon-a {
-      /*rtl:ignore*/
+      /* rtl:ignore */
       transform: translateX(calc(var(--#{$prefix}dir) * 100%));
     }
 
diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss
index 1bbda1321..3c63bdb3a 100644
--- a/core/scss/ui/_tables.scss
+++ b/core/scss/ui/_tables.scss
@@ -5,13 +5,13 @@
 
   thead {
     th {
-      background: $table-th-bg;
-      @include subheader;
       padding-top: $table-th-padding-y;
       padding-bottom: $table-th-padding-y;
       white-space: nowrap;
+      background: $table-th-bg;
+      @include subheader();
 
-      @include media-print {
+      @include media-print() {
         background: transparent;
       }
     }
@@ -51,8 +51,8 @@
 }
 
 .td-truncate {
-  max-width: 1px;
   width: 100%;
+  max-width: 1px;
 }
 
 .table-mobile {
@@ -74,14 +74,14 @@
         td {
           display: block;
           padding: $table-cell-padding-x $table-cell-padding-y !important;
-          border: none;
           color: var(--#{$prefix}body-color) !important;
+          border: none;
 
           &[data-label] {
-            &:before {
-              @include subheader;
-              content: attr(data-label);
+            &::before {
+              @include subheader();
               display: block;
+              content: attr(data-label);
             }
           }
         }
@@ -104,18 +104,18 @@ Table sort
 .table-sort {
   --#{$prefix}table-sort-icon-size: #{$table-sort-icon-size};
   --#{$prefix}table-sort-icon-margin-start: #{$table-sort-icon-margin-start};
+  display: block;
+  width: 100%;
+  padding: $table-th-padding-y $table-th-padding-x;
+  margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x);
 
   font: inherit;
   color: inherit;
+  text-align: inherit;
   text-transform: inherit;
   letter-spacing: inherit;
-  border: 0;
   background: inherit;
-  display: block;
-  width: 100%;
-  text-align: inherit;
-  margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x);
-  padding: $table-th-padding-y $table-th-padding-x;
+  border: 0;
   @include transition(color $transition-time);
 
   &:hover,
@@ -124,22 +124,22 @@ Table sort
     color: var(--#{$prefix}body-color);
   }
 
-  &:after {
-    content: '';
+  &::after {
     display: inline-flex;
     width: var(--#{$prefix}table-sort-icon-size);
     height: var(--#{$prefix}table-sort-icon-size);
-    vertical-align: bottom;
-    mask-image: $table-sort-bg-image;
-    background: currentColor;
     margin-inline-start: var(--#{$prefix}table-sort-icon-margin-start);
+    vertical-align: bottom;
+    content: '';
+    background: currentColor;
+    mask-image: $table-sort-bg-image;
   }
 
-  &.asc:after {
+  &.asc::after {
     mask-image: $table-sort-desc-bg-image;
   }
 
-  &.desc:after {
+  &.desc::after {
     mask-image: $table-sort-asc-bg-image;
   }
 }
diff --git a/core/scss/ui/_tags.scss b/core/scss/ui/_tags.scss
index 990c9cda2..c42f820fa 100644
--- a/core/scss/ui/_tags.scss
+++ b/core/scss/ui/_tags.scss
@@ -12,23 +12,23 @@
   --#{$prefix}tag-icon-margin-end: #{$tag-icon-margin-end};
   --#{$prefix}tag-icon-size: #{$tag-icon-size};
   --#{$prefix}tag-check-size: #{$tag-check-size};
-
-  border: $border-width solid var(--#{$prefix}border-color);
   display: inline-flex;
+  gap: var(--#{$prefix}tag-gap);
   align-items: center;
   height: var(--#{$prefix}tag-height);
-  @include border-radius(var(--#{$prefix}border-radius));
   padding: 0 var(--#{$prefix}tag-padding-x);
   background: var(--#{$prefix}bg-surface);
+
+  border: $border-width solid var(--#{$prefix}border-color);
   box-shadow: var(--#{$prefix}shadow-input);
-  gap: var(--#{$prefix}tag-gap);
+  @include border-radius(var(--#{$prefix}border-radius));
 
   .btn-close {
-    margin-inline-end: var(--#{$prefix}tag-close-margin-end);
-    margin-inline-start: var(--#{$prefix}tag-close-margin-start);
-    padding: 0;
     width: var(--#{$prefix}tag-close-size);
     height: var(--#{$prefix}tag-close-size);
+    padding: 0;
+    margin-inline-start: var(--#{$prefix}tag-close-margin-start);
+    margin-inline-end: var(--#{$prefix}tag-close-margin-end);
     font-size: var(--#{$prefix}tag-close-font-size);
   }
 }
@@ -53,10 +53,10 @@
 }
 
 .tag-icon {
-  color: var(--#{$prefix}secondary);
-  margin-inline-end: var(--#{$prefix}tag-icon-margin-end);
   width: var(--#{$prefix}tag-icon-size);
   height: var(--#{$prefix}tag-icon-size);
+  margin-inline-end: var(--#{$prefix}tag-icon-margin-end);
+  color: var(--#{$prefix}secondary);
 }
 
 .tag-check {
@@ -69,5 +69,5 @@
 // Tags list
 //
 .tags-list {
-  @include elements-list;
+  @include elements-list();
 }
diff --git a/core/scss/ui/_timeline.scss b/core/scss/ui/_timeline.scss
index 1617eea39..2d350558d 100644
--- a/core/scss/ui/_timeline.scss
+++ b/core/scss/ui/_timeline.scss
@@ -6,8 +6,8 @@
 .timeline {
   --#{$prefix}timeline-icon-size: #{$avatar-size};
   position: relative;
-  list-style: none;
   padding: 0;
+  list-style: none;
 }
 
 //
@@ -19,13 +19,13 @@
   &:not(:last-child) {
     margin-bottom: var(--#{$prefix}page-padding);
 
-    &:before {
-      content: '';
+    &::before {
       position: absolute;
-      top: var(--#{$prefix}timeline-icon-size);
       inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2);
+      top: var(--#{$prefix}timeline-icon-size);
       bottom: calc(-1 * var(--#{$prefix}page-padding));
       width: var(--#{$prefix}border-width);
+      content: '';
       background-color: var(--#{$prefix}border-color);
       @include border-radius(var(--#{$prefix}border-radius));
     }
@@ -34,15 +34,15 @@
 
 .timeline-event-icon {
   position: absolute;
+  z-index: 5;
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--#{$prefix}timeline-icon-size, $avatar-size);
   height: var(--#{$prefix}timeline-icon-size, $avatar-size);
-  background: var(--#{$prefix}bg-surface-secondary);
   color: var(--#{$prefix}secondary);
+  background: var(--#{$prefix}bg-surface-secondary);
   @include border-radius(var(--#{$prefix}border-radius));
-  z-index: 5;
 }
 
 .timeline-event-card {
diff --git a/core/scss/ui/_toasts.scss b/core/scss/ui/_toasts.scss
index 78af9cf11..d3dda50e8 100644
--- a/core/scss/ui/_toasts.scss
+++ b/core/scss/ui/_toasts.scss
@@ -13,7 +13,7 @@
     outline: none;
   }
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_toolbar.scss b/core/scss/ui/_toolbar.scss
index a0b8da792..4e22aa343 100644
--- a/core/scss/ui/_toolbar.scss
+++ b/core/scss/ui/_toolbar.scss
@@ -4,15 +4,15 @@
   --#{$prefix}toolbar-gutter: #{$toolbar-gutter};
 
   display: flex;
-  flex-wrap: nowrap;
   flex-shrink: 0;
+  flex-wrap: nowrap;
   margin: 0 calc(-1 * var(--#{$prefix}toolbar-gutter));
 
   > * {
     margin: 0 var(--#{$prefix}toolbar-gutter);
   }
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_tracking.scss b/core/scss/ui/_tracking.scss
index d34fe36f5..3a3756000 100644
--- a/core/scss/ui/_tracking.scss
+++ b/core/scss/ui/_tracking.scss
@@ -15,18 +15,18 @@
   .tracking-block {
     height: auto;
 
-    &:before {
-      content: '';
+    &::before {
       display: block;
       padding-top: 100%;
+      content: '';
     }
   }
 }
 
 .tracking-block {
   flex: 1;
-  @include border-radius(var(--#{$prefix}tracking-block-border-radius));
-  height: var(--#{$prefix}tracking-height);
   min-width: var(--#{$prefix}tracking-block-min-width);
+  height: var(--#{$prefix}tracking-height);
   background: var(--#{$prefix}border-color);
+  @include border-radius(var(--#{$prefix}tracking-block-border-radius));
 }
diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss
index 34de72e43..e8ae7cb46 100644
--- a/core/scss/ui/_type.scss
+++ b/core/scss/ui/_type.scss
@@ -3,8 +3,8 @@
 @forward 'typo/hr';
 
 .lead {
-  color: var(--#{$prefix}secondary);
   font-size: inherit;
+  color: var(--#{$prefix}secondary);
 }
 
 a {
@@ -97,7 +97,7 @@ blockquote {
     display: block;
     text-align: end;
 
-    &:before {
+    &::before {
       content: '— ';
     }
   }
@@ -125,22 +125,22 @@ dl {
 pre {
   --#{$prefix}scrollbar-color: #{$pre-color};
   padding: $pre-padding;
-  background: $pre-bg;
-  color: $pre-color;
-  @include border-radius(var(--#{$prefix}border-radius));
   line-height: $line-height-base;
+  color: $pre-color;
+  background: $pre-bg;
+  @include border-radius(var(--#{$prefix}border-radius));
 
-  @include scrollbar;
+  @include scrollbar();
 
   code {
-    background: transparent;
     padding: 0;
+    background: transparent;
   }
 }
 
 code {
-  background: var(--#{$prefix}code-bg);
   padding: 2px 4px;
+  background: var(--#{$prefix}code-bg);
   @include border-radius(var(--#{$prefix}border-radius));
 }
 
@@ -152,14 +152,14 @@ abbr {
 
 kbd,
 .kbd {
-  border: $kbd-border;
-  display: inline-block;
   box-sizing: border-box;
+  display: inline-block;
   max-width: 100%;
   font-size: $kbd-font-size;
   font-weight: $kbd-font-weight;
   line-height: 1;
   vertical-align: baseline;
+  border: $kbd-border;
   @include border-radius($kbd-border-radius);
 }
 
@@ -204,8 +204,8 @@ a:hover:has(.icon) {
   transition: background-color 0.15s ease-in-out;
 
   &:hover {
-    text-decoration: none;
     color: var(--#{$prefix}primary);
+    text-decoration: none;
     background: color-transparent(var(--#{$prefix}secondary), 0.04);
   }
 }
@@ -214,7 +214,7 @@ a:hover:has(.icon) {
 Subheader
  */
 .subheader {
-  @include subheader;
+  @include subheader();
 }
 
 /**
@@ -222,22 +222,22 @@ Mentions
  */
 .mention {
   display: inline-block;
-  box-shadow: var(--#{$prefix}shadow-border);
-  @include border-radius(var(--#{$prefix}border-radius-pill));
-  line-height: calc(16em / 12);
+  padding: calc(2em / 12) calc(8em / 12);
   font-size: calc(12em / 14);
+  font-weight: var(--#{$prefix}font-weight-medium);
+  line-height: calc(16em / 12);
   color: var(--#{$prefix}body-color);
   background: var(--#{$prefix}bg-surface-tertiary);
-  padding: calc(2em / 12) calc(8em / 12);
-  font-weight: var(--#{$prefix}font-weight-medium);
+  box-shadow: var(--#{$prefix}shadow-border);
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 
   @at-root a#{&} {
     cursor: pointer;
 
     &:hover,
     &.hover {
-      background: var(--#{$prefix}bg-surface-secondary);
       text-decoration: underline;
+      background: var(--#{$prefix}bg-surface-secondary);
     }
   }
 }
@@ -245,26 +245,26 @@ Mentions
 .mention-avatar,
 .mention-app,
 .mention-color {
+  display: inline-flex;
   width: calc(14em / 12);
   height: calc(14em / 12);
-  @include border-radius(var(--#{$prefix}border-radius-pill));
   margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12);
-  display: inline-flex;
+  text-align: center;
+  vertical-align: middle;
   background: no-repeat center center/cover;
   box-shadow: var(--#{$prefix}shadow-border);
-  vertical-align: middle;
-  text-align: center;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 }
 
 .mention-app {
-  box-shadow: none;
   background: none;
   border-radius: 0;
+  box-shadow: none;
 }
 
 .mention-count {
-  color: var(--#{$prefix}secondary);
   margin-inline-start: calc(8em / 12);
+  color: var(--#{$prefix}secondary);
 }
 
 $text-variants: (
@@ -274,11 +274,11 @@ $text-variants: (
 
 @each $variant, $color in $text-variants {
   .text-#{$variant} {
-    background: color-transparent($color, 0.04);
-    background: color-transparent($color, 4%);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-decoration-color: $color;
+    background: color-transparent($color, 0.04);
+    background: color-transparent($color, 4%);
   }
 }
 
@@ -288,11 +288,11 @@ $text-variants: (
   --#{$prefix}steps-margin-start: #{$steps-margin-start};
   --#{$prefix}steps-margin-bottom: #{$steps-margin-bottom};
   --#{$prefix}steps-heading-margin-top: #{$steps-heading-margin-top};
-  margin-inline-start: var(--#{$prefix}steps-margin-start);
   padding-inline-start: var(--#{$prefix}steps-padding);
+  margin-inline-start: var(--#{$prefix}steps-margin-start);
+  margin-bottom: var(--#{$prefix}steps-margin-bottom);
   counter-reset: step;
   border-inline-start: 1px solid var(--#{$prefix}border-color);
-  margin-bottom: var(--#{$prefix}steps-margin-bottom);
 
   h3 {
     counter-increment: step;
@@ -301,22 +301,22 @@ $text-variants: (
       margin-top: var(--#{$prefix}steps-heading-margin-top) !important;
     }
 
-    &:before {
-      content: counter(step);
-      display: inline-block;
+    &::before {
       position: absolute;
-      margin-top: 1px;
-      margin-inline-start: calc(-1 * var(--#{$prefix}steps-padding) - var(--#{$prefix}steps-item-size) / 2);
+      display: inline-block;
       width: var(--#{$prefix}steps-item-size);
       height: var(--#{$prefix}steps-item-size);
-      text-align: center;
-      color: var(--#{$prefix}body-color);
-      border: 1px solid var(--#{$prefix}border-color);
-      background: var(--#{$prefix}bg-surface);
-      @include border-radius(var(--#{$prefix}border-radius));
-      line-height: calc(var(--#{$prefix}steps-item-size) - 2px);
+      margin-inline-start: calc(-1 * var(--#{$prefix}steps-padding) - var(--#{$prefix}steps-item-size) / 2);
+      margin-top: 1px;
       font-size: var(--#{$prefix}font-size-h4);
       font-weight: var(--#{$prefix}font-weight-semibold);
+      line-height: calc(var(--#{$prefix}steps-item-size) - 2px);
+      color: var(--#{$prefix}body-color);
+      text-align: center;
+      content: counter(step);
+      background: var(--#{$prefix}bg-surface);
+      border: 1px solid var(--#{$prefix}border-color);
+      @include border-radius(var(--#{$prefix}border-radius));
     }
   }
 
@@ -329,11 +329,11 @@ $text-variants: (
   --#{$prefix}callout-margin-bottom: #{$callout-margin-bottom};
   --#{$prefix}callout-padding-y: #{$callout-padding-y};
   --#{$prefix}callout-padding-x: #{$callout-padding-x};
+  padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);
   margin-bottom: var(--#{$prefix}callout-margin-bottom);
+  background: var(--#{$prefix}primary-lt);
   border: 1px solid var(--#{$prefix}primary-200);
   @include border-radius(var(--#{$prefix}border-radius));
-  padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);
-  background: var(--#{$prefix}primary-lt);
 
   & > :last-child {
     margin-bottom: 0;
diff --git a/core/scss/ui/forms/_form-check.scss b/core/scss/ui/forms/_form-check.scss
index b39019ac1..32147a851 100644
--- a/core/scss/ui/forms/_form-check.scss
+++ b/core/scss/ui/forms/_form-check.scss
@@ -25,9 +25,9 @@ Form check
 
 .form-check-input {
   --#{$prefix}form-check-input-width: #{$form-check-input-width};
+  margin-top: ($form-check-min-height - $form-check-input-width) * 0.5;
 
   background-size: var(--#{$prefix}form-check-input-width);
-  margin-top: ($form-check-min-height - $form-check-input-width) * 0.5;
   box-shadow: $form-check-input-box-shadow;
 
   .form-switch & {
@@ -41,10 +41,10 @@ Form check
   display: block;
 
   &.required {
-    &:after {
-      content: '*';
+    &::after {
       margin-inline-start: var(--#{$prefix}form-check-label-required-gap);
       color: $red;
+      content: '*';
     }
   }
 }
@@ -53,9 +53,9 @@ Form check
   --#{$prefix}form-check-description-margin-top: #{$form-check-description-margin-top};
 
   display: block;
-  color: var(--#{$prefix}secondary);
-  font-size: $h5-font-size;
   margin-top: var(--#{$prefix}form-check-description-margin-top);
+  font-size: $h5-font-size;
+  color: var(--#{$prefix}secondary);
 }
 
 .form-check-single {
@@ -84,15 +84,15 @@ Form switch
   --#{$prefix}form-switch-lg-bg-size: #{$form-switch-lg-bg-size};
   --#{$prefix}form-switch-lg-input-offset: #{$form-switch-lg-input-offset};
   --#{$prefix}form-switch-lg-label-padding-top: #{$form-switch-lg-label-padding-top};
-
-  padding-inline-start: var(--#{$prefix}form-switch-lg-padding-start);
   min-height: var(--#{$prefix}form-switch-lg-min-height);
 
+  padding-inline-start: var(--#{$prefix}form-switch-lg-padding-start);
+
   .form-check-input {
-    height: var(--#{$prefix}form-switch-lg-height);
     width: var(--#{$prefix}form-switch-lg-width);
-    background-size: var(--#{$prefix}form-switch-lg-bg-size);
+    height: var(--#{$prefix}form-switch-lg-height);
     margin-inline-start: var(--#{$prefix}form-switch-lg-input-offset);
+    background-size: var(--#{$prefix}form-switch-lg-bg-size);
   }
 
   .form-check-label {
diff --git a/core/scss/ui/forms/_form-colorinput.scss b/core/scss/ui/forms/_form-colorinput.scss
index 277fddb0f..a3b2cf984 100644
--- a/core/scss/ui/forms/_form-colorinput.scss
+++ b/core/scss/ui/forms/_form-colorinput.scss
@@ -27,10 +27,10 @@ Color Input
   @include border-radius(var(--#{$prefix}border-radius));
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 
-  &:before {
+  &::before {
     position: absolute;
-    top: 0;
     inset-inline-start: 0;
+    top: 0;
     width: 100%;
     height: 100%;
     content: '';
@@ -50,7 +50,7 @@ Color Input
   }
 
   @at-root .form-colorinput-light & {
-    &:before {
+    &::before {
       background-image: escape-svg($form-check-input-checked-bg-image-dark);
     }
   }
diff --git a/core/scss/ui/forms/_form-custom.scss b/core/scss/ui/forms/_form-custom.scss
index c6b2ede82..b338bed4d 100644
--- a/core/scss/ui/forms/_form-custom.scss
+++ b/core/scss/ui/forms/_form-custom.scss
@@ -13,7 +13,7 @@ Bootstrap color input
 Remove the cancel buttons in Chrome and Safari on macOS.
  */
 [type='search']::-webkit-search-cancel-button {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 /**
diff --git a/core/scss/ui/forms/_form-icon.scss b/core/scss/ui/forms/_form-icon.scss
index 481455666..5ed8eae07 100644
--- a/core/scss/ui/forms/_form-icon.scss
+++ b/core/scss/ui/forms/_form-icon.scss
@@ -22,21 +22,21 @@ Icon input
 .input-icon-addon {
   --#{$prefix}input-icon-addon-width: #{$input-icon-addon-width};
   position: absolute;
+  inset-inline-start: 0;
   top: 0;
   bottom: 0;
-  inset-inline-start: 0;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: var(--#{$prefix}input-icon-addon-width);
   height: $input-height;
+  font-size: 1.2em;
   color: var(--#{$prefix}icon-color);
   pointer-events: none;
-  font-size: 1.2em;
 
   &:last-child {
-    inset-inline-end: 0;
     inset-inline-start: auto;
+    inset-inline-end: 0;
   }
 }
diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss
index a2a48eb36..77e02bf45 100644
--- a/core/scss/ui/forms/_form-imagecheck.scss
+++ b/core/scss/ui/forms/_form-imagecheck.scss
@@ -35,10 +35,10 @@ Image check
     border-color: var(--#{$prefix}primary);
   }
 
-  &:before {
+  &::before {
     position: absolute;
-    top: var(--#{$prefix}form-imagecheck-check-offset);
     inset-inline-start: var(--#{$prefix}form-imagecheck-check-offset);
+    top: var(--#{$prefix}form-imagecheck-check-offset);
     z-index: 1;
     display: block;
     width: $form-check-input-width;
@@ -72,8 +72,8 @@ Image check
 }
 
 .form-imagecheck-image {
-  max-width: 100%;
   display: block;
+  max-width: 100%;
   opacity: 0.64;
   @include transition(opacity $transition-time);
 
@@ -83,8 +83,8 @@ Image check
   }
 
   &:last-child {
-    border-end-end-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
     border-end-start-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
+    border-end-end-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
   }
 
   .form-imagecheck:hover &,
diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss
index 22db723a1..130383ab3 100644
--- a/core/scss/ui/forms/_form-selectgroup.scss
+++ b/core/scss/ui/forms/_form-selectgroup.scss
@@ -7,9 +7,9 @@ Select group
   --#{$prefix}form-selectgroup-gap: #{$form-selectgroup-gap};
   --#{$prefix}form-selectgroup-icon-margin-x: #{$form-selectgroup-icon-margin-x};
   display: inline-flex;
-  margin: 0;
   flex-wrap: wrap;
   gap: var(--#{$prefix}form-selectgroup-gap);
+  margin: 0;
 
   .form-selectgroup-item {
     margin: 0;
@@ -21,14 +21,14 @@ Select group
 }
 
 .form-selectgroup-item {
-  display: block;
   position: relative;
+  display: block;
 }
 
 .form-selectgroup-input {
   position: absolute;
-  top: 0;
   inset-inline-start: 0;
+  top: 0;
   z-index: -1;
   opacity: 0;
 }
@@ -37,18 +37,18 @@ Select group
   position: relative;
   display: block;
   min-width: $input-height;
-  margin: 0;
   padding: $input-btn-padding-y $input-btn-padding-x;
+  margin: 0;
   font-size: $input-btn-font-size;
   line-height: $input-line-height;
   color: var(--#{$prefix}secondary);
-  background: $form-check-input-bg;
   text-align: center;
   cursor: pointer;
   user-select: none;
+  background: $form-check-input-bg;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
-  @include border-radius(var(--#{$prefix}border-radius));
   box-shadow: $input-box-shadow;
+  @include border-radius(var(--#{$prefix}border-radius));
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
   .icon:only-child {
@@ -64,8 +64,8 @@ Select group
   display: inline-block;
   width: $form-check-input-width;
   height: $form-check-input-width;
-  border: $form-check-input-border;
   vertical-align: middle;
+  border: $form-check-input-border;
   box-shadow: $form-check-input-box-shadow;
 
   .form-selectgroup-input[type='checkbox'] + .form-selectgroup-label & {
@@ -95,8 +95,8 @@ Select group
 
 .form-selectgroup-check-floated {
   position: absolute;
-  top: $input-btn-padding-y;
   inset-inline-end: $input-btn-padding-y;
+  top: $input-btn-padding-y;
 }
 
 .form-selectgroup-input:checked + .form-selectgroup-label {
@@ -121,9 +121,9 @@ Alternate version of form select group
  */
 .form-selectgroup-boxes {
   .form-selectgroup-label {
-    text-align: start;
     padding: $card-spacer-x $card-spacer-y;
     color: inherit;
+    text-align: start;
   }
 
   .form-selectgroup-input:checked {
diff --git a/core/scss/ui/typo/_hr.scss b/core/scss/ui/typo/_hr.scss
index 3fcfa5ba0..bd2ad5ac0 100644
--- a/core/scss/ui/typo/_hr.scss
+++ b/core/scss/ui/typo/_hr.scss
@@ -14,58 +14,58 @@ Hr text
   --#{$prefix}hr-text-gap: #{$hr-text-gap};
   display: flex;
   align-items: center;
-  margin: $hr-margin-y 0;
-  @include subheader;
   height: 1px;
+  margin: $hr-margin-y 0;
+  @include subheader();
 
-  &:after,
-  &:before {
+  &::after,
+  &::before {
     flex: 1 1 auto;
     height: 1px;
     background-color: var(--#{$prefix}border-color);
   }
 
-  &:before {
-    content: '';
+  &::before {
     margin-inline-end: var(--#{$prefix}hr-text-gap);
+    content: '';
   }
 
-  &:after {
-    content: '';
+  &::after {
     margin-inline-start: var(--#{$prefix}hr-text-gap);
+    content: '';
   }
 
   > *:first-child {
-    padding-inline-end: var(--#{$prefix}hr-text-gap);
     padding-inline-start: 0;
+    padding-inline-end: var(--#{$prefix}hr-text-gap);
     color: var(--#{$prefix}secondary);
   }
 
   &.hr-text-left,
   &.hr-text-start {
-    &:before {
+    &::before {
       content: none;
     }
 
     & > *:first-child {
-      padding-inline-end: var(--#{$prefix}hr-text-gap);
       padding-inline-start: var(--#{$prefix}hr-text-gap);
+      padding-inline-end: var(--#{$prefix}hr-text-gap);
     }
   }
 
   &.hr-text-right,
   &.hr-text-end {
-    &:before {
+    &::before {
       content: '';
     }
 
-    &:after {
+    &::after {
       content: none;
     }
 
     & > *:first-child {
-      padding-inline-end: 0;
       padding-inline-start: var(--#{$prefix}hr-text-gap);
+      padding-inline-end: 0;
     }
   }
 
diff --git a/core/scss/utils/_background.scss b/core/scss/utils/_background.scss
index 33bdfe05c..b8b2870c8 100644
--- a/core/scss/utils/_background.scss
+++ b/core/scss/utils/_background.scss
@@ -12,6 +12,6 @@
 
 .bg-cover {
   background-repeat: no-repeat;
-  background-size: cover;
   background-position: center;
+  background-size: cover;
 }
diff --git a/core/scss/vendor/_apexcharts.scss b/core/scss/vendor/_apexcharts.scss
index a34bd3982..fe58aa8ae 100644
--- a/core/scss/vendor/_apexcharts.scss
+++ b/core/scss/vendor/_apexcharts.scss
@@ -1,19 +1,19 @@
 @use '../config' as *;
 
 .apexcharts-tooltip {
+  padding: 0.25rem !important;
+  font-size: $tooltip-font-size !important;
   color: $tooltip-color !important;
   background: $tooltip-bg !important;
-  font-size: $tooltip-font-size !important;
-  padding: 0.25rem !important;
   box-shadow: none !important;
 }
 
 .apexcharts-tooltip-title {
-  background: transparent !important;
-  border: 0 !important;
+  padding: 0.25rem 0.5rem !important;
   margin: 0 !important;
   font-weight: var(--#{$prefix}font-weight-semibold);
-  padding: 0.25rem 0.5rem !important;
+  background: transparent !important;
+  border: 0 !important;
 }
 
 .apexcharts-tooltip-y-group {
@@ -21,10 +21,10 @@
 }
 
 .apexcharts-tooltip-series-group {
-  padding: 0 0.5rem 0 !important;
+  padding: 0 0.5rem !important;
 }
 
-.apexcharts-tooltip-marker:before {
+.apexcharts-tooltip-marker::before {
   font-size: 16px !important;
 }
 
diff --git a/core/scss/vendor/_coloris.scss b/core/scss/vendor/_coloris.scss
index 7548c0213..5e8db3e47 100644
--- a/core/scss/vendor/_coloris.scss
+++ b/core/scss/vendor/_coloris.scss
@@ -1,8 +1,8 @@
 @use '../config' as *;
 
 .clr-picker {
-  box-shadow: var(--#{$prefix}shadow-dropdown);
   background-color: var(--#{$prefix}bg-surface);
+  box-shadow: var(--#{$prefix}shadow-dropdown);
   @include border-radius(var(--#{$prefix}border-radius));
 }
 
@@ -13,8 +13,8 @@
 input.clr-color {
   @include border-radius(var(--#{$prefix}border-radius));
   color: var(--#{$prefix}body-color);
-  border-color: var(--#{$prefix}border-color);
   background: transparent;
+  border-color: var(--#{$prefix}border-color);
 
   &:focus {
     @include focus-ring(true);
@@ -24,10 +24,10 @@ input.clr-color {
 .clr-swatches {
   button {
     @include border-radius(var(--#{$prefix}border-radius));
-    padding: 0 2px 4px 2px;
+    padding: 0 2px 4px;
 
     &:focus {
-      @include focus-ring;
+      @include focus-ring();
     }
   }
 }
@@ -37,14 +37,14 @@ input.clr-color {
   overflow: visible;
 
   button,
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     @include border-radius(var(--#{$prefix}border-radius));
   }
 
   button {
     &:focus {
-      @include focus-ring;
+      @include focus-ring();
     }
   }
 }
@@ -53,18 +53,18 @@ input.clr-color {
   display: block;
 
   button {
-    width: 1.5rem;
-    height: 1.5rem;
     inset-inline-start: 6px;
     inset-inline-end: auto;
+    width: 1.5rem;
+    height: 1.5rem;
     @include border-radius(var(--#{$prefix}border-radius));
 
-    &:after {
+    &::after {
       box-shadow: inset 0 0 0 1px var(--#{$prefix}border-color-translucent);
     }
 
     &:focus {
-      @include focus-ring;
+      @include focus-ring();
     }
   }
 
diff --git a/core/scss/vendor/_dropzone.scss b/core/scss/vendor/_dropzone.scss
index 42ce090e1..a4881264a 100644
--- a/core/scss/vendor/_dropzone.scss
+++ b/core/scss/vendor/_dropzone.scss
@@ -1,14 +1,14 @@
 @use '../config' as *;
 
 .dropzone {
-  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color) !important;
-  color: var(--#{$prefix}secondary) !important;
   padding: 1rem !important;
+  color: var(--#{$prefix}secondary) !important;
+  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color) !important;
 
   &.dz-drag-hover {
-    border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);
-    background: color-transparent(var(--#{$prefix}primary), 0.01);
     color: var(--#{$prefix}primary);
+    background: color-transparent(var(--#{$prefix}primary), 0.01);
+    border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);
 
     .dz-message {
       opacity: 1;
diff --git a/core/scss/vendor/_fullcalendar.scss b/core/scss/vendor/_fullcalendar.scss
index 59a3be229..5959b9d16 100644
--- a/core/scss/vendor/_fullcalendar.scss
+++ b/core/scss/vendor/_fullcalendar.scss
@@ -15,11 +15,11 @@
 }
 
 .fc-daygrid-dot-event {
-  background-color: var(--fc-event-bg-color);
-  border: 1px solid var(--fc-event-border-color);
-  color: var(--fc-event-text-color);
   padding-top: 1px;
   padding-bottom: 1px;
+  color: var(--fc-event-text-color);
+  background-color: var(--fc-event-bg-color);
+  border: 1px solid var(--fc-event-border-color);
 
   .fc-event-title {
     font-weight: inherit;
@@ -27,14 +27,14 @@
 }
 
 .fc-col-header-cell {
-  background-color: var(--#{$prefix}bg-surface-secondary);
-  color: var(--#{$prefix}secondary);
-  text-transform: uppercase;
-  font-weight: var(--#{$prefix}font-weight-medium);
-  font-size: var(--#{$prefix}font-size-h5);
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
+  font-size: var(--#{$prefix}font-size-h5);
+  font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1;
+  color: var(--#{$prefix}secondary);
+  text-transform: uppercase;
+  background-color: var(--#{$prefix}bg-surface-secondary);
 }
 
 .fc-event-time {
@@ -50,8 +50,8 @@
 }
 
 .fc-button {
+  font-weight: var(--#{$prefix}font-weight-medium) !important;
   color: var(--#{$prefix}body-color) !important;
   background-color: transparent !important;
   border-color: var(--#{$prefix}border-color) !important;
-  font-weight: var(--#{$prefix}font-weight-medium) !important;
 }
diff --git a/core/scss/vendor/_jsvectormap.scss b/core/scss/vendor/_jsvectormap.scss
index d1a071267..e8acf79ba 100644
--- a/core/scss/vendor/_jsvectormap.scss
+++ b/core/scss/vendor/_jsvectormap.scss
@@ -1,22 +1,22 @@
 @use '../config' as *;
 
 .jvm-tooltip {
-  background: var(--#{$prefix}bg-surface-inverted);
-  color: var(--#{$prefix}text-inverted);
   font-family: inherit;
   font-size: $h5-font-size;
+  color: var(--#{$prefix}text-inverted);
+  background: var(--#{$prefix}bg-surface-inverted);
   box-shadow: $card-box-shadow;
 }
 
 .jvm-series-container .jvm-legend .jvm-legend-title {
-  border-bottom: 0;
   font-weight: var(--#{$prefix}font-weight-medium);
+  border-bottom: 0;
 }
 
 .jvm-series-container .jvm-legend {
+  min-width: 8rem;
   background-color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  min-width: 8rem;
 
   .jvm-legend-inner .jvm-legend-tick {
     display: flex;
@@ -30,17 +30,17 @@
 }
 
 .jvm-zoom-btn {
-  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-  color: var(--#{$prefix}body-color);
-  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  line-height: 1;
   width: 1.5rem;
   height: 1.5rem;
+  padding: 0;
   font-size: 1rem;
+  line-height: 1;
+  color: var(--#{$prefix}body-color);
+  background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   box-shadow: $card-box-shadow;
 
   &.jvm-zoomout {
diff --git a/core/scss/vendor/_litepicker.scss b/core/scss/vendor/_litepicker.scss
index e422bc0b3..2fb852b67 100644
--- a/core/scss/vendor/_litepicker.scss
+++ b/core/scss/vendor/_litepicker.scss
@@ -52,8 +52,8 @@
 
   .container__days {
     .day-item {
-      cursor: pointer !important;
       padding: 0.5rem 0 !important;
+      cursor: pointer !important;
       @include transition(color $transition-time, background-color $transition-time, border-color $transition-time);
     }
   }
@@ -62,8 +62,8 @@
     box-shadow: $input-box-shadow;
 
     .container__months {
-      box-shadow: none;
       background-color: var(--#{$prefix}bg-forms);
+      box-shadow: none;
       @include border-radius(calc(var(--#{$prefix}border-radius) - 1px));
     }
   }
diff --git a/core/scss/vendor/_nouislider.scss b/core/scss/vendor/_nouislider.scss
index 61ef7c474..1fbb7a776 100644
--- a/core/scss/vendor/_nouislider.scss
+++ b/core/scss/vendor/_nouislider.scss
@@ -1,11 +1,11 @@
 @use '../config' as *;
 
 .noUi-target {
+  color: $form-range-thumb-bg;
+  background: none;
   border: 0;
   box-shadow: none;
-  background: none;
   @include border-radius(0);
-  color: $form-range-thumb-bg;
 }
 
 .noUi-horizontal {
@@ -21,22 +21,22 @@
 .noUi-handle {
   width: $form-range-thumb-width;
   height: $form-range-thumb-height;
+  background: currentColor;
   border: $form-range-thumb-border;
+  outline: 0;
   box-shadow: $form-range-thumb-box-shadow;
   @include border-radius($form-range-thumb-border-radius);
-  background: currentColor;
-  outline: 0;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: none;
   }
 
   .noUi-horizontal & {
+    inset-inline-end: calc($form-range-thumb-height * -0.5);
+    top: calc($form-range-thumb-height * -0.5);
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    top: calc($form-range-thumb-height * -0.5);
-    inset-inline-end: calc($form-range-thumb-height * -0.5);
     margin: 1px 1px 0 0;
   }
 
diff --git a/core/scss/vendor/_tom-select.scss b/core/scss/vendor/_tom-select.scss
index fc2ba141b..e8b0b41c3 100644
--- a/core/scss/vendor/_tom-select.scss
+++ b/core/scss/vendor/_tom-select.scss
@@ -41,10 +41,10 @@ $input-border-width: 1px;
 }
 
 .ts-dropdown {
-  background: var(--#{$prefix}bg-surface);
-  color: var(--#{$prefix}body-color);
-  box-shadow: var(--#{$prefix}shadow-dropdown);
   z-index: $zindex-dropdown;
+  color: var(--#{$prefix}body-color);
+  background: var(--#{$prefix}bg-surface);
+  box-shadow: var(--#{$prefix}shadow-dropdown);
 
   .option {
     padding: $dropdown-item-padding-y $dropdown-item-padding-x;
@@ -52,8 +52,8 @@ $input-border-width: 1px;
 
   // Override TomSelect's bootstrap5 preset which references --bs- vars not available in Tabler (#2600)
   .active {
-    background-color: var(--#{$prefix}active-bg);
     color: var(--#{$prefix}body-color);
+    background-color: var(--#{$prefix}active-bg);
   }
 
   .active.create {
@@ -61,8 +61,8 @@ $input-border-width: 1px;
   }
 
   .optgroup-header {
-    background: var(--#{$prefix}bg-surface);
     color: var(--#{$prefix}body-color);
+    background: var(--#{$prefix}bg-surface);
   }
 }
 
@@ -80,15 +80,15 @@ $input-border-width: 1px;
 .ts-wrapper.multi,
 .ts-wrapper.multi.disabled {
   .ts-control > div {
+    color: var(--#{$prefix}body-color);
     background: var(--#{$prefix}bg-surface-secondary);
     border: 1px solid var(--#{$prefix}border-color);
-    color: var(--#{$prefix}body-color);
   }
 }
 
 .ts-wrapper.disabled .ts-control {
-  opacity: 1;
   background-color: var(--#{$prefix}secondary-bg);
+  opacity: 1;
 
   & > div.item {
     color: var(--#{$prefix}gray-500);
diff --git a/core/scss/vendor/_wysiwyg.scss b/core/scss/vendor/_wysiwyg.scss
index 888d848a7..52fab75d3 100644
--- a/core/scss/vendor/_wysiwyg.scss
+++ b/core/scss/vendor/_wysiwyg.scss
@@ -1,13 +1,13 @@
 @use '../config' as *;
 
 .tox-hugerte {
+  font-family: var(--#{$prefix}font-sans-serif) !important;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
   @include border-radius($border-radius);
-  font-family: var(--#{$prefix}font-sans-serif) !important;
 }
 
 .tox-toolbar__group {
-  padding: 0 0.5rem 0;
+  padding: 0 0.5rem;
 }
 
 .tox .tox-toolbar__primary {
@@ -16,9 +16,9 @@
 
 .tox:not(.tox-hugerte-inline) {
   .tox-editor-header {
+    padding: 0 !important;
     border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
     box-shadow: none !important;
-    padding: 0 !important;
   }
 }
 
diff --git a/package.json b/package.json
index 93f527c8a..957579c99 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,9 @@
     "publish": "changeset publish",
     "reformat-md": "tsx .build/reformat-mdx.ts",
     "lint": "pnpm run lint-md && pnpm run lint-prettier && pnpm run lint-scss-vars",
-    "lint:fix": "pnpm run lint-md-fix && pnpm run format-prettier",
+    "lint:fix": "pnpm run lint-md-fix && pnpm run lint:scss:fix && pnpm run format-prettier",
+    "lint:scss": "pnpm --filter @tabler/core lint:scss",
+    "lint:scss:fix": "pnpm --filter @tabler/core lint:scss:fix",
     "lint-md": "markdownlint --config .markdownlint-docs.json \"docs/pages/**/*.mdx\"",
     "lint-md-fix": "markdownlint --fix --config .markdownlint-docs.json \"docs/pages/**/*.mdx\"",
     "lint-prettier": "prettier --check \"core/scss/**/*.scss\" \"core/js/**/*.{js,ts}\" \"core/.build/**/*.{ts,mts,mjs}\" \".build/**/*.ts\" \"preview/scss/**/*.scss\" \"preview/js/**/*.{js,ts}\" \"{preview,docs,shared}/**/*.astro\" \"{preview,docs}/**/*.{mjs,mts}\" \"shared/**/*.{js,mjs,mts,ts}\" --cache",
@@ -34,7 +36,7 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.7.0",
     "@changesets/cli": "^2.31.1",
-    "@stylistic/stylelint-config": "^5.0.0",
+    "@stylistic/stylelint-config": "^2.0.0",
     "adm-zip": "^0.6.0",
     "autoprefixer": "^10.5.4",
     "bundlewatch": "^0.4.2",
@@ -53,7 +55,7 @@
     "rtlcss": "^4.3.0",
     "sass": "1.102.0",
     "shelljs": "^0.10.0",
-    "stylelint": "^17.14.1",
+    "stylelint": "^16.26.1",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
     "terser": "^5.49.0",
     "tsx": "^4.23.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8949145b1..90575df5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,8 +22,8 @@ importers:
         specifier: ^2.31.1
         version: 2.31.1(@types/node@26.1.1)
       '@stylistic/stylelint-config':
-        specifier: ^5.0.0
-        version: 5.0.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
+        specifier: ^2.0.0
+        version: 2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
       adm-zip:
         specifier: ^0.6.0
         version: 0.6.0
@@ -79,11 +79,11 @@ importers:
         specifier: ^0.10.0
         version: 0.10.0
       stylelint:
-        specifier: ^17.14.1
-        version: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
+        specifier: ^16.26.1
+        version: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
       stylelint-config-twbs-bootstrap:
         specifier: ^16.1.0
-        version: 16.1.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
+        version: 16.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
       terser:
         specifier: ^5.49.0
         version: 5.49.0
@@ -706,25 +706,12 @@ packages:
     resolution: {integrity: sha512-y7/yvZ2TPAnR9+jnc00klvNNLkJiXFFrQA/hlLCcxA9a2A4zQIOimyFQ9XfwYKiGD1fb5GY8vbKIIgO8d5Tb2A==}
     engines: {node: '>= 20.12.0'}
 
-  '@csstools/css-calc@3.3.0':
-    resolution: {integrity: sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      '@csstools/css-parser-algorithms': ^4.0.0
-      '@csstools/css-tokenizer': ^4.0.0
-
   '@csstools/css-parser-algorithms@3.0.5':
     resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
     engines: {node: '>=18'}
     peerDependencies:
       '@csstools/css-tokenizer': ^3.0.4
 
-  '@csstools/css-parser-algorithms@4.0.0':
-    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      '@csstools/css-tokenizer': ^4.0.0
-
   '@csstools/css-syntax-patches-for-csstree@1.1.7':
     resolution: {integrity: sha512-fQ+05118eQS1cofO3aJpB5efgpBZMvIzwr/sbC8kDLVA5XLG8q1kJV5yzrUAI1f7lvhPnm8fgIjzFB8/O/5Dig==}
     peerDependencies:
@@ -737,10 +724,6 @@ packages:
     resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
     engines: {node: '>=18'}
 
-  '@csstools/css-tokenizer@4.0.0':
-    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
-    engines: {node: '>=20.19.0'}
-
   '@csstools/media-query-list-parser@3.0.1':
     resolution: {integrity: sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==}
     engines: {node: '>=18'}
@@ -748,24 +731,21 @@ packages:
       '@csstools/css-parser-algorithms': ^3.0.1
       '@csstools/css-tokenizer': ^3.0.1
 
-  '@csstools/media-query-list-parser@5.0.0':
-    resolution: {integrity: sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==}
-    engines: {node: '>=20.19.0'}
+  '@csstools/media-query-list-parser@4.0.3':
+    resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==}
+    engines: {node: '>=18'}
     peerDependencies:
-      '@csstools/css-parser-algorithms': ^4.0.0
-      '@csstools/css-tokenizer': ^4.0.0
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
 
-  '@csstools/selector-resolve-nested@4.0.1':
-    resolution: {integrity: sha512-j3vdQu0XwLME5qOTWxm8cnmvsf423R2YL6DbKklCHZwkDm7UdKNu6RPlw4REIJhSlKBICY3B70/7QZdicLqZgg==}
-    engines: {node: '>=20.19.0'}
+  '@csstools/selector-specificity@5.0.0':
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
+    engines: {node: '>=18'}
     peerDependencies:
-      postcss-selector-parser: ^7.1.1
+      postcss-selector-parser: ^7.0.0
 
-  '@csstools/selector-specificity@6.0.0':
-    resolution: {integrity: sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      postcss-selector-parser: ^7.1.1
+  '@dual-bundle/import-meta-resolve@4.2.1':
+    resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}
 
   '@emmetio/abbreviation@2.3.3':
     resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
@@ -1793,10 +1773,6 @@ packages:
   '@sinclair/typebox@0.34.52':
     resolution: {integrity: sha512-XiMQh7qqVlxZzcVD+kkGMNGMzcTrDMLWI7S4x7z1MkCkbDPrekpZXEUK0eZqZFMuHQg2a2DZOcDIh9o5v3Gonw==}
 
-  '@sindresorhus/merge-streams@4.0.0':
-    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
-    engines: {node: '>=18'}
-
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
@@ -1806,23 +1782,12 @@ packages:
     peerDependencies:
       stylelint: ^16.8.0
 
-  '@stylistic/stylelint-config@5.0.0':
-    resolution: {integrity: sha512-AW6S27wEm4DzB+uOZMvRkONIu0ba50VRbFte7qYJgGP4dacS8kAuj8HZJ+s+8kE4GK3XXBcSKLb75a+NfJlbiQ==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      stylelint: ^17.6.0
-
   '@stylistic/stylelint-plugin@3.1.3':
     resolution: {integrity: sha512-85fsmzgsIVmyG3/GFrjuYj6Cz8rAM7IZiPiXCMiSMfoDOC1lOrzrXPDk24WqviAghnPqGpx8b0caK2PuewWGFg==}
     engines: {node: ^18.12 || >=20.9}
     peerDependencies:
       stylelint: ^16.8.0
 
-  '@stylistic/stylelint-plugin@5.2.1':
-    resolution: {integrity: sha512-BMRWJVtO16uADJmKcGi6mreei/QYdOviABXuaCeHEc3T3pxo4wFYYSvnxIoyiPVfDJqX+DxQdnGkuc6KxsRaSw==}
-    peerDependencies:
-      stylelint: ^17.6.0
-
   '@swc/helpers@0.2.14':
     resolution: {integrity: sha512-wpCQMhf5p5GhNg2MmGKXzUNwxe7zRiCsmqYsamez2beP7mKPCSiu+BjZcdN95yYSzO857kr0VfQewmGpS77nqA==}
 
@@ -2254,6 +2219,9 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  balanced-match@2.0.0:
+    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
+
   balanced-match@4.0.4:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
@@ -2934,10 +2902,6 @@ packages:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
 
-  globby@16.2.2:
-    resolution: {integrity: sha512-NLvV9ubZ6NDsJaOpKPy3cQeJpKi9DcWiyCiFUpJPA0YihRqiE6RWaLUmgNNPr8MgPpLZjnBjSmou7uZBRJv9wA==}
-    engines: {node: '>=20'}
-
   globjoin@0.1.4:
     resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
 
@@ -2966,10 +2930,6 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  has-flag@5.0.1:
-    resolution: {integrity: sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==}
-    engines: {node: '>=12'}
-
   has-symbols@1.1.0:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
@@ -3037,9 +2997,9 @@ packages:
   html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
 
-  html-tags@5.1.0:
-    resolution: {integrity: sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==}
-    engines: {node: '>=20.10'}
+  html-tags@3.3.1:
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
 
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
@@ -3084,8 +3044,9 @@ packages:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
-  import-meta-resolve@4.2.0:
-    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
 
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
@@ -3155,10 +3116,6 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-path-inside@4.0.0:
-    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
-    engines: {node: '>=12'}
-
   is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
@@ -3437,8 +3394,8 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  mathml-tag-names@4.0.0:
-    resolution: {integrity: sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==}
+  mathml-tag-names@2.1.3:
+    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
 
   mdast-util-definitions@6.0.0:
     resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==}
@@ -3500,9 +3457,9 @@ packages:
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
-  meow@14.1.0:
-    resolution: {integrity: sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==}
-    engines: {node: '>=20'}
+  meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
 
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
@@ -4316,10 +4273,6 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
-  slash@5.1.0:
-    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
-    engines: {node: '>=14.16'}
-
   slice-ansi@4.0.0:
     resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
     engines: {node: '>=10'}
@@ -4498,9 +4451,9 @@ packages:
     peerDependencies:
       stylelint: ^16.8.2
 
-  stylelint@17.14.1:
-    resolution: {integrity: sha512-xVQwyiuxALUBNB2fBe0tmNemg9KqLtdj3T64mioFDar79B2cU8LIyz+3KL6LdiHs9NkeNfwxpKSaIVOY8f112g==}
-    engines: {node: '>=20.19.0'}
+  stylelint@16.26.1:
+    resolution: {integrity: sha512-v20V59/crfc8sVTAtge0mdafI3AdnzQ2KsWe6v523L4OA1bJO02S7MO2oyXDCS6iWb9ckIPnqAFVItqSBQr7jw==}
+    engines: {node: '>=18.12.0'}
     hasBin: true
 
   suf-log@2.5.3:
@@ -4518,9 +4471,9 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
-  supports-hyperlinks@4.5.0:
-    resolution: {integrity: sha512-ZW2OvfeCXrNTbLakPUzjQG922EeGCOteFSVoek5DKStTh898wf7zgtuFlzQN8HfZCxC3Eh02yJVrRW51hADf+w==}
-    engines: {node: '>=20'}
+  supports-hyperlinks@3.2.0:
+    resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
+    engines: {node: '>=14.18'}
 
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
@@ -4657,10 +4610,6 @@ packages:
   undici-types@8.3.0:
     resolution: {integrity: sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==}
 
-  unicorn-magic@0.4.0:
-    resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
-    engines: {node: '>=20'}
-
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
@@ -5058,9 +5007,9 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
-  write-file-atomic@7.0.1:
-    resolution: {integrity: sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   ws@8.21.0:
     resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
@@ -5687,44 +5636,31 @@ snapshots:
       fast-wrap-ansi: 0.2.2
       sisteransi: 1.0.5
 
-  '@csstools/css-calc@3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
-    dependencies:
-      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-tokenizer': 4.0.0
-
   '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
     dependencies:
       '@csstools/css-tokenizer': 3.0.4
 
-  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
-    dependencies:
-      '@csstools/css-tokenizer': 4.0.0
-
   '@csstools/css-syntax-patches-for-csstree@1.1.7(css-tree@3.2.1)':
     optionalDependencies:
       css-tree: 3.2.1
 
   '@csstools/css-tokenizer@3.0.4': {}
 
-  '@csstools/css-tokenizer@4.0.0': {}
-
   '@csstools/media-query-list-parser@3.0.1(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
 
-  '@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+  '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
     dependencies:
-      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-tokenizer': 4.0.0
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
 
-  '@csstools/selector-resolve-nested@4.0.1(postcss-selector-parser@7.1.4)':
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.4)':
     dependencies:
       postcss-selector-parser: 7.1.4
 
-  '@csstools/selector-specificity@6.0.0(postcss-selector-parser@7.1.4)':
-    dependencies:
-      postcss-selector-parser: 7.1.4
+  '@dual-bundle/import-meta-resolve@4.2.1': {}
 
   '@emmetio/abbreviation@2.3.3':
     dependencies:
@@ -6453,21 +6389,14 @@ snapshots:
 
   '@sinclair/typebox@0.34.52': {}
 
-  '@sindresorhus/merge-streams@4.0.0': {}
-
   '@standard-schema/spec@1.1.0': {}
 
-  '@stylistic/stylelint-config@2.0.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))':
+  '@stylistic/stylelint-config@2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))':
     dependencies:
-      '@stylistic/stylelint-plugin': 3.1.3(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
+      '@stylistic/stylelint-plugin': 3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
 
-  '@stylistic/stylelint-config@5.0.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))':
-    dependencies:
-      '@stylistic/stylelint-plugin': 5.2.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
-
-  '@stylistic/stylelint-plugin@3.1.3(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))':
+  '@stylistic/stylelint-plugin@3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
@@ -6477,18 +6406,7 @@ snapshots:
       postcss-selector-parser: 6.1.4
       postcss-value-parser: 4.2.0
       style-search: 0.1.0
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
-
-  '@stylistic/stylelint-plugin@5.2.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))':
-    dependencies:
-      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-tokenizer': 4.0.0
-      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      postcss: 8.5.23
-      postcss-selector-parser: 7.1.4
-      postcss-value-parser: 4.2.0
-      style-search: 0.1.0
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
 
   '@swc/helpers@0.2.14': {}
 
@@ -7048,6 +6966,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  balanced-match@2.0.0: {}
+
   balanced-match@4.0.4: {}
 
   baseline-browser-mapping@2.11.6: {}
@@ -7768,15 +7688,6 @@ snapshots:
       merge2: 1.4.1
       slash: 3.0.0
 
-  globby@16.2.2:
-    dependencies:
-      '@sindresorhus/merge-streams': 4.0.0
-      fast-glob: 3.3.3
-      ignore: 7.0.6
-      is-path-inside: 4.0.0
-      slash: 5.1.0
-      unicorn-magic: 0.4.0
-
   globjoin@0.1.4: {}
 
   good-listener@1.2.2:
@@ -7807,8 +7718,6 @@ snapshots:
 
   has-flag@4.0.0: {}
 
-  has-flag@5.0.1: {}
-
   has-symbols@1.1.0: {}
 
   has-tostringtag@1.0.2:
@@ -7961,7 +7870,7 @@ snapshots:
 
   html-escaper@3.0.3: {}
 
-  html-tags@5.1.0: {}
+  html-tags@3.3.1: {}
 
   html-void-elements@3.0.0: {}
 
@@ -7994,7 +7903,7 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  import-meta-resolve@4.2.0: {}
+  imurmurhash@0.1.4: {}
 
   inflight@1.0.6:
     dependencies:
@@ -8046,8 +7955,6 @@ snapshots:
 
   is-number@7.0.0: {}
 
-  is-path-inside@4.0.0: {}
-
   is-plain-obj@4.1.0: {}
 
   is-plain-object@5.0.0: {}
@@ -8300,7 +8207,7 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  mathml-tag-names@4.0.0: {}
+  mathml-tag-names@2.1.3: {}
 
   mdast-util-definitions@6.0.0:
     dependencies:
@@ -8477,7 +8384,7 @@ snapshots:
 
   mdurl@2.0.0: {}
 
-  meow@14.1.0: {}
+  meow@13.2.0: {}
 
   merge-stream@2.0.0: {}
 
@@ -9572,8 +9479,6 @@ snapshots:
 
   slash@3.0.0: {}
 
-  slash@5.1.0: {}
-
   slice-ansi@4.0.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -9685,56 +9590,56 @@ snapshots:
     optionalDependencies:
       '@babel/core': 7.29.7(supports-color@10.2.2)
 
-  stylelint-config-recess-order@5.1.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
+  stylelint-config-recess-order@5.1.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
     dependencies:
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
-      stylelint-order: 6.0.4(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint-order: 6.0.4(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
 
-  stylelint-config-recommended-scss@14.1.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
+  stylelint-config-recommended-scss@14.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
     dependencies:
       postcss-scss: 4.0.9(postcss@8.5.23)
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
-      stylelint-config-recommended: 14.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
-      stylelint-scss: 6.14.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint-config-recommended: 14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint-scss: 6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
     optionalDependencies:
       postcss: 8.5.23
 
-  stylelint-config-recommended@14.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
+  stylelint-config-recommended@14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
     dependencies:
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
 
-  stylelint-config-standard-scss@14.0.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
+  stylelint-config-standard-scss@14.0.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
     dependencies:
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
-      stylelint-config-recommended-scss: 14.1.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
-      stylelint-config-standard: 36.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint-config-recommended-scss: 14.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint-config-standard: 36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
     optionalDependencies:
       postcss: 8.5.23
 
-  stylelint-config-standard@36.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
+  stylelint-config-standard@36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
     dependencies:
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
-      stylelint-config-recommended: 14.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint-config-recommended: 14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
 
-  stylelint-config-twbs-bootstrap@16.1.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
+  stylelint-config-twbs-bootstrap@16.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
     dependencies:
-      '@stylistic/stylelint-config': 2.0.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
-      '@stylistic/stylelint-plugin': 3.1.3(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
-      stylelint-config-recess-order: 5.1.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
-      stylelint-config-standard: 36.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
-      stylelint-config-standard-scss: 14.0.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
-      stylelint-scss: 6.14.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
+      '@stylistic/stylelint-config': 2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      '@stylistic/stylelint-plugin': 3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint-config-recess-order: 5.1.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint-config-standard: 36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint-config-standard-scss: 14.0.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint-scss: 6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
     transitivePeerDependencies:
       - postcss
 
-  stylelint-order@6.0.4(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
+  stylelint-order@6.0.4(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
     dependencies:
       postcss: 8.5.23
       postcss-sorting: 8.0.2(postcss@8.5.23)
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
 
-  stylelint-scss@6.14.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
+  stylelint-scss@6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
     dependencies:
       css-tree: 3.2.1
       is-plain-object: 5.0.0
@@ -9744,17 +9649,17 @@ snapshots:
       postcss-resolve-nested-selector: 0.1.6
       postcss-selector-parser: 7.1.4
       postcss-value-parser: 4.2.0
-      stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
 
-  stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2):
+  stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2):
     dependencies:
-      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-syntax-patches-for-csstree': 1.1.7(css-tree@3.2.1)
-      '@csstools/css-tokenizer': 4.0.0
-      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      '@csstools/selector-resolve-nested': 4.0.1(postcss-selector-parser@7.1.4)
-      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.4)
+      '@dual-bundle/import-meta-resolve': 4.2.1
+      balanced-match: 2.0.0
       colord: 2.9.3
       cosmiconfig: 9.0.2(typescript@7.0.2)
       css-functions-list: 3.3.3
@@ -9764,25 +9669,29 @@ snapshots:
       fastest-levenshtein: 1.0.16
       file-entry-cache: 11.1.5
       global-modules: 2.0.0
-      globby: 16.2.2
+      globby: 11.1.0
       globjoin: 0.1.4
-      html-tags: 5.1.0
+      html-tags: 3.3.1
       ignore: 7.0.6
-      import-meta-resolve: 4.2.0
-      mathml-tag-names: 4.0.0
-      meow: 14.1.0
+      imurmurhash: 0.1.4
+      is-plain-object: 5.0.0
+      known-css-properties: 0.37.0
+      mathml-tag-names: 2.1.3
+      meow: 13.2.0
       micromatch: 4.0.8
       normalize-path: 3.0.0
       picocolors: 1.1.1
       postcss: 8.5.23
+      postcss-resolve-nested-selector: 0.1.6
       postcss-safe-parser: 7.0.1(postcss@8.5.23)
       postcss-selector-parser: 7.1.4
       postcss-value-parser: 4.2.0
-      string-width: 8.2.1
-      supports-hyperlinks: 4.5.0
+      resolve-from: 5.0.0
+      string-width: 4.2.3
+      supports-hyperlinks: 3.2.0
       svg-tags: 1.0.0
       table: 6.9.0
-      write-file-atomic: 7.0.1
+      write-file-atomic: 5.0.1
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -9801,10 +9710,10 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  supports-hyperlinks@4.5.0:
+  supports-hyperlinks@3.2.0:
     dependencies:
-      has-flag: 5.0.1
-      supports-color: 10.2.2
+      has-flag: 4.0.0
+      supports-color: 7.2.0
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
@@ -9941,8 +9850,6 @@ snapshots:
 
   undici-types@8.3.0: {}
 
-  unicorn-magic@0.4.0: {}
-
   unified@11.0.5:
     dependencies:
       '@types/unist': 3.0.3
@@ -10251,8 +10158,9 @@ snapshots:
 
   wrappy@1.0.2: {}
 
-  write-file-atomic@7.0.1:
+  write-file-atomic@5.0.1:
     dependencies:
+      imurmurhash: 0.1.4
       signal-exit: 4.1.0
 
   ws@8.21.0: {}
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
index 2bd035d8d..7d98513ad 100644
--- a/stylelint.config.mjs
+++ b/stylelint.config.mjs
@@ -1,26 +1,53 @@
+// Keep this dependency on the same major as stylelint-config-twbs-bootstrap uses
+// (currently @stylistic/stylelint-config@^2 / @stylistic/stylelint-plugin@^3). A newer
+// major lists rule names the plugin twbs loads does not register, and stylelint then
+// fails every file with "Unknown rule @stylistic/…".
 import stylistic from '@stylistic/stylelint-config'
 
+// Prettier already owns SCSS formatting in this repo (`pnpm lint-prettier`), so every
+// purely stylistic rule that stylelint-config-twbs-bootstrap pulls in through @stylistic
+// is switched off — otherwise the two tools fight over quotes, indentation and zeros.
 const prettierOwned = Object.fromEntries(Object.keys(stylistic.rules).map((rule) => [rule, null]))
 
 export default {
   extends: ['stylelint-config-twbs-bootstrap'],
-  ignoreFiles: ['**/node_modules/**', '**/dist/**'],
+  ignoreFiles: [
+    '**/node_modules/**',
+    '**/dist/**',
+    // sass-true fixtures spell out the exact CSS a mixin must emit, so any autofix here
+    // (property order, `!important`, hex length) rewrites the assertion and breaks
+    // `pnpm test:scss`. Bootstrap excludes its own `**/tests/` for the same reason.
+    'core/scss/tests/**',
+  ],
   rules: {
     ...prettierOwned,
+    // Prettier breaks long Sass maps onto separate lines, which this rule reads
+    // as a missing space after the `$variable:` colon.
     'scss/dollar-variable-colon-space-after': null,
+    // Tabler intentionally qualifies type selectors (e.g. `a.card`).
     'selector-no-qualifying-type': null,
+    // Named arguments are used on purpose for readability.
     'scss/at-function-named-arguments': null,
+    // The autofix rewrites `@import url($var)` into `@import '$var'`, turning the Sass
+    // variable into a literal string — see scss/fonts/_webfonts.scss, which builds the
+    // Google Fonts URL at compile time. Sass has no `url()`-free form for that.
+    'import-notation': null,
+    // Font stacks live in Sass variables and CSS custom properties, which stylelint sees
+    // as ordinary declarations — without this the autofix lowercases real family names
+    // (`BlinkMacSystemFont` → `blinkmacsystemfont`).
+    // `camelCaseSvgKeywords` keeps `text-rendering: optimizeLegibility` intact.
+    'value-keyword-case': ['lower', { ignoreProperties: ['/^\\$font-family/', '/^--.*font/'], camelCaseSvgKeywords: true }],
   },
   overrides: [
     {
+      // Copied from upstream Bootstrap, which lints them under its own scss/vendor/ exclusion.
+      // Their declaration order is upstream's and is asserted by scss/tests — reordering it
+      // creates sync noise on every Bootstrap bump for no gain.
       files: ['core/scss/bootstrap/**/*.scss', 'core/scss/mixins/bootstrap/**/*.scss'],
-      rules: { 'scss/operator-no-unspaced': null },
-    },
-    {
-      files: ['core/scss/tests/**/*.scss'],
-      rules: { 'declaration-no-important': null, 'color-named': null },
+      rules: { 'scss/operator-no-unspaced': null, 'order/properties-order': null },
     },
     {
+      // Overrides for third-party widgets — their class names and specificity aren't ours.
       files: ['core/scss/vendor/**/*.scss'],
       rules: {
         'declaration-no-important': null,