From c7befcb100656be66aff9e2c1e2b0853b2f75a98 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 29 Jun 2024 21:19:35 +0600
Subject: [PATCH] web/Switcher: new style & clean up

---
 web/src/components/buttons/Switcher.svelte | 32 ++++++++++++++++------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte
index 0a6749c3..b836105e 100644
--- a/web/src/components/buttons/Switcher.svelte
+++ b/web/src/components/buttons/Switcher.svelte
@@ -17,27 +17,43 @@
         border-radius: var(--border-radius);
     }
 
-    .switcher :global(.button:first-child) {
+    .switcher:not(.big) :global(.button:first-child) {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
     }
 
-    .switcher :global(.button:last-child) {
+    .switcher:not(.big) :global(.button:last-child) {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
     }
 
-    .switcher.big :global(.button) {
-        width: 100%;
-        height: 40px;
+    .switcher.big {
+        --switcher-inner-padding: 4px;
+        border-radius: calc(var(--border-radius) + var(--switcher-inner-padding));
+        background: var(--button);
+        box-shadow: var(--button-box-shadow);
+        padding: var(--switcher-inner-padding);
     }
 
-    .switcher > :global(:not(.button:first-child):not(.button:last-child)) {
+    .switcher.big :global(.button) {
+        width: 100%;
+        height: calc(40px - var(--switcher-inner-padding));
+    }
+
+    .switcher.big :global(.button:not(:focus-visible)) {
+        box-shadow: none;
+    }
+
+    .switcher.big :global(.button:not(.active, :hover, :active)) {
+        background-color: transparent;
+    }
+
+    .switcher:not(.big) :global(.button:not(:first-child, :last-child)) {
         border-radius: 0;
     }
 
-    /* clumsy hack to get rid of double border in a list of switches */
-    .switcher > :global(:not(.button:first-child)) {
+    /* hack to get rid of double border in a list of switches */
+    .switcher:not(.big) :global(:not(.button:first-child)) {
         margin-left: -1.5px;
     }
 </style>