From fb28c77c009e8564ad50c2ea874d9d24f9f3a623 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sat, 23 May 2026 08:17:22 +0200
Subject: [PATCH] Fix activation toggle handle visibility

---
 styleguide.css | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/styleguide.css b/styleguide.css
index 4fa1b8a..3bb1109 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1785,13 +1785,14 @@ section + section {
 }
 
 .sg-activation-toggle-chip {
+  --sg-activation-toggle-inset: 1px;
   position: relative;
   display: inline-grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   min-width: calc(var(--layout-mode-toggle-local-height) * 3);
   height: var(--layout-mode-toggle-local-height);
-  padding: var(--border-width-thin);
+  padding: var(--sg-activation-toggle-inset);
   border: var(--border-none);
   border-radius: var(--radius-interaction);
   background: var(--surface-toggle-track);
@@ -1808,11 +1809,11 @@ section + section {
 .sg-activation-toggle-chip::before {
   content: "";
   position: absolute;
-  top: var(--border-width-thin);
-  left: var(--border-width-thin);
-  width: calc(50% - var(--border-width-thin));
-  height: calc(100% - (var(--border-width-thin) * 2));
-  border-radius: calc(var(--radius-interaction) - var(--border-width-thin));
+  top: var(--sg-activation-toggle-inset);
+  left: var(--sg-activation-toggle-inset);
+  width: calc(50% - var(--sg-activation-toggle-inset));
+  height: calc(100% - (var(--sg-activation-toggle-inset) * 2));
+  border-radius: calc(var(--radius-interaction) - var(--sg-activation-toggle-inset));
   background: var(--surface-toggle-handle);
   transition: transform 160ms ease;
 }