diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 6943b0425a1..cd3f112daea 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -1057,8 +1057,8 @@ table#user-badges {
     }
 
     .remove-value-btn {
-      @include value-btn;
       margin-right: 0.25em;
+      @include value-btn;
     }
 
     .shift-up-value-btn,
@@ -1117,9 +1117,9 @@ table#user-badges {
 .value .add-value-btn,
 .shift-up-value-btn,
 .shift-down-value-btn {
-  @include value-btn;
   margin-right: 0 !important;
   margin-left: 0.25em;
+  @include value-btn;
 }
 
 .secret-value-list {
@@ -1148,9 +1148,9 @@ table#user-badges {
     }
 
     .add-value-btn {
-      @include value-btn;
       margin-left: 0.25em;
       margin-top: 0.125em;
+      @include value-btn;
     }
   }
 }
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 059fff1afba..b5edf5fc777 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -815,6 +815,8 @@
     margin-left: 0;
 
     li {
+      display: table-row;
+
       &.disabled-child {
         .child-link {
           color: var(--primary-medium);
@@ -828,7 +830,6 @@
       .btn {
         margin-left: 5px;
       }
-      display: table-row;
 
       .col.child-link {
         padding-right: 10px;
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index 1a45bcc186e..1c3b1dd93c6 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -136,6 +136,7 @@
 .staff-action-logs-controls {
   display: flex;
   align-items: center;
+  margin: 0 0 1em 0;
 
   .select-kit {
     margin: 0 0.5em;
@@ -144,7 +145,6 @@
   button {
     margin-left: auto;
   }
-  margin: 0 0 1em 0;
 
   a.filter {
     .label {
diff --git a/app/assets/stylesheets/common/admin/users.scss b/app/assets/stylesheets/common/admin/users.scss
index 2d7f06974ab..ad9f9f289d7 100644
--- a/app/assets/stylesheets/common/admin/users.scss
+++ b/app/assets/stylesheets/common/admin/users.scss
@@ -13,6 +13,7 @@
   display: flex;
   align-items: center;
   padding: 10px 5px;
+  border-top: 1px solid var(--primary-low);
 
   &:nth-of-type(1) {
     border-top: 0;
@@ -21,7 +22,6 @@
   &.highlight-danger {
     background-color: var(--danger-low);
   }
-  border-top: 1px solid var(--primary-low);
 
   &::before,
   &::after {
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 70a10f82736..843f374cf22 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -12,26 +12,25 @@ html.composer-open {
   bottom: 0;
   right: 0;
   left: 0;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   max-width: $reply-area-max-width;
   width: 100%;
   height: 0;
   min-height: 0;
-
-  &.hide-preview {
-    max-width: 740px;
-  }
-
-  @media screen and (max-width: 1200px) {
-    min-width: 0;
-  }
   z-index: z("composer", "content");
   transition: height 0.2s, max-width 0.2s, padding-bottom 0.2s, top 0.2s,
     transform 0.2s, min-height 0.2s;
   background-color: var(--secondary);
   box-shadow: var(--shadow-composer);
 
+  @media screen and (max-width: 1200px) {
+    min-width: 0;
+  }
+
+  &.hide-preview {
+    max-width: 740px;
+  }
+
   .reply-area {
     display: flex;
     flex-direction: column;
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index 91ed51458c5..57e08b917d2 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -4,12 +4,13 @@
 }
 
 .directory {
+  margin-bottom: 100px;
+  background: var(--d-content-background);
+
   .directory-value-list-item:not(:empty)
     ~ .directory-value-list-item:not(:empty)::before {
     content: "| ";
   }
-  margin-bottom: 100px;
-  background: var(--d-content-background);
 
   &.users-directory {
     .directory-group-selector {
@@ -284,14 +285,15 @@
     }
 
     &__row {
-      &:first-child {
-        border-top: 1px solid var(--primary-low);
-      }
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
       border-bottom: 1px solid var(--primary-low);
       padding: 0.85em 0.5em 1em;
       gap: 0 10%;
+
+      &:first-child {
+        border-top: 1px solid var(--primary-low);
+      }
     }
 
     &__header {
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index c5c75ed8418..3a9738bfaf1 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -92,8 +92,8 @@ small {
 }
 
 blockquote {
-  @include post-aside;
   clear: both;
+  @include post-aside;
 }
 
 h1,
@@ -304,6 +304,9 @@ textarea {
 // Common Classes
 .sortable {
   white-space: nowrap;
+  cursor: pointer;
+
+  @include user-select(none);
 
   .discourse-no-touch & {
     &:hover,
@@ -315,8 +318,6 @@ textarea {
   .d-icon {
     margin-left: 0.25em;
   }
-  @include unselectable;
-  cursor: pointer;
 
   button {
     background: none;
diff --git a/app/assets/stylesheets/common/base/edit-category.scss b/app/assets/stylesheets/common/base/edit-category.scss
index 7abf64588a3..266ccb69662 100644
--- a/app/assets/stylesheets/common/base/edit-category.scss
+++ b/app/assets/stylesheets/common/base/edit-category.scss
@@ -189,6 +189,7 @@ div.edit-category {
     .required-tag-group-row {
       display: flex;
       gap: 0.5em;
+      margin-bottom: 1em;
 
       > * {
         margin: 0;
@@ -197,7 +198,6 @@ div.edit-category {
       input[type="number"] {
         width: 4em;
       }
-      margin-bottom: 1em;
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 7d253b77e26..b76beb79abd 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -49,15 +49,16 @@
     align-items: center;
     height: 100%;
     animation: fadein 0.5s;
-    @media (prefers-reduced-motion) {
-      animation-duration: 0s;
-    }
 
     // min-width acts as a placeholder if the small logo takes a while to load
     // it prevents topic title from shifting after the small logo loads
     // it's set to match the #site-logo height so square small logos don't resize when titles dock
     min-width: var(--d-logo-height);
 
+    @media (prefers-reduced-motion) {
+      animation-duration: 0s;
+    }
+
     a,
     a:visited {
       min-width: 0;
@@ -442,11 +443,11 @@ $mobile-avatar-height: 1.532em;
   .trigger-user-card {
     .icon {
       height: $avatar-height;
+      display: inline-block;
 
       .mobile-view & {
         height: $mobile-avatar-height;
       }
-      display: inline-block;
 
       img {
         height: 100%;
@@ -466,11 +467,11 @@ $mobile-avatar-height: 1.532em;
       display: flex;
       align-items: center;
       height: $avatar-height;
+      color: var(--primary-high);
 
       .mobile-view & {
         height: $mobile-avatar-height;
       }
-      color: var(--primary-high);
 
       .d-icon {
         margin-right: 5px;
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index 026ac6a9e94..8bdfcdcb339 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -620,10 +620,11 @@ button {
   /* start state */
   .mfp-content {
     opacity: 0;
+    transform: scale(0.8);
+
     @media screen and (prefers-reduced-motion: no-preference) {
       transition: all 0.2s;
     }
-    transform: scale(0.8);
   }
 
   &.mfp-bg {
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 75e21a8c655..a1151e3ee1b 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -6,13 +6,8 @@
 
   // ensure there's always space to click outside on tiny devices
   max-width: 90vw;
-
-  --100dvh: 100%;
-  @supports (height: 100dvh) {
-    --100dvh: 100dvh;
-  }
   box-shadow: 0 0 30px -2px rgba(0, 0, 0, 0.5);
-  height: var(--100dvh);
+  height: 100dvh;
 
   .panel-body {
     width: 100%;
@@ -369,13 +364,14 @@
     }
 
     .profile-tab-btn {
+      justify-content: unset;
+      line-height: var(--line-height-large);
+      width: 100%;
+
       .relative-date {
         font-size: var(--font-down-3);
         color: var(--primary-medium);
       }
-      justify-content: unset;
-      line-height: var(--line-height-large);
-      width: 100%;
 
       .d-icon {
         padding: 0;
@@ -420,6 +416,9 @@
   padding-top: 0.75em;
   margin-top: -1px;
 
+  /* as a big ol' click target, don't let text inside be selected */
+  @include unselectable;
+
   &:focus {
     outline: none;
   }
@@ -548,9 +547,6 @@
       > div {
         overflow: hidden; // clears the text from wrapping below icons
         overflow-wrap: anywhere;
-        @supports not (overflow-wrap: anywhere) {
-          word-break: break-word;
-        }
 
         // Truncate items with more than 2 lines.
         @include line-clamp(2);
@@ -613,9 +609,6 @@
       background: var(--primary-low);
     }
   }
-
-  /* as a big ol' click target, don't let text inside be selected */
-  @include unselectable;
 }
 
 // Styles to have user avatar positioned and sized correctly
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index b2bee9a9b2c..385f21677df 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -167,11 +167,12 @@
 .modal-backdrop,
 .modal-backdrop.fade.in {
   animation: fade 0.3s;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+
   @media (prefers-reduced-motion) {
     animation-duration: 0s;
   }
-  opacity: 0.9;
-  filter: alpha(opacity=90);
 }
 
 // fade in
@@ -229,11 +230,11 @@
   .nav {
     padding: 10px 30px 10px 15px;
     background-color: var(--secondary);
+    border-bottom: 1px solid var(--primary-low);
 
     li > a {
       font-size: var(--font-0);
     }
-    border-bottom: 1px solid var(--primary-low);
   }
 
   &.hidden {
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index c3ff382c7a8..65d0aae3301 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -15,11 +15,12 @@ a.loading-onebox {
 }
 
 .onebox-result {
-  @include post-aside;
   margin-top: 15px;
   padding: 12px;
   font-size: var(--font-0);
 
+  @include post-aside;
+
   .onebox-result-body {
     padding-top: 5px;
 
@@ -73,13 +74,14 @@ a.loading-onebox {
     height: 20px;
 
     .info {
+      position: absolute;
+      font-size: var(--font-0);
+
       a {
         color: black;
         text-decoration: none;
         padding-right: 10px;
       }
-      position: absolute;
-      font-size: var(--font-0);
 
       img.favicon {
         margin-right: 3px;
@@ -151,13 +153,14 @@ aside.onebox {
     img:not(.avatar, .onebox-avatar-inline) {
       max-height: 170px;
       max-width: 20%;
-      @media all and (max-width: 600px) {
-        max-width: 35%;
-      }
       height: auto;
       float: left;
       margin-right: 1em;
 
+      @media all and (max-width: 600px) {
+        max-width: 35%;
+      }
+
       &.onebox-full-image {
         max-height: none;
         max-width: none;
@@ -296,6 +299,10 @@ aside.onebox {
     }
 
     .video-icon {
+      bottom: 15px;
+      right: 10px;
+      position: absolute;
+
       &::before {
         opacity: 0.8;
 
@@ -304,9 +311,6 @@ aside.onebox {
           '<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 512 512" fill="white"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>'
         );
       }
-      bottom: 15px;
-      right: 10px;
-      position: absolute;
     }
   }
 }
@@ -967,6 +971,7 @@ aside.onebox.mixcloud-preview {
     .mixcloud-text {
       padding-left: 170px;
       font-family: sans-serif;
+      color: gray;
 
       h3 {
         font-size: 13px;
@@ -980,7 +985,6 @@ aside.onebox.mixcloud-preview {
         font-size: 12px;
         font-weight: 200;
       }
-      color: gray;
     }
   }
 }
diff --git a/app/assets/stylesheets/common/base/popup-menu.scss b/app/assets/stylesheets/common/base/popup-menu.scss
index 9fc8c4cb64e..130c9752248 100644
--- a/app/assets/stylesheets/common/base/popup-menu.scss
+++ b/app/assets/stylesheets/common/base/popup-menu.scss
@@ -57,11 +57,12 @@
 
       &:focus,
       &:hover {
+        background: var(--danger-low);
+
         .d-icon,
         .d-button-label {
           color: var(--danger);
         }
-        background: var(--danger-low);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index ec6e3749858..f5a6bf2d513 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -96,6 +96,7 @@
     border-bottom: 1px solid var(--primary-low);
     padding-bottom: 0.25em;
     display: flex;
+    margin-bottom: 0.5em;
 
     .name {
       width: 8em;
@@ -109,7 +110,6 @@
       ); // subtracting width of name and margin-right
       word-wrap: break-word;
     }
-    margin-bottom: 0.5em;
   }
 }
 
@@ -236,6 +236,7 @@
   background: var(--primary-very-low);
   padding: 1.5rem;
   margin-block: 3rem;
+  padding-bottom: 1em;
 
   .show-raw-email {
     color: var(--primary-medium);
@@ -472,7 +473,6 @@
       margin-right: 0.5em;
     }
   }
-  padding-bottom: 1em;
 }
 
 .reviewable-stale {
@@ -607,17 +607,20 @@
 }
 
 .editable-fields {
+  width: 100%;
+
   .editable-created-by {
     display: flex;
+    margin-bottom: 0.5em;
 
     .avatar {
       margin-right: 0.25em;
     }
-    margin-bottom: 0.5em;
   }
-  width: 100%;
 
   .editable-field {
+    margin-bottom: 0.5em;
+
     .mini-tag-chooser {
       margin: 0;
     }
@@ -631,7 +634,6 @@
       width: 100%;
       height: 10em;
     }
-    margin-bottom: 0.5em;
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index a87374dec32..fa9053ef814 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/app/assets/stylesheets/common/base/search-menu.scss
@@ -431,9 +431,6 @@ $search-pad-horizontal: 0.5em;
     .topic-title {
       color: var(--tertiary);
       overflow-wrap: anywhere;
-      @supports not (overflow-wrap: anywhere) {
-        word-break: break-word;
-      }
       margin-right: 0.25em;
     }
   }
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 00cdbcf09e9..3f88f5357c4 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -18,8 +18,8 @@
   }
 
   .search-header {
-    @include search-page-spacing;
     background: var(--primary-very-low);
+    @include search-page-spacing;
   }
 
   .warning {
diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss
index 2afdb877575..d6fcc8ef3ab 100644
--- a/app/assets/stylesheets/common/base/sidebar-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section.scss
@@ -24,6 +24,12 @@
 
     .btn.dropdown-select-box-header,
     .sidebar-section-header-button {
+      background: transparent;
+      border: none;
+      margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 3 * -1);
+      padding: calc(var(--d-sidebar-row-horizontal-padding) / 5)
+        calc(var(--d-sidebar-row-horizontal-padding) / 3);
+
       .discourse-no-touch & {
         transition: all 0.25s;
         opacity: 0;
@@ -40,11 +46,6 @@
           opacity: 1;
         }
       }
-      background: transparent;
-      border: none;
-      margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 3 * -1);
-      padding: calc(var(--d-sidebar-row-horizontal-padding) / 5)
-        calc(var(--d-sidebar-row-horizontal-padding) / 3);
 
       .d-icon {
         font-size: var(--font-down-1);
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index f2a56dc88ce..4c613b7d64c 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -1,9 +1,5 @@
 :root {
   --d-sidebar-width: #{$d-sidebar-width};
-  @include breakpoint(large) {
-    --d-sidebar-width: #{$d-sidebar-narrow-width};
-  }
-
   --d-sidebar-row-horizontal-padding: 1rem;
 
   // ems so height is variable along with font size
@@ -48,6 +44,10 @@
   --d-sidebar-active-icon-color: var(--d-sidebar-link-color);
   --d-sidebar-active-prefix-background: var(--primary-200);
   --d-sidebar-active-suffix-color: var(--tertiary-med-or-tertiary);
+
+  @include breakpoint(large) {
+    --d-sidebar-width: #{$d-sidebar-narrow-width};
+  }
 }
 
 .sidebar-row {
@@ -63,20 +63,15 @@
   position: sticky;
   top: var(--main-outlet-offset);
   background: var(--d-sidebar-background);
-
-  @include unselectable;
-
-  // 1dvh with fallback for old browsers
-  --1dvh: 1vh;
-  @supports (height: 1dvh) {
-    --1dvh: 1dvh;
-  }
-  height: calc(
-    var(--composer-vh, var(--1dvh)) * 100 - var(--main-outlet-offset, 0px)
-  );
+  height: calc(var(--composer-vh, 1dvh) * 100 - var(--main-outlet-offset, 0px));
   align-self: start;
   overflow-y: auto;
 
+  // back-compat for themes
+  --1dvh: 1dvh;
+
+  @include unselectable;
+
   .sidebar-container {
     display: flex;
     flex-direction: column;
@@ -103,10 +98,6 @@
     overflow-x: hidden;
     overflow-y: overlay;
 
-    > .sidebar-section-wrapper:last-child {
-      border-bottom: 0;
-    }
-
     // custom scrollbar styling
     --scrollbarBg: transparent;
     --scrollbarThumbBg: var(--primary-low);
@@ -115,6 +106,10 @@
     transition: scrollbar-color 0.25s ease-in-out;
     transition-delay: 0.5s;
 
+    > .sidebar-section-wrapper:last-child {
+      border-bottom: 0;
+    }
+
     &::-webkit-scrollbar {
       width: var(--scrollbarWidth);
     }
@@ -130,11 +125,11 @@
 
     &:hover {
       scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg);
+      transition-delay: 0s;
 
       &::-webkit-scrollbar-thumb {
         background-color: var(--scrollbarThumbBg);
       }
-      transition-delay: 0s;
     }
 
     &__back-to-forum {
@@ -379,11 +374,11 @@
     background: none;
     margin-bottom: 0;
     height: 2em;
+    width: 100%;
 
     &:focus-within {
       outline: 0;
     }
-    width: 100%;
   }
 
   &__clear {
diff --git a/app/assets/stylesheets/common/base/topic-footer.scss b/app/assets/stylesheets/common/base/topic-footer.scss
index 59f4a07584a..accca7491cf 100644
--- a/app/assets/stylesheets/common/base/topic-footer.scss
+++ b/app/assets/stylesheets/common/base/topic-footer.scss
@@ -1,14 +1,14 @@
 #topic-footer-buttons {
   display: flex;
-
-  html.anon & {
-    justify-content: end;
-  }
   max-width: calc(
     var(--topic-avatar-width) + var(--topic-body-width) +
       var(--topic-body-width-padding) * 2
   );
 
+  html.anon & {
+    justify-content: end;
+  }
+
   .topic-footer-main-buttons {
     display: flex;
     gap: 0.5rem;
@@ -51,14 +51,15 @@
 }
 
 #topic-progress-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  overflow: hidden;
+
   &.docked {
     .toggle-admin-menu {
       display: none;
     }
   }
-  display: flex;
-  justify-content: flex-end;
-  overflow: hidden;
 
   .btn {
     border: 0;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 054612bac7a..fceab9f7402 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -22,9 +22,6 @@
   overflow: hidden;
 
   &::before {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: placeHolderShimmer 4s linear infinite forwards;
-    }
     position: absolute;
     left: 0;
     content: "";
@@ -36,6 +33,10 @@
     );
     height: 45px;
     width: 700px;
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: placeHolderShimmer 4s linear infinite forwards;
+    }
   }
 }
 
@@ -635,10 +636,12 @@ aside.quote {
   margin-bottom: 1em;
 
   .title {
-    @include post-aside;
     color: var(--primary-high-or-secondary-low);
     padding: 0.8em 0.8em 0 0.8em;
 
+    @include post-aside;
+    @include unselectable;
+
     // blockquote is underneath this and has top margin
     .avatar {
       margin-right: 0.5em;
@@ -647,8 +650,6 @@ aside.quote {
     img {
       margin-top: -0.26em;
     }
-
-    @include unselectable;
   }
 
   // blockquote is docked within aside for content
@@ -1335,15 +1336,16 @@ span.mention {
 
 .broken-image,
 .blocked-hotlinked-placeholder {
-  &:not(a) {
-    color: var(--primary-low-mid-or-secondary-high);
-  }
   display: inline-flex;
   flex-direction: column;
   border: 1px solid var(--primary-low);
   align-items: center;
   justify-content: center;
 
+  &:not(a) {
+    color: var(--primary-low-mid-or-secondary-high);
+  }
+
   .d-icon {
     margin: 16px;
     font-size: var(--font-up-5);
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 6edd43d8397..9bb931718f9 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -99,6 +99,7 @@
   text-align: left;
   display: block;
   margin: 20px 0;
+  width: 800px;
 
   .badge-info {
     display: none;
@@ -116,7 +117,6 @@
     margin: 0;
     padding: 0;
   }
-  width: 800px;
 
   &::after {
     content: "";
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index c27fa0099ea..635e6b35c9e 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -402,6 +402,8 @@
 }
 
 .avatar-selector {
+  --label-max-width: 300px;
+
   .avatar-choice {
     display: grid;
     grid-template-columns: 2em 1fr auto;
@@ -429,8 +431,6 @@
     }
   }
 
-  --label-max-width: 300px;
-
   label.radio {
     display: flex;
     align-items: center;
diff --git a/app/assets/stylesheets/common/components/bookmark-modal.scss b/app/assets/stylesheets/common/components/bookmark-modal.scss
index cf90e19e68d..85084139093 100644
--- a/app/assets/stylesheets/common/components/bookmark-modal.scss
+++ b/app/assets/stylesheets/common/components/bookmark-modal.scss
@@ -45,10 +45,11 @@
   }
 
   .bookmark-options-panel {
+    margin-bottom: 18px;
+
     .select-kit {
       width: 100%;
     }
-    margin-bottom: 18px;
 
     label {
       display: flex;
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index c46f7217a90..7a4a0bf8340 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -13,18 +13,12 @@
   $hover-bg-color: var(--primary-medium),
   $hover-icon-color: var(--primary-low)
 ) {
-  @include form-item-sizing;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin: 0;
   font-weight: normal;
   color: $text-color;
-
-  &:visited {
-    // covers cases where we add button classes to links
-    color: $text-color;
-  }
   background-color: $bg-color;
   background-image: linear-gradient(
     to bottom,
@@ -35,6 +29,13 @@
   transition: var(--d-button-transition);
   cursor: pointer;
 
+  @include form-item-sizing;
+
+  &:visited {
+    // covers cases where we add button classes to links
+    color: $text-color;
+  }
+
   .d-icon {
     color: $icon-color;
     margin-right: 0.45em;
@@ -109,6 +110,8 @@
 
   &[disabled],
   &.disabled {
+    cursor: not-allowed;
+
     &:not(.is-loading) {
       opacity: 0.4;
     }
@@ -121,7 +124,6 @@
         color: $icon-color;
       }
     }
-    cursor: not-allowed;
   }
 
   .loading-container {
diff --git a/app/assets/stylesheets/common/components/calendar-date-time-input.scss b/app/assets/stylesheets/common/components/calendar-date-time-input.scss
index 37fb5fd94f6..91bdb2b7de1 100644
--- a/app/assets/stylesheets/common/components/calendar-date-time-input.scss
+++ b/app/assets/stylesheets/common/components/calendar-date-time-input.scss
@@ -1,7 +1,4 @@
 .calendar-date-time-input {
-  .fake-input {
-    display: none;
-  }
   padding: 5px;
   border: 1px solid var(--primary-low);
   z-index: 1;
@@ -10,6 +7,10 @@
   box-sizing: border-box;
   margin-left: 1em;
 
+  .fake-input {
+    display: none;
+  }
+
   .date-picker {
     display: flex;
     flex-direction: column;
diff --git a/app/assets/stylesheets/common/components/d-toggle-switch.scss b/app/assets/stylesheets/common/components/d-toggle-switch.scss
index 1421746c1cd..6209574c5e3 100644
--- a/app/assets/stylesheets/common/components/d-toggle-switch.scss
+++ b/app/assets/stylesheets/common/components/d-toggle-switch.scss
@@ -1,6 +1,9 @@
 .d-toggle-switch {
   --toggle-switch-width: 45px;
   --toggle-switch-height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 
   &:focus {
     .d-toggle-switch__checkbox-slider {
@@ -19,9 +22,6 @@
       background-color: var(--tertiary-hover);
     }
   }
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
 
   &__label {
     position: relative;
diff --git a/app/assets/stylesheets/common/components/powered-by-discourse.scss b/app/assets/stylesheets/common/components/powered-by-discourse.scss
index aa426b8e5dd..999a6e867c2 100644
--- a/app/assets/stylesheets/common/components/powered-by-discourse.scss
+++ b/app/assets/stylesheets/common/components/powered-by-discourse.scss
@@ -1,13 +1,4 @@
 .powered-by-discourse {
-  .admin-area &,
-  .has-full-page-chat &,
-  .static-login &,
-  .invite-page &,
-  .account-created-page &,
-  .admin-invite-page &,
-  .activate-account-page & {
-    display: none !important;
-  }
   grid-area: below-content;
   justify-self: start;
   font-size: var(--font-down-1);
@@ -19,6 +10,16 @@
   margin-bottom: 0.45em;
   color: var(--primary-medium);
 
+  .admin-area &,
+  .has-full-page-chat &,
+  .static-login &,
+  .invite-page &,
+  .account-created-page &,
+  .admin-invite-page &,
+  .activate-account-page & {
+    display: none !important;
+  }
+
   &:visited {
     color: var(--primary-medium);
   }
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index 9ec66bfe4ed..1ec8eeb4981 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -23,9 +23,6 @@
   overflow: hidden;
 
   &::before {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: placeHolderShimmer 4s linear infinite forwards;
-    }
     position: absolute;
     left: 0;
     content: "";
@@ -37,6 +34,10 @@
     );
     height: var(--avatar-width);
     width: var(--card-width);
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: placeHolderShimmer 4s linear infinite forwards;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index b4ed4ceb3e2..de3a6d3487f 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -308,19 +308,21 @@
 .d-editor-button-bar {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(2.35em, 1fr));
-  @include breakpoint(tablet) {
-    // occupy available space on narrower screens
-    grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
-  }
-  @include breakpoint(mobile-medium) {
-    font-size: var(--font-down-1);
-  }
   align-items: center;
   border-bottom: 1px solid var(--primary-low);
   width: 100%;
   box-sizing: border-box;
   flex-shrink: 0;
 
+  @include breakpoint(tablet) {
+    // occupy available space on narrower screens
+    grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
+  }
+
+  @include breakpoint(mobile-medium) {
+    font-size: var(--font-down-1);
+  }
+
   .btn:focus {
     @include default-focus;
   }
diff --git a/app/assets/stylesheets/common/form-kit/_control-code.scss b/app/assets/stylesheets/common/form-kit/_control-code.scss
index 24448b7e9f6..574039e26db 100644
--- a/app/assets/stylesheets/common/form-kit/_control-code.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-code.scss
@@ -17,11 +17,13 @@
 
   .ace-wrapper[data-disabled="false"] {
     .ace_focus {
-      @include default-input;
-      height: unset;
-      border-color: var(--tertiary);
       outline: 2px solid var(--tertiary);
       outline-offset: -1px;
+
+      @include default-input {
+        height: unset;
+        border-color: var(--tertiary);
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/common/form-kit/_control-composer.scss b/app/assets/stylesheets/common/form-kit/_control-composer.scss
index 86fa5aceefc..67741ac84f0 100644
--- a/app/assets/stylesheets/common/form-kit/_control-composer.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-composer.scss
@@ -20,8 +20,9 @@
   }
 
   .d-editor-textarea-wrapper {
-    @include default-input;
-    padding: 0 !important;
+    @include default-input {
+      padding: 0 !important;
+    }
   }
 
   .d-editor-input {
diff --git a/app/assets/stylesheets/common/form-kit/_control-input.scss b/app/assets/stylesheets/common/form-kit/_control-input.scss
index 987aff4f692..4bb63773719 100644
--- a/app/assets/stylesheets/common/form-kit/_control-input.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-input.scss
@@ -1,9 +1,9 @@
 .form-kit__control-input {
-  @include default-input;
   z-index: 1;
-  margin: 0 !important;
   min-width: auto !important;
 
+  @include default-input;
+
   .form-kit__field.has-error & {
     border-color: var(--danger);
   }
diff --git a/app/assets/stylesheets/common/form-kit/_control-menu.scss b/app/assets/stylesheets/common/form-kit/_control-menu.scss
index fc07ae59f1a..ff3eb29d9fc 100644
--- a/app/assets/stylesheets/common/form-kit/_control-menu.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-menu.scss
@@ -1,6 +1,6 @@
 .form-kit__control-menu-trigger {
-  @include default-input;
   justify-content: space-between;
+  @include default-input;
 }
 
 .form-kit__control-menu-content {
diff --git a/app/assets/stylesheets/common/form-kit/_control-textarea.scss b/app/assets/stylesheets/common/form-kit/_control-textarea.scss
index 92e2b4c2fa6..d5375b01c11 100644
--- a/app/assets/stylesheets/common/form-kit/_control-textarea.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-textarea.scss
@@ -1,14 +1,11 @@
 .form-kit__control-textarea {
-  @include default-input;
-
-  // reset textarea styles
-  width: 100% !important;
-  margin: 0 !important;
-  min-width: auto !important;
-  padding: 0.5em !important;
-  height: 150px !important;
-
   // prevents firefox/chrome to add spacing under textarea
   display: block;
-  border-radius: var(--d-input-border-radius);
+
+  @include default-input {
+    // reset textarea styles
+    height: 150px !important;
+    min-width: auto !important;
+    padding: 0.5em !important;
+  }
 }
diff --git a/app/assets/stylesheets/common/form-kit/_default-input-mixin.scss b/app/assets/stylesheets/common/form-kit/_default-input-mixin.scss
index 32401e0a2df..f57fedffe5c 100644
--- a/app/assets/stylesheets/common/form-kit/_default-input-mixin.scss
+++ b/app/assets/stylesheets/common/form-kit/_default-input-mixin.scss
@@ -9,6 +9,8 @@
   margin: 0 !important;
   appearance: none;
 
+  @content;
+
   @include breakpoint(mobile-large) {
     width: 100% !important;
     height: 2.25em;
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 350788eee0d..d93f48dc59a 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -132,8 +132,8 @@ $hpad: 0.65em;
 }
 
 @mixin unselectable {
-  @include user-select(none);
   cursor: default;
+  @include user-select(none);
 }
 
 // Stuff we repeat
diff --git a/app/assets/stylesheets/common/rich-editor/rich-editor.scss b/app/assets/stylesheets/common/rich-editor/rich-editor.scss
index 8d39ef0b605..37caeae953a 100644
--- a/app/assets/stylesheets/common/rich-editor/rich-editor.scss
+++ b/app/assets/stylesheets/common/rich-editor/rich-editor.scss
@@ -15,12 +15,13 @@
 
   > div:first-child,
   > details:first-child {
+    margin-top: 0.5rem;
+
     // This is hacky, but helps having the leading gapcursor at the right position
     &.ProseMirror-gapcursor {
       position: relative;
       display: block;
     }
-    margin-top: 0.5rem;
   }
 
   h1,
diff --git a/app/assets/stylesheets/common/software-update-prompt.scss b/app/assets/stylesheets/common/software-update-prompt.scss
index 6288bccebf2..91fa621a736 100644
--- a/app/assets/stylesheets/common/software-update-prompt.scss
+++ b/app/assets/stylesheets/common/software-update-prompt.scss
@@ -4,12 +4,6 @@
   right: 0;
   left: 0;
   top: var(--header-offset, 60px);
-
-  .static-login &,
-  .wizard &,
-  .invite-page & {
-    top: 0;
-  }
   background-color: var(--tertiary-low);
   max-height: 0;
   overflow: hidden;
@@ -17,6 +11,12 @@
   box-shadow: var(--shadow-header);
   z-index: z("header") - 10;
 
+  .static-login &,
+  .wizard &,
+  .invite-page & {
+    top: 0;
+  }
+
   .update-prompt-main-content {
     display: flex;
     align-items: center;
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index 31006a4c354..8ead00be033 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -39,9 +39,6 @@
   }
 
   &.timeline-fullscreen {
-    @media (prefers-reduced-motion: no-preference) {
-      transition: max-height 0.3s ease-in;
-    }
     max-height: 0;
     position: fixed;
     margin-left: 0;
@@ -53,6 +50,11 @@
     box-shadow: var(--shadow-composer);
     padding: 20px 0;
     z-index: z("fullscreen");
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: max-height 0.3s ease-in;
+    }
+
     @media screen and (max-height: 425px) {
       padding-top: 10px;
     }
@@ -201,13 +203,14 @@
       // above the topic-footer-controls
       position: absolute;
       margin-top: 1em;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: opacity 0.2s ease-in;
-      }
       display: flex;
       gap: 0.5em;
       flex-wrap: wrap;
 
+      @media (prefers-reduced-motion: no-preference) {
+        transition: opacity 0.2s ease-in;
+      }
+
       button:last-child {
         margin-right: 0;
       }
@@ -292,13 +295,13 @@
     .timeline-last-read {
       position: absolute;
       margin-left: -0.35em;
+      z-index: z("base") + 2; // above timeline-handle
 
       .progress {
         font-size: 0.8em;
         color: var(--tertiary);
         margin-right: 1em;
       }
-      z-index: z("base") + 2; // above timeline-handle
     }
 
     .back-button {
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index dd1a0db7e7e..f60c51162fa 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -339,18 +339,10 @@ a.toggle-preview {
   animation-delay: 1.5s;
   animation-direction: reverse;
   animation-fill-mode: forwards;
-  @media (prefers-reduced-motion) {
-    animation-duration: 0s;
-  }
   position: fixed;
   left: 50%;
   top: 10%;
   transform: translate(-50%, 0);
-
-  .rtl & {
-    // R2 is not smart enough to support this swap
-    transform: translate(50%, 0);
-  }
   z-index: z("header") + 1;
   background: var(--primary-very-high);
   color: var(--secondary);
@@ -358,6 +350,15 @@ a.toggle-preview {
   pointer-events: none;
   border-radius: 2px;
 
+  @media (prefers-reduced-motion) {
+    animation-duration: 0s;
+  }
+
+  .rtl & {
+    // R2 is not smart enough to support this swap
+    transform: translate(50%, 0);
+  }
+
   kbd {
     background: none;
   }
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index dcb4d01c1f7..1afa1923f35 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -119,8 +119,8 @@ select {
   }
 
   .control-group {
-    @include clearfix;
     margin-bottom: 18px;
+    @include clearfix;
   }
 
   .control-indent {
@@ -162,10 +162,11 @@ body.has-sidebar-page {
   #main-outlet-wrapper {
     grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
     gap: 0 2em;
+    padding-left: 0;
+
     @include breakpoint(large) {
       gap: 0 1em;
     }
-    padding-left: 0;
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index 5cf65301782..3bb7ed075b0 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -32,11 +32,11 @@ html.modal-open {
 .close {
   font-size: var(--font-up-3);
   text-decoration: none;
+  cursor: pointer;
 
   &:visited {
     color: var(--primary-high);
   }
-  cursor: pointer;
 
   &:hover {
     color: var(--primary);
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 9154007e2fb..390648639b0 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -103,11 +103,11 @@ nav.post-controls {
     align-items: center;
     margin-left: 0;
     border-radius: var(--d-button-border-radius);
+    white-space: nowrap;
 
     .topic-post & {
       margin-right: 0.5em;
     }
-    white-space: nowrap;
 
     .d-icon {
       margin-inline: var(--control-icon-space);
@@ -155,12 +155,13 @@ pre.codeblock-buttons:hover {
 }
 
 .embedded-posts {
+  border: 1px solid var(--primary-low);
+
   h1,
   h2,
   h3 {
     margin: 10px 0;
   }
-  border: 1px solid var(--primary-low);
 
   .topic-body {
     box-sizing: border-box;
@@ -341,15 +342,15 @@ pre.codeblock-buttons:hover {
   &.top {
     margin-left: 0;
     border: none;
+    width: calc(
+      var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
+        var(--topic-avatar-width) - (var(--topic-avatar-width) + 2px)
+    ); // 2px accounts for left and right borders
 
     .collapse-down {
       transform: translate(17%, 230%);
       z-index: 1;
     }
-    width: calc(
-      var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
-        var(--topic-avatar-width) - (var(--topic-avatar-width) + 2px)
-    ); // 2px accounts for left and right borders
 
     .row {
       .topic-body,
diff --git a/app/assets/stylesheets/mobile/components/emoji-picker.scss b/app/assets/stylesheets/mobile/components/emoji-picker.scss
index 068e1d11f19..5fb89a27a18 100644
--- a/app/assets/stylesheets/mobile/components/emoji-picker.scss
+++ b/app/assets/stylesheets/mobile/components/emoji-picker.scss
@@ -4,20 +4,19 @@
   }
 
   html:not(.keyboard-visible.mobile-view) & .d-modal__container {
-    height: calc(var(--composer-vh, var(--1dvh)) * 100);
+    height: calc(var(--composer-vh, 1dvh) * 100);
     max-height: 100%;
 
     .emoji-picker__content {
       height: calc(
-        var(--composer-vh, var(--1dvh)) * 100 - 50px -
-          env(safe-area-inset-bottom)
+        var(--composer-vh, 1dvh) * 100 - 50px - env(safe-area-inset-bottom)
       );
     }
   }
 
   html.keyboard-visible.mobile-view & .d-modal__container {
     .emoji-picker__content {
-      height: calc(var(--composer-vh, var(--1dvh)) * 100 - 50px);
+      height: calc(var(--composer-vh, 1dvh) * 100 - 50px);
     }
   }
 
diff --git a/app/assets/stylesheets/mobile/modal-overrides.scss b/app/assets/stylesheets/mobile/modal-overrides.scss
index 86db75456c2..de281136c38 100644
--- a/app/assets/stylesheets/mobile/modal-overrides.scss
+++ b/app/assets/stylesheets/mobile/modal-overrides.scss
@@ -24,6 +24,6 @@
 .d-modal.grant-badge-modal,
 .d-modal.bookmark-reminder-modal {
   .d-modal__container {
-    min-height: calc(var(--composer-vh, var(--1dvh)) * 85);
+    min-height: calc(var(--composer-vh, 1dvh) * 85);
   }
 }
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index ad045477aba..9cc7e72a65f 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/app/assets/stylesheets/mobile/modal.scss
@@ -7,14 +7,14 @@ html:has(.d-modal) {
 
 html.keyboard-visible.mobile-view {
   .d-modal {
-    max-height: calc(var(--composer-vh, var(--1dvh)) * 100);
-    height: calc(var(--composer-vh, var(--1dvh)) * 100);
+    max-height: calc(var(--composer-vh, 1dvh) * 100);
+    height: calc(var(--composer-vh, 1dvh) * 100);
     bottom: 0;
   }
 
   .d-modal__container {
-    max-height: calc(var(--composer-vh, var(--1dvh)) * 100);
-    height: calc(var(--composer-vh, var(--1dvh)) * 100);
+    max-height: calc(var(--composer-vh, 1dvh) * 100);
+    height: calc(var(--composer-vh, 1dvh) * 100);
   }
 }
 
@@ -32,7 +32,7 @@ html:not(.keyboard-visible.mobile-view) {
     position: fixed;
     width: 100%;
     max-width: 100%;
-    max-height: calc(var(--composer-vh, var(--1dvh)) * 85);
+    max-height: calc(var(--composer-vh, 1dvh) * 85);
   }
 
   &__footer {
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer.scss b/plugins/chat/assets/stylesheets/common/chat-composer.scss
index 0abbf713121..b8840d7d986 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer.scss
@@ -73,11 +73,6 @@
     align-self: stretch;
   }
 
-  --100dvh: 100vh;
-  @supports (height: 100dvh) {
-    --100dvh: 100dvh;
-  }
-
   &__input {
     overflow-x: hidden;
     width: 100%;
@@ -85,7 +80,7 @@
     outline: none;
     border: 0;
     resize: none;
-    max-height: calc(var(--100dvh) / 4);
+    max-height: 25dvh;
     background: none;
     padding: 0;
     margin: 5px 0;