From 94e5aad6c0ee5f1556c7c6513e2d8fb0b904970c Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 20 Nov 2024 15:33:09 +0600
Subject: [PATCH] web/Toggle: accommodate for rtl layouts

---
 web/src/components/misc/Toggle.svelte | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/components/misc/Toggle.svelte b/web/src/components/misc/Toggle.svelte
index fcb0aa92..bb935b14 100644
--- a/web/src/components/misc/Toggle.svelte
+++ b/web/src/components/misc/Toggle.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    export let enabled;
+    export let enabled: boolean;
 </script>
 
-<div class="toggle" class:enabled={enabled}>
+<div class="toggle" class:enabled>
     <div class="toggle-switcher"></div>
 </div>
 
@@ -10,6 +10,7 @@
     .toggle {
         --base-size: 22px;
         --ratio-factor: 0.9;
+        --enabled-pos: calc(100% * var(--ratio-factor));
 
         display: flex;
         justify-content: start;
@@ -23,6 +24,10 @@
         transition: background 0.2s;
     }
 
+    .toggle:dir(rtl) {
+        --enabled-pos: calc(-100% * var(--ratio-factor));
+    }
+
     .toggle-switcher {
         height: var(--base-size);
         width: var(--base-size);
@@ -37,6 +42,7 @@
     }
 
     .toggle.enabled .toggle-switcher {
-        transform: translateX(calc(100% * var(--ratio-factor)));
+        transform: translateX(var(--enabled-pos));
+    }
     }
 </style>