[gnome-shell-sass] theme: Add focus indication for dnd switch in message list controls

[Florian Müllner <fmuellner src gnome org>]

commit ab1c7fae7e7d597870868bcc33ca0f16a29461e6
Author: vanadiae <vanadiae35 gmail com>
Date:   Tue Jul 20 14:13:40 2021 +0200

    theme: Add focus indication for dnd switch in message list controls
    
    It currently is difficult to see what's being focused in the messages list
    currently because of that.
    
    Fixes #2447
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1920>

 widgets/_message-list.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
---
diff --git a/widgets/_message-list.scss b/widgets/_message-list.scss
index 02d122b..bb9239f 100644
--- a/widgets/_message-list.scss
+++ b/widgets/_message-list.scss
@@ -25,6 +25,20 @@
   // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
   padding: $base_margin;
   spacing: $base_spacing * 2;
+
+  .dnd-button {
+    // We need this because the focus outline isn't inset like for the buttons
+    // so the dnd button would grow when it gets focus if we didn't change only
+    // its color when focusing.
+    border-width: 2px;
+    border-color: transparent;
+    border-radius: 99px;
+    border-style: solid;
+
+    &:focus {
+      border-color: transparentize($selected_bg_color, 0.4);
+    }
+  }
 }
 
 // message bubbles