DEV: Fix mixed-decls sass deprecations in plugins (#31356)

A follow-up to #31343.

```
WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls
```

plugins/chat/assets/stylesheets/common/base-common.scss

@@ -75,12 +75,13 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
 
 .header-dropdown-toggle.chat-header-icon .icon {
   .chat-channel-unread-indicator {
-    @include chat-unread-indicator;
     border: 2px solid var(--header_background);
     position: absolute;
     top: 0;
     right: 2px;
 
+    @include chat-unread-indicator;
+
     &.-urgent {
       display: flex;
       align-items: center;

plugins/chat/assets/stylesheets/common/chat-channel-name.scss

@@ -23,14 +23,16 @@
   }
 
   .chat-channel-unread-indicator {
-    @include chat-unread-indicator;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 8px;
-    height: 8px;
     flex-shrink: 0;
 
+    @include chat-unread-indicator {
+      width: 8px;
+      height: 8px;
+    }
+
     &.-urgent {
       width: auto;
       height: auto;

plugins/chat/assets/stylesheets/common/chat-composer-button.scss

@@ -1,13 +1,14 @@
 .chat-composer-button {
-  @include breakpoint(mobile-large) {
-    width: 50px;
-  }
   box-sizing: border-box;
   border: 0;
   height: 50px;
   background: none;
   padding-inline: 0.75rem;
 
+  @include breakpoint(mobile-large) {
+    width: 50px;
+  }
+
   .is-disabled & {
     cursor: not-allowed;
   }

plugins/chat/assets/stylesheets/common/chat-composer.scss

@@ -86,10 +86,11 @@
     margin: 5px 0;
     text-overflow: ellipsis;
     cursor: inherit;
-    @include chat-scrollbar;
     white-space: pre-wrap !important;
     min-width: 20px;
 
+    @include chat-scrollbar;
+
     &[disabled] {
       background: none;
 
@@ -103,7 +104,6 @@
       outline: none;
     }
 
-    &:placeholder-shown,
     &::placeholder {
       overflow: hidden;
       text-overflow: ellipsis;

plugins/chat/assets/stylesheets/common/chat-drawer.scss

@@ -94,7 +94,6 @@ html.rtl {
 }
 
 .chat-drawer-content {
-  @include chat-scrollbar;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -104,6 +103,8 @@ html.rtl {
   overflow-y: auto;
   overscroll-behavior: contain;
 
+  @include chat-scrollbar;
+
   .c-channel-settings {
     flex-grow: 1;
 

plugins/chat/assets/stylesheets/common/chat-index.scss

@@ -29,13 +29,10 @@
 .channels-list,
 .channels-list-container {
   position: relative;
-  @include chat-scrollbar;
   height: 100%;
   padding-bottom: 1rem;
 
-  @include breakpoint(mobile-large) {
+  @include chat-scrollbar;
-    @include chat-scrollbar;
-  }
 
   .open-browse-page-btn,
   .open-draft-channel-page-btn,

plugins/chat/assets/stylesheets/common/chat-message-creator.scss

@@ -47,14 +47,15 @@
   }
 
   &__member {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: popIn 0.1s ease-out;
-    }
     padding: 0 0.25rem;
     border-radius: var(--border-radius);
     background: var(--primary-very-low);
     gap: 0.25rem;
 
+    @media (prefers-reduced-motion: no-preference) {
+      animation: popIn 0.1s ease-out;
+    }
+
     &:hover {
       .discourse-no-touch & {
         background: var(--primary-very-low);

plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss

@@ -7,8 +7,10 @@
   z-index: 1;
   margin: 0 1px 0 0;
   will-change: transform;
-  @include chat-scrollbar;
   min-height: 1px;
   box-sizing: border-box;
-  transition: padding-top 0.2s ease-in-out;
+
+  @include chat-scrollbar {
+    transition: scrollbar-color 0.25s ease-in-out, padding-top 0.2s ease-in-out;
+  }
 }

plugins/chat/assets/stylesheets/common/chat-selection-manager.scss

@@ -21,15 +21,16 @@
 
   &__copy-success {
     animation: chat-quote-message-background-fade-highlight 2s ease-out 3s;
-    @media (prefers-reduced-motion) {
-      animation-duration: 0s;
-    }
     animation-fill-mode: forwards;
     background-color: var(--success-low);
     color: var(--primary);
     flex: 1;
     line-height: normal;
     padding: 0.5rem 0.65rem;
+
+    @media (prefers-reduced-motion) {
+      animation-duration: 0s;
+    }
   }
 
   @keyframes chat-quote-message-background-fade-highlight {

plugins/chat/assets/stylesheets/common/chat-skeleton.scss

@@ -128,10 +128,11 @@
         rgba(var(--chat-skeleton-animation-rgb), 0.3) 50%,
         rgba(var(--chat-skeleton-animation-rgb), 0.5) 100%
       );
+      content: "";
+
       @media (prefers-reduced-motion: no-preference) {
         animation: shimmer 1.25s infinite;
       }
-      content: "";
     }
 
     @keyframes shimmer {

plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss

@@ -1,13 +1,14 @@
 .chat-thread-header-unread-indicator,
 .chat-thread-list-item-unread-indicator {
-  @include chat-unread-indicator;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: auto;
-  height: auto;
   padding: 0.21em 0.42em;
-  border-radius: 1em;
   min-width: 0.6em;
   align-self: center;
+
+  @include chat-unread-indicator {
+    width: auto;
+    height: auto;
+  }
 }

plugins/chat/assets/stylesheets/common/chat-threads-list.scss

@@ -8,12 +8,13 @@
 
   &__items {
     overflow-y: scroll;
-    @include chat-scrollbar;
     box-sizing: border-box;
     flex-grow: 1;
     overscroll-behavior: contain;
     display: flex;
     flex-direction: column;
+
+    @include chat-scrollbar;
   }
 
   &__no-threads {

plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss

@@ -11,6 +11,8 @@
   text-align: center;
   transition: border-color linear 0.15s;
 
+  @content;
+
   &.-urgent {
     background: var(--success);
     color: var(--secondary);

plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss

@@ -5,6 +5,8 @@
   scrollbar-color: transparent var(--scrollbarBg);
   transition: scrollbar-color 0.25s ease-in-out;
 
+  @content;
+
   // chrome, safari
   &::-webkit-scrollbar-thumb {
     background-color: var(--scrollbarThumbBg);