Deprecate mx_RightPanel_headerButton class (#10821)

* Replace: %s/mx_RightPanel_headerButton/mx_RoomHeader_button/g

* Conform the selectors to our naming policy: with flag (--)

- %s/mx_RoomHeader_button_highlight/mx_RoomHeader_button--highlight/g
- %s/mx_RoomHeader_button_unread/mx_RoomHeader_button--unread/g

* Update a Jest snapshot

* Move the declarations and Sass variables

- Move Sass variables to the place where they are used

res/css/views/rooms/_RoomHeader.pcss

@@ -194,6 +194,54 @@ limitations under the License.
     }
 }
 
+.mx_RoomHeader_button_unreadIndicator_bg {
+    position: absolute;
+    right: var(--RoomHeader-indicator-dot-offset);
+    top: var(--RoomHeader-indicator-dot-offset);
+    margin: 4px;
+    width: var(--RoomHeader-indicator-dot-size);
+    height: var(--RoomHeader-indicator-dot-size);
+    border-radius: 50%;
+    transform: scale(1.6);
+    transform-origin: center center;
+    background: rgba($background, 1);
+}
+
+.mx_RoomHeader_button_unreadIndicator {
+    position: absolute;
+    right: var(--RoomHeader-indicator-dot-offset);
+    top: var(--RoomHeader-indicator-dot-offset);
+    margin: 4px;
+
+    &.mx_Indicator_red {
+        background: rgba($alert, 1);
+        box-shadow: rgba($alert, 1);
+    }
+
+    &.mx_Indicator_gray {
+        background: rgba($room-icon-unread-color, 1);
+        box-shadow: rgba($room-icon-unread-color, 1);
+    }
+
+    &.mx_Indicator_bold {
+        background: rgba($primary-content, 1);
+        box-shadow: rgba($primary-content, 1);
+    }
+}
+
+.mx_RoomHeader_button--unread {
+    &::before {
+        background-color: $room-icon-unread-color !important;
+    }
+}
+
+.mx_RoomHeader_button--highlight,
+.mx_RoomHeader_button:hover {
+    &::before {
+        background-color: $accent !important;
+    }
+}
+
 .mx_RoomHeader_forgetButton::before {
     mask-image: url("$(res)/img/element-icons/leave.svg");
     width: 26px;