From 64871c057b8f1060b846c2880fec6889221d7134 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 23 Mar 2022 19:09:09 +0000
Subject: [PATCH] Fix broken buttons (#8133)

---
 res/css/views/elements/_AccessibleButton.scss | 178 +++++++++---------
 1 file changed, 86 insertions(+), 92 deletions(-)

diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss
index 8e4ed2b051..6595eff4c8 100644
--- a/res/css/views/elements/_AccessibleButton.scss
+++ b/res/css/views/elements/_AccessibleButton.scss
@@ -20,15 +20,13 @@ limitations under the License.
     .mx_AccessibleButton_disabled {
         cursor: default;
 
-        &.mx_AccessibleButton_kind {
-            .mx_AccessibleButton_kind_primary,
-            .mx_AccessibleButton_kind_primary_outline,
-            .mx_AccessibleButton_kind_primary_sm,
-            .mx_AccessibleButton_kind_link,
-            .mx_AccessibleButton_kind_link_inline,
-            .mx_AccessibleButton_kind_link_sm {
-                opacity: 0.4;
-            }
+        .mx_AccessibleButton_kind_primary,
+        .mx_AccessibleButton_kind_primary_outline,
+        .mx_AccessibleButton_kind_primary_sm,
+        .mx_AccessibleButton_kind_link,
+        .mx_AccessibleButton_kind_link_inline,
+        .mx_AccessibleButton_kind_link_sm {
+            opacity: 0.4;
         }
     }
 
@@ -42,108 +40,104 @@ limitations under the License.
         font-size: $font-14px;
         border: none; // override default <button /> styles
 
-        &.mx_AccessibleButton_kind {
-            .mx_AccessibleButton_kind_primary_sm,
-            .mx_AccessibleButton_kind_danger_sm,
-            .mx_AccessibleButton_kind_link_sm {
-                padding: 5px 12px;
-            }
-
-            .mx_AccessibleButton_kind_primary_sm {
-                color: $button-primary-fg-color;
-                background-color: $accent;
-            }
-
-            .mx_AccessibleButton_kind_danger_sm {
-                color: $button-danger-fg-color;
-                background-color: $alert;
-            }
-
-            .mx_AccessibleButton_kind_link_sm {
-                color: $accent;
-            }
-
-            .mx_AccessibleButton_kind_confirm_sm {
-                background-color: $accent;
-
-                &::before {
-                    mask-image: url('$(res)/img/feather-customised/check.svg');
-                }
-            }
-
-            .mx_AccessibleButton_kind_cancel_sm {
-                background-color: $alert;
-
-                &::before {
-                    mask-image: url('$(res)/img/feather-customised/x.svg');
-                }
-            }
-        }
-    }
-
-    .mx_AccessibleButton_kind {
-        .mx_AccessibleButton_kind_primary,
-        .mx_AccessibleButton_kind_primary_outline,
-        .mx_AccessibleButton_kind_secondary {
-            font-weight: 600;
+        .mx_AccessibleButton_kind_primary_sm,
+        .mx_AccessibleButton_kind_danger_sm,
+        .mx_AccessibleButton_kind_link_sm {
+            padding: 5px 12px;
         }
 
-        .mx_AccessibleButton_kind_primary,
-        .mx_AccessibleButton_kind_primary_outline {
-            border: 1px solid $accent;
-        }
-
-        .mx_AccessibleButton_kind_primary {
+        .mx_AccessibleButton_kind_primary_sm {
             color: $button-primary-fg-color;
             background-color: $accent;
         }
 
-        .mx_AccessibleButton_kind_primary_outline {
-            color: $accent;
-            background-color: $button-secondary-bg-color;
-        }
-
-        .mx_AccessibleButton_kind_secondary {
-            color: $accent;
-        }
-
-        .mx_AccessibleButton_kind_danger {
+        .mx_AccessibleButton_kind_danger_sm {
             color: $button-danger-fg-color;
             background-color: $alert;
+        }
 
+        .mx_AccessibleButton_kind_link_sm {
+            color: $accent;
+        }
+
+        .mx_AccessibleButton_kind_confirm_sm {
+            background-color: $accent;
+
+            &::before {
+                mask-image: url('$(res)/img/feather-customised/check.svg');
+            }
+        }
+
+        .mx_AccessibleButton_kind_cancel_sm {
+            background-color: $alert;
+
+            &::before {
+                mask-image: url('$(res)/img/feather-customised/x.svg');
+            }
+        }
+    }
+
+    .mx_AccessibleButton_kind_primary,
+    .mx_AccessibleButton_kind_primary_outline,
+    .mx_AccessibleButton_kind_secondary {
+        font-weight: 600;
+    }
+
+    .mx_AccessibleButton_kind_primary,
+    .mx_AccessibleButton_kind_primary_outline {
+        border: 1px solid $accent;
+    }
+
+    .mx_AccessibleButton_kind_primary {
+        color: $button-primary-fg-color;
+        background-color: $accent;
+    }
+
+    .mx_AccessibleButton_kind_primary_outline {
+        color: $accent;
+        background-color: $button-secondary-bg-color;
+    }
+
+    .mx_AccessibleButton_kind_secondary {
+        color: $accent;
+    }
+
+    .mx_AccessibleButton_kind_danger {
+        color: $button-danger-fg-color;
+        background-color: $alert;
+
+        &.mx_AccessibleButton_disabled {
+            color: $button-danger-disabled-fg-color;
+            background-color: $button-danger-disabled-bg-color;
+        }
+
+        .mx_AccessibleButton_kind_danger_outline {
+            color: $alert;
+            background-color: transparent;
+            border: 1px solid $alert;
+
+            &.mx_AccessibleButton_disabled {
+                color: $button-danger-disabled-bg-color;
+                border-color: $button-danger-disabled-bg-color;
+            }
+        }
+
+        .mx_AccessibleButton_kind_danger_sm {
             &.mx_AccessibleButton_disabled {
                 color: $button-danger-disabled-fg-color;
                 background-color: $button-danger-disabled-bg-color;
             }
-
-            .mx_AccessibleButton_kind_danger_outline {
-                color: $alert;
-                background-color: transparent;
-                border: 1px solid $alert;
-
-                &.mx_AccessibleButton_disabled {
-                    color: $button-danger-disabled-bg-color;
-                    border-color: $button-danger-disabled-bg-color;
-                }
-            }
-
-            .mx_AccessibleButton_kind_danger_sm {
-                &.mx_AccessibleButton_disabled {
-                    color: $button-danger-disabled-fg-color;
-                    background-color: $button-danger-disabled-bg-color;
-                }
-            }
         }
 
         .mx_AccessibleButton_kind_link {
             color: $accent;
             padding: 0;
+        }
 
-            .mx_AccessibleButton_kind_link_inline {
-                color: $accent;
-                font-size: inherit;
-                padding: 0 2px;
-            }
+        .mx_AccessibleButton_kind_link_inline {
+            color: $accent;
+            font-size: inherit;
+            padding: 0 2px;
         }
 
         .mx_AccessibleButton_kind_confirm_sm,