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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 064eb4799793132cf8026b91cf04c54f91e2055f
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 473fb4de..541df798 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;
+        }
       }
     }