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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 45c227b74ea86f3368202f0ec71fb5325b5f10b1
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;
+        }
       }
     }