[libadwaita/wip/exalm/borderless: 5/15] stylesheet: Extract style for raised buttons

[Alexander Mikhaylenko <alexm src gnome org>]

commit f1b57041c591c66e01a8fb5e6f4b7c060d87167a
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon Sep 6 18:19:10 2021 +0500

    stylesheet: Extract style for raised buttons
    
    When raising or flattening buttons, we only want to change their
    background, we don't want to also specificity bump their round corners
    etc. For example, we may want to raise linked buttons, and changing
    border-radius there will break them.

 src/stylesheet/widgets/_buttons.scss | 37 +++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 404b521c..9225c85d 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -11,35 +11,38 @@ button {
     min-width: 16px;
     padding: 5px 10px;
     border-radius: $button_radius;
-    background-color: $button_color;
     font-weight: bold;
 
-    @if $contrast == 'high' {
-      box-shadow: inset 0 0 0 1px $borders_color;
-    }
-
     @include focus-ring();
     transition: $button_transition;
 
-    &:hover {
-      background-color: $button_hover_color;
-    }
-
-    &.keyboard-activating,
-    &:active {
-      background-color: $button_active_color;
-    }
+    @at-root %button_basic_raised, & {
+      background-color: $button_color;
 
-    &:checked {
-      background-color: $button_checked_color;
+      @if $contrast == 'high' {
+        box-shadow: inset 0 0 0 1px $borders_color;
+      }
 
       &:hover {
-        background-color: $button_checked_hover_color;
+        background-color: $button_hover_color;
       }
 
       &.keyboard-activating,
       &:active {
-        background-color: $button_checked_active_color;
+        background-color: $button_active_color;
+      }
+
+      &:checked {
+        background-color: $button_checked_color;
+
+        &:hover {
+          background-color: $button_checked_hover_color;
+        }
+
+        &.keyboard-activating,
+        &:active {
+          background-color: $button_checked_active_color;
+        }
       }
     }