Background tint on ToggleButton; use nested CSS

Author: darrenburns

Diff for: src/textual/widgets/_select.py

@@ -228,7 +228,6 @@ class Select(Generic[SelectType], Vertical, can_focus=True):
 
         & > SelectOverlay {
             width: 1fr;
-            background: $panel;
             display: none;
             height: auto;
             max-height: 12;

Diff for: src/textual/widgets/_toggle_button.py

@@ -62,20 +62,26 @@ class ToggleButton(Static, can_focus=True):
         & > .toggle--button {
             color: $surface;
         }
-    }
 
-    ToggleButton:focus {
-        border: tall $border;
-    }
+        &:focus {
+            border: tall $border;
+            background-tint: $foreground 5%;
+            & > .toggle--label {
+                color: $text;
+                background: $highlight-cursor;
+            }
+            & > .toggle--button {
+                background: $foreground 25%;
+            }
+        }
 
-    ToggleButton:hover {
-        background: $highlight-hover;
+        ToggleButton:hover {
+            background: $highlight-hover;
+        }
     }
 
-    ToggleButton:focus > .toggle--label {
-        color: $text;
-        background: $highlight-cursor;
-    }
+
+
 
     /* Base button colors (including in dark mode). */
 
@@ -84,10 +90,6 @@ class ToggleButton(Static, can_focus=True):
         background: $foreground 15%;
     }
 
-    ToggleButton:focus > .toggle--button {
-        background: $foreground 25%;
-    }
-
     ToggleButton.-on > .toggle--button {
         color: $success;
     }