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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 5be0d2c05b9744aea538f5fc55ac38b51ba376d1
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;
+        }
       }
     }