From ce7d22d13f4904baae3c50b966c02067b02d79b3 Mon Sep 17 00:00:00 2001
From: Cat-a-clysm <38079631+mecha-cat@users.noreply.github.com>
Date: Sat, 25 May 2024 16:42:34 +0200
Subject: [PATCH] styled toggles

---
 src/styles/override.css | 35 ++++++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/styles/override.css b/src/styles/override.css
index a6e1430..864b0a4 100644
--- a/src/styles/override.css
+++ b/src/styles/override.css
@@ -1,4 +1,3 @@
-
 ion-list-header + ion-list.md {
 	padding-top: unset;
 }
@@ -21,7 +20,6 @@ p {
 }
 
 /* Segment Buttons */
-
 ion-segment-button.md::part(native) {
 	border: 1px solid var(--color);
 	text-transform: none;
@@ -49,12 +47,35 @@ ion-segment-button.md::part(indicator-background) {
 }
 
 /* Toggles */
-
-ion-toggle.md::part(track), ion-toggle.toggle-checked.md::part(track) {
-	background-color: aqua;
-	width: 52px;
+ion-toggle.md::part(track) {
+	background-color: var(--ion-toolbar-background);
+	width: 56px;
 	height: 32px;
-	border: 4px solid red;
 	border-radius: 100px;
+}
+
+ion-toggle.md::part(track) {
+	border: 2px solid var(--ion-text-color-step-400);
+}
+
+ion-toggle.md::part(handle) {
+	background-color: var(--ion-text-color-step-400);
+	width: 18px;
+	height: 18px;
+
+	--handle-spacing: 8px;
+}
+
+ion-toggle.toggle-checked.md::part(track) {
+	background-color: var(--ion-color-primary);
+	border: 2px solid var(--ion-color-primary);
+}
+
+ion-toggle.toggle-checked.md::part(handle) {
+	background-color: var(--ion-toolbar-background);
+	width: 24px;
+	height: 24px;
+
+	--handle-spacing: 6px;
 
 }
\ No newline at end of file