[libadwaita/wip/exalm/scale: 3/4] stylesheet: Move scale focus style onto the slider

[Alexander Mikhaylenko <alexm src gnome org>]

commit c4bb54e73ddf722d2a56aade87c7cc3bdae35e99
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Aug 4 18:10:39 2022 +0400

    stylesheet: Move scale focus style onto the slider
    
    Since the outline is now a part of box-shadow, add a proper HC version too.

 src/stylesheet/widgets/_scale.scss | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)
---
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
index 9a540bea..d993ea09 100644
--- a/src/stylesheet/widgets/_scale.scss
+++ b/src/stylesheet/widgets/_scale.scss
@@ -1,3 +1,5 @@
+$_slider_border_color: transparentize(black, if($contrast == 'high', .65, .9));
+
 %scale_trough {
   border-radius: 99px;
   background-color: $trough_color;
@@ -22,10 +24,9 @@ scale {
   min-width: 10px;
   padding: 12px;
 
-  @include focus-ring("> trough", $offset: 10px);
+  @include focus-ring("> trough > slider", $offset: 0);
 
   > trough {
-    transition: $focus_transition;
     @extend %scale_trough;
 
     // the colored part of the backing bit
@@ -39,12 +40,10 @@ scale {
 
     > slider {
       background-color: $slider_color;
-      box-shadow: 0 2px 4px transparentize(black, .8);
-      outline: 1px solid transparentize(black, .9);
+      box-shadow: 0 0 0 1px $_slider_border_color, 0 2px 4px transparentize(black, .8);
 
       border-radius: 100%;
-      transition: $button_transition;
-      transition-property: background, border, box-shadow;
+      transition: $focus_transition;
 
       // the slider is inside the trough, so to have make it bigger there's a negative margin
       min-width: 20px;
@@ -82,7 +81,7 @@ scale {
     filter: opacity($disabled_opacity);
 
     > trough > slider {
-      box-shadow: 0 2px 4px transparent;
+      box-shadow: 0 0 0 1px $_slider_border_color, 0 2px 4px transparent;
       outline-color: transparentize(black, if($contrast == 'high', .5, .8));
     }
   }
@@ -117,10 +116,10 @@ scale {
 
       // Adjust box-shadow for the 45deg rotation, for 0px 2px we ideally want
       // 1/√2px 1/√2px, round that to 1px 1px
-      box-shadow: 1px 1px 4px transparentize(black, .8);
+      box-shadow: 0 0 0 1px $_slider_border_color, 1px 1px 4px transparentize(black, .8);
 
       &:disabled {
-        box-shadow: 1px 1px 4px transparent;
+        box-shadow: 0 0 0 1px $_slider_border_color, 1px 1px 4px transparent;
       }
     }
   }