From 2ff9d2e65d1fb3e5c6945fca75e9a82c64b64ed6 Mon Sep 17 00:00:00 2001
From: Darren Burns <darrenb900@gmail.com>
Date: Mon, 14 Oct 2024 16:22:20 +0100
Subject: [PATCH] Background tint on ToggleButton; use nested CSS

---
 src/textual/widgets/_select.py        |  1 -
 src/textual/widgets/_toggle_button.py | 30 ++++++++++++++-------------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/textual/widgets/_select.py b/src/textual/widgets/_select.py
index 9740752b06..f51089629d 100644
--- a/src/textual/widgets/_select.py
+++ b/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 --git a/src/textual/widgets/_toggle_button.py b/src/textual/widgets/_toggle_button.py
index b009b51367..7b73b71736 100644
--- a/src/textual/widgets/_toggle_button.py
+++ b/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;
     }