From 945cdf5202912d3cb1190be441de36cbe216432a Mon Sep 17 00:00:00 2001
From: doryan04 <sagiev2015@yandex.ru>
Date: Wed, 31 Jan 2024 21:55:53 +0400
Subject: [PATCH] DONE: Switch now is SVG RENAMING: check-box-skeleton ->
 check-box-layout

---
 app/layout.tsx                                |   9 +-
 ...-box-skeleton.tsx => check-box-layout.tsx} |   2 +-
 .../checkbox/checkbox.tsx                     |  10 +-
 src/primitive-components/radio/radio.tsx      |   8 +-
 src/primitive-components/switch/switch.tsx    |  41 ++-
 src/styles/checkbox.css                       |  22 +-
 src/styles/checkbox.sass                      |  20 +-
 src/styles/generics.css                       | 267 +++++++++---------
 src/styles/generics.css.map                   |   2 +-
 src/styles/mixins/m3-mixins.sass              |   2 +-
 src/styles/radio.css                          |   2 +-
 src/styles/swtich.css                         | 242 ++++++++--------
 src/styles/swtich.css.map                     |   2 +-
 src/styles/swtich.sass                        | 234 ++++++++-------
 14 files changed, 463 insertions(+), 400 deletions(-)
 rename src/primitive-components/checkbox-layout/{check-box-skeleton.tsx => check-box-layout.tsx} (95%)

diff --git a/app/layout.tsx b/app/layout.tsx
index 60212e5..612714f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,13 +1,20 @@
 import "../src/styles/generics.css"
 import "../src/styles/button.css"
 import "../src/styles/ripple.css"
-import {Metadata} from "next";
+import {Metadata, Viewport} from "next";
 
 export const metadata: Metadata = {
     title: 'Create Next App',
     description: 'Generated by create next app',
 }
 
+export const viewport: Viewport = {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+    userScalable: false,
+}
+
 export default function RootLayout({
     children,
 }: {
diff --git a/src/primitive-components/checkbox-layout/check-box-skeleton.tsx b/src/primitive-components/checkbox-layout/check-box-layout.tsx
similarity index 95%
rename from src/primitive-components/checkbox-layout/check-box-skeleton.tsx
rename to src/primitive-components/checkbox-layout/check-box-layout.tsx
index e6eb607..89e3eb3 100644
--- a/src/primitive-components/checkbox-layout/check-box-skeleton.tsx
+++ b/src/primitive-components/checkbox-layout/check-box-layout.tsx
@@ -3,7 +3,7 @@
 import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
 import {CheckboxLayoutProps} from "./checkbox-layout.types";
 
-export const CheckBoxSkeleton = forwardRef(
+export const CheckBoxLayout = forwardRef(
 
     function CheckBoxBase({indeterminate, typeInput, type, ...props} : CheckboxLayoutProps, ref) : JSX.Element {
 
diff --git a/src/primitive-components/checkbox/checkbox.tsx b/src/primitive-components/checkbox/checkbox.tsx
index f3535f4..b926f9f 100644
--- a/src/primitive-components/checkbox/checkbox.tsx
+++ b/src/primitive-components/checkbox/checkbox.tsx
@@ -1,7 +1,7 @@
 import {RippleArea} from "../ripple/ripple-area";
 import {IRippleProps} from "../ripple/ripple.types";
 import useRippleEffect from "../ripple/hooks/useRippleEffect";
-import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
+import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
 import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";
 
 /**
@@ -30,10 +30,10 @@ export const Checkbox = forwardRef(
         return (
             <label {...events}
                    className={classes}>
-                <CheckBoxSkeleton {...props}
-                                  ref={checkboxRef}
-                                  indeterminate={indeterminate}
-                                  type={"checkbox"}/>
+                <CheckBoxLayout {...props}
+                                ref={checkboxRef}
+                                indeterminate={indeterminate}
+                                type={"checkbox"}/>
                 <span className={"m3 m3-checkbox-state-layer"}/>
                 <RippleArea className={"m3-checkbox-ripple-layer"}
                             ref={ripplesRef}
diff --git a/src/primitive-components/radio/radio.tsx b/src/primitive-components/radio/radio.tsx
index 0d0253e..6bb5554 100644
--- a/src/primitive-components/radio/radio.tsx
+++ b/src/primitive-components/radio/radio.tsx
@@ -1,7 +1,7 @@
 import {RippleArea} from "../ripple/ripple-area";
 import {forwardRef, useRef, useState} from "react";
 import useRippleEffect from "../ripple/hooks/useRippleEffect";
-import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
+import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
 import {IRippleProps} from "../ripple/ripple.types";
 
 /**
@@ -22,9 +22,9 @@ export const Radio = forwardRef(
         return (
             <label {...events}
                    className={classes}>
-                <CheckBoxSkeleton {...props}
-                                  ref={ref}
-                                  type={"radio"}/>
+                <CheckBoxLayout {...props}
+                                ref={ref}
+                                type={"radio"}/>
                 <span className={"m3 m3-radio-state-layer"}/>
                 <RippleArea className={"m3-checkbox-ripple-layer"}
                             ref={ripplesRef}
diff --git a/src/primitive-components/switch/switch.tsx b/src/primitive-components/switch/switch.tsx
index b61407b..bbcc179 100644
--- a/src/primitive-components/switch/switch.tsx
+++ b/src/primitive-components/switch/switch.tsx
@@ -1,6 +1,6 @@
-import {forwardRef} from "react";
+import React, {ForwardedRef, forwardRef} from "react";
 import {switchMainProps} from "./switch.types";
-import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
+import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
 
 /**
  * Switch component
@@ -8,17 +8,32 @@ import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
  */
 
 export const Switch = forwardRef(
-
-    ({icon, disabled, selected = false, ...props} : switchMainProps, ref) => (
-        <label>
-            <CheckBoxSkeleton {...props}
-                              ref={ref}
-                              data-icon={icon}
-                              type={"checkbox"}
-                              disabled={disabled}
-                              typeInput={"switch"}
-                              data-selected={selected}/>
-        </label>
+    ({icon, disabled, selected = false, ...props} : switchMainProps, ref : ForwardedRef<any>) => (
+        <div className={"m3 m3-switch-exp"} ref={ref}>
+            <CheckBoxLayout {...props}
+                            type={"checkbox"}
+                            disabled={disabled}
+                            className={`m3 ${props.className ?? ""}`.trimEnd()}/>
+            <svg>
+                <rect className={"m3 m3-switch-track"}/>
+                <circle className={"m3 m3-switch-handler"}/>
+                <circle className={"m3 m3-switch-handler-state-layer"}/>
+                <g>
+                    {
+                        icon && !selected &&
+                        <text className={"m3 m3-icon-unchecked"}>
+                            close
+                        </text>
+                    }
+                    {
+                        icon &&
+                        <text className={"m3 m3-icon-checked"}>
+                            check
+                        </text>
+                    }
+                </g>
+            </svg>
+        </div>
     )
 
 )
\ No newline at end of file
diff --git a/src/styles/checkbox.css b/src/styles/checkbox.css
index e0e275c..c381623 100644
--- a/src/styles/checkbox.css
+++ b/src/styles/checkbox.css
@@ -7,7 +7,7 @@ label.m3.m3-checkbox-label {
 }
 label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
   position: absolute;
-  width: 40px;
+  width: 2.5rem;
   aspect-ratio: inherit;
   border-radius: 50%;
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
@@ -18,8 +18,8 @@ span.m3.m3-checkbox-ripple-layer {
   contain: content;
   border-radius: 50%;
   position: absolute;
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
 }
 
 input[type=checkbox].m3.m3-checkbox {
@@ -29,12 +29,12 @@ input[type=checkbox].m3.m3-checkbox {
   justify-content: center;
   box-sizing: content-box;
   z-index: 10;
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   margin: 0;
-  border-radius: 2px;
-  outline-offset: -2px;
-  outline: 2px solid var(--md-sys-color-on-surface-variant);
+  outline-offset: -0.14rem;
+  border-radius: 0.14rem;
+  outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
 input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
@@ -50,17 +50,17 @@ input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].
 }
 input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
   opacity: 38%;
-  outline-color: var(--md-sys-color-on-surface);
+  border: 2px solid var(--md-sys-color-on-surface);
 }
 input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
   opacity: 38%;
   background-color: var(--md-sys-color-on-surface);
 }
 input[type=checkbox].m3.m3-checkbox::after {
-  line-height: 18px;
+  line-height: 1.125rem;
   font-family: Material-Symbols-Outlined-Regular, sans-serif;
   font-weight: 700;
-  font-size: 18px;
+  font-size: 1.125rem;
   color: var(--md-sys-color-on-primary);
 }
 input[type=checkbox].m3.m3-checkbox:checked::after {
diff --git a/src/styles/checkbox.sass b/src/styles/checkbox.sass
index 8a1ba88..98cf47c 100644
--- a/src/styles/checkbox.sass
+++ b/src/styles/checkbox.sass
@@ -10,8 +10,8 @@ span.m3.m3-checkbox-ripple-layer
     contain: content
     border-radius: 50%
     position: absolute
-    width: 40px
-    height: 40px
+    width: 2.5rem
+    height: 2.5rem
 
 input[type="checkbox"].m3.m3-checkbox
     appearance: none
@@ -20,12 +20,12 @@ input[type="checkbox"].m3.m3-checkbox
     justify-content: center
     box-sizing: content-box
     z-index: 10
-    width: 18px
-    height: 18px
+    width: 1.125rem
+    height: 1.125rem
     margin: 0
-    border-radius: 2px
-    outline-offset: -2px
-    outline: 2px solid var(--md-sys-color-on-surface-variant)
+    outline-offset: -.14rem
+    border-radius: .14rem
+    outline: .14rem solid var(--md-sys-color-on-surface-variant)
     transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
     &:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
@@ -42,17 +42,17 @@ input[type="checkbox"].m3.m3-checkbox
     &:disabled
         &:is(:hover, &)
             opacity: 38%
-            outline-color: var(--md-sys-color-on-surface)
+            border: 2px solid var(--md-sys-color-on-surface)
 
         &:checked:is(:hover, &)
             opacity: 38%
             background-color: var(--md-sys-color-on-surface)
 
     &::after
-        line-height: 18px
+        line-height: 1.125rem
         font-family: Material-Symbols-Outlined-Regular, sans-serif
         font-weight: 700
-        font-size: 18px
+        font-size: 1.125rem
         color: var(--md-sys-color-on-primary)
 
     &:checked::after
diff --git a/src/styles/generics.css b/src/styles/generics.css
index d60da9a..3d71355 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -218,7 +218,7 @@ label.m3.m3-radio-label {
 }
 label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
   position: absolute;
-  width: 40px;
+  width: 2.5rem;
   aspect-ratio: inherit;
   border-radius: 50%;
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
@@ -523,145 +523,154 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined {
     transform: scale3d(1, 1, 1);
   }
 }
-input[type=checkbox].m3.m3-switch {
-  transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+div.m3.m3-switch-exp {
+  margin: 4px;
+  box-sizing: content-box;
   display: flex;
-  position: relative;
-  align-items: center;
-  width: 52px;
-  height: 32px;
-  appearance: none;
-  padding: 2px 2px 2px 6px;
-  border-radius: 16px;
-  border: 2px solid var(--md-sys-color-outline);
-  background-color: var(--md-sys-color-surface-container-high);
-}
-input[type=checkbox].m3.m3-switch:disabled {
-  border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-  background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent);
-}
-input[type=checkbox].m3.m3-switch:checked {
-  border: 2px solid rgba(0, 0, 0, 0);
-  background-color: var(--md-sys-color-primary);
-}
-input[type=checkbox].m3.m3-switch::after {
-  transition: color, background-color, opacity, 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  z-index: 9;
-  position: absolute;
-  display: flex;
-  content: "";
-  height: 40px;
-  width: 40px;
-  left: -6px;
-  border-radius: 50%;
-}
-input[type=checkbox].m3.m3-switch:checked::after {
-  transform: translateX(50%);
-}
-input[type=checkbox].m3.m3-switch:checked::after, input[type=checkbox].m3.m3-switch::after, input[type=checkbox].m3.m3-switch:checked::before, input[type=checkbox].m3.m3-switch::before {
-  transform-origin: center;
-}
-input[type=checkbox].m3.m3-switch:is([data-icon=true], [data-icon=true]:checked)::before {
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
   align-items: center;
   justify-content: center;
-  text-align: center;
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 12px;
+  width: 52px;
+  height: 32px;
 }
-input[type=checkbox].m3.m3-switch[data-icon=true]:checked::before {
-  content: "done" !important;
-  color: var(--md-sys-color-on-primary-container);
+div.m3.m3-switch-exp > svg {
+  overflow: visible;
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  width: 52px;
+  height: 32px;
 }
-@media (prefers-color-scheme: light) {
-  input[type=checkbox].m3.m3-switch[data-icon=true]::before {
-    color: var(--md-sys-color-on-primary);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
-    color: var(--md-sys-color-surface-container-highest);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {
-    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-  }
+div.m3.m3-switch-exp > svg > g {
+  transform: translate(11.5%, 81%);
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-@media (prefers-color-scheme: dark) {
-  input[type=checkbox].m3.m3-switch[data-icon=true]::before {
-    color: var(--md-sys-color-surface-container-high);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
-    color: var(--md-sys-color-surface-container-highest);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {
-    color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
-  }
+div.m3.m3-switch-exp > svg > g > text {
+  font-family: Material-Symbols-Outlined-Regular;
+  font-size: 20px;
 }
-input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false])::before, input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false]):disabled::before {
-  transform: scale(150%);
-  content: "close";
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  cy: 50%;
+  cx: 16px;
 }
-input[type=checkbox].m3.m3-switch::before {
-  z-index: 10;
-  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  content: "";
-  display: flex;
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-  background-color: var(--md-sys-color-outline);
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer {
+  r: 20px;
+  fill-opacity: 0;
 }
-input[type=checkbox].m3.m3-switch:checked::before {
-  opacity: 1;
-  transform: translateX(125%) scale(150%);
-  background-color: var(--md-sys-color-on-primary);
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
+  r: 8px;
 }
-input[type=checkbox].m3.m3-switch:hover:checked::after {
-  transform: translateX(50%);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
+  transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  stroke-width: 2px;
+  border-radius: 16px;
+  rx: 15px;
+  width: 50px;
+  height: 30px;
 }
-input[type=checkbox].m3.m3-switch:hover::after {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+div.m3.m3-switch-exp > input.m3 {
+  cursor: pointer;
+  appearance: none;
+  opacity: 0 !important;
+  margin: 0;
+  width: 52px;
+  height: 32px;
+  position: absolute;
 }
-input[type=checkbox].m3.m3-switch:active:checked::after {
-  transform: translateX(50%);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+div.m3.m3-switch-exp > input.m3:disabled {
+  cursor: not-allowed;
 }
-input[type=checkbox].m3.m3-switch:active::after {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+div.m3.m3-switch-exp > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-outline);
 }
-input[type=checkbox].m3.m3-switch:active:checked::before {
-  transform: translateX(125%) scale(175%);
-  background-color: var(--md-sys-color-primary-container);
+div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
+  transform: translate(50%, 81%);
 }
-input[type=checkbox].m3.m3-switch:active::before {
-  transform: scale(175%);
-  background-color: var(--md-sys-color-on-surface-variant);
+div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-on-primary);
 }
-input[type=checkbox].m3.m3-switch:disabled:checked {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
+div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
+  fill: var(--md-sys-color-on-primary);
 }
-input[type=checkbox].m3.m3-switch:disabled:checked::after, input[type=checkbox].m3.m3-switch:disabled::after {
+div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
+  fill: var(--md-sys-color-on-primary-container);
+}
+div.m3.m3-switch-exp > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-surface);
+}
+div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch-exp > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
+  r: 12px;
+}
+div.m3.m3-switch-exp > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
   opacity: 0;
 }
-input[type=checkbox].m3.m3-switch:disabled::before {
-  opacity: 0.38;
-  transform: initial;
-  background-color: var(--md-sys-color-outline) !important;
+div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
+  cx: calc(100% - 16px);
 }
-input[type=checkbox].m3.m3-switch:disabled:checked::before {
-  opacity: 1;
-  transform: translateX(125%) scale(150%);
-  background-color: var(--md-sys-color-surface) !important;
+div.m3.m3-switch-exp > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
+  opacity: 0;
+}
+div.m3.m3-switch-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:checked, div.m3.m3-switch-exp > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
+  r: 14px;
+}
+div.m3.m3-switch-exp > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-on-surface);
+  fill-opacity: 38%;
+}
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-primary-container);
+}
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-primary);
+  fill-opacity: 8%;
+}
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-on-surface-variant);
+}
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-on-surface);
+  fill-opacity: 8%;
+}
+div.m3.m3-switch-exp > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-primary);
+  fill-opacity: 12%;
+}
+div.m3.m3-switch-exp > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-on-surface);
+  fill-opacity: 12%;
+}
+div.m3.m3-switch-exp > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
+  rx: 16px;
+  width: 52px;
+  height: 32px;
+  stroke-width: 0;
+}
+div.m3.m3-switch-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:not(:checked), div.m3.m3-switch-exp > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
+  x: 1px;
+  y: 1px;
+}
+div.m3.m3-switch-exp > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
+  stroke: var(--md-sys-color-outline);
+  fill: var(--md-sys-color-surface-container-highest);
+}
+div.m3.m3-switch-exp > input.m3:checked + svg > rect.m3.m3-switch-track {
+  stroke: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
+}
+div.m3.m3-switch-exp > input.m3:disabled + svg > g > text.m3 {
+  fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
+}
+div.m3.m3-switch-exp > input.m3:disabled + svg > rect.m3.m3-switch-track {
+  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent);
+}
+div.m3.m3-switch-exp > input.m3:checked:disabled + svg > g > text.m3 {
+  transform: translateX(38.5%);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+}
+div.m3.m3-switch-exp > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
+  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 
-@keyframes toggle-shifting {
-  50% {
-    width: 30px;
-  }
-  100% {
-    width: 16px;
-  }
-}
 hr.m3.m3-divider {
   display: flex;
   align-items: end;
@@ -703,7 +712,7 @@ label.m3.m3-checkbox-label {
 }
 label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
   position: absolute;
-  width: 40px;
+  width: 2.5rem;
   aspect-ratio: inherit;
   border-radius: 50%;
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
@@ -714,8 +723,8 @@ span.m3.m3-checkbox-ripple-layer {
   contain: content;
   border-radius: 50%;
   position: absolute;
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
 }
 
 input[type=checkbox].m3.m3-checkbox {
@@ -725,12 +734,12 @@ input[type=checkbox].m3.m3-checkbox {
   justify-content: center;
   box-sizing: content-box;
   z-index: 10;
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   margin: 0;
-  border-radius: 2px;
-  outline-offset: -2px;
-  outline: 2px solid var(--md-sys-color-on-surface-variant);
+  outline-offset: -0.14rem;
+  border-radius: 0.14rem;
+  outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
 input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
@@ -746,17 +755,17 @@ input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].
 }
 input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
   opacity: 38%;
-  outline-color: var(--md-sys-color-on-surface);
+  border: 2px solid var(--md-sys-color-on-surface);
 }
 input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
   opacity: 38%;
   background-color: var(--md-sys-color-on-surface);
 }
 input[type=checkbox].m3.m3-checkbox::after {
-  line-height: 18px;
+  line-height: 1.125rem;
   font-family: Material-Symbols-Outlined-Regular, sans-serif;
   font-weight: 700;
-  font-size: 18px;
+  font-size: 1.125rem;
   color: var(--md-sys-color-on-primary);
 }
 input[type=checkbox].m3.m3-checkbox:checked::after {
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index c9c9890..ba42a68 100644
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","icon.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAYQ;AACA;AACA;AACA;AACA;ACdR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE5ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACfZ;EFDI;EACA;EACA;EACA;EACA;;AEDA;EFIA;EACA;EACA;EACA;EACA;;;AELJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACbR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ELNI;EKQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ELMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EL3CA;;AK8CA;ELxCA;;AK2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EL1DA;;AK6DA;ELvDA;;AK0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9HZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;ACpIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ETDI;EACA;EACA;EACA;EACA;;ASDA;ETIA;EACA;EACA;EACA;EACA;;;ASLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC3FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AbrHZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","icon.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAYQ;AACA;AACA;AACA;AACA;ACdR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE5ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACfZ;EFDI;EACA;EACA;EACA;EACA;;AEDA;EFIA;EACA;EACA;EACA;EACA;;;AELJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACbR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ELNI;EKQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ELMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EL3CA;;AK8CA;ELxCA;;AK2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EL1DA;;AK6DA;ELvDA;;AK0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9HZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC5JhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ETDI;EACA;EACA;EACA;EACA;;ASDA;ETIA;EACA;EACA;EACA;EACA;;;ASLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC3FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AbrHZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
diff --git a/src/styles/mixins/m3-mixins.sass b/src/styles/mixins/m3-mixins.sass
index 8c3b502..c5ff5b2 100644
--- a/src/styles/mixins/m3-mixins.sass
+++ b/src/styles/mixins/m3-mixins.sass
@@ -7,7 +7,7 @@
 
 @mixin m3-state-layer-mixin
     position: absolute
-    width: 40px
+    width: 2.5rem
     aspect-ratio: inherit
     border-radius: 50%
     transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
diff --git a/src/styles/radio.css b/src/styles/radio.css
index a946256..2801304 100644
--- a/src/styles/radio.css
+++ b/src/styles/radio.css
@@ -7,7 +7,7 @@ label.m3.m3-radio-label {
 }
 label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
   position: absolute;
-  width: 40px;
+  width: 2.5rem;
   aspect-ratio: inherit;
   border-radius: 50%;
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
diff --git a/src/styles/swtich.css b/src/styles/swtich.css
index 4dc548d..819a123 100644
--- a/src/styles/swtich.css
+++ b/src/styles/swtich.css
@@ -1,141 +1,149 @@
-input[type=checkbox].m3.m3-switch {
-  transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+div.m3.m3-switch-exp {
+  margin: 4px;
+  box-sizing: content-box;
   display: flex;
-  position: relative;
-  align-items: center;
-  width: 52px;
-  height: 32px;
-  appearance: none;
-  padding: 2px 2px 2px 6px;
-  border-radius: 16px;
-  border: 2px solid var(--md-sys-color-outline);
-  background-color: var(--md-sys-color-surface-container-high);
-}
-input[type=checkbox].m3.m3-switch:disabled {
-  border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-  background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent);
-}
-input[type=checkbox].m3.m3-switch:checked {
-  border: 2px solid rgba(0, 0, 0, 0);
-  background-color: var(--md-sys-color-primary);
-}
-input[type=checkbox].m3.m3-switch::after {
-  transition: color, background-color, opacity, 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  z-index: 9;
-  position: absolute;
-  display: flex;
-  content: "";
-  height: 40px;
-  width: 40px;
-  left: -6px;
-  border-radius: 50%;
-}
-input[type=checkbox].m3.m3-switch:checked::after {
-  transform: translateX(50%);
-}
-input[type=checkbox].m3.m3-switch:checked::after, input[type=checkbox].m3.m3-switch::after, input[type=checkbox].m3.m3-switch:checked::before, input[type=checkbox].m3.m3-switch::before {
-  transform-origin: center;
-}
-input[type=checkbox].m3.m3-switch:is([data-icon=true], [data-icon=true]:checked)::before {
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
   align-items: center;
   justify-content: center;
-  text-align: center;
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 12px;
+  width: 52px;
+  height: 32px;
 }
-input[type=checkbox].m3.m3-switch[data-icon=true]:checked::before {
-  content: "done" !important;
-  color: var(--md-sys-color-on-primary-container);
+div.m3.m3-switch-exp > svg {
+  overflow: visible;
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  width: 52px;
+  height: 32px;
 }
-@media (prefers-color-scheme: light) {
-  input[type=checkbox].m3.m3-switch[data-icon=true]::before {
-    color: var(--md-sys-color-on-primary);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
-    color: var(--md-sys-color-surface-container-highest);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {
-    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-  }
+div.m3.m3-switch-exp > svg > g {
+  transform: translate(11.5%, 81%);
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-@media (prefers-color-scheme: dark) {
-  input[type=checkbox].m3.m3-switch[data-icon=true]::before {
-    color: var(--md-sys-color-surface-container-high);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
-    color: var(--md-sys-color-surface-container-highest);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {
-    color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
-  }
+div.m3.m3-switch-exp > svg > g > text {
+  font-family: Material-Symbols-Outlined-Regular;
+  font-size: 20px;
 }
-input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false])::before, input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false]):disabled::before {
-  transform: scale(150%);
-  content: "close";
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  cy: 50%;
+  cx: 16px;
 }
-input[type=checkbox].m3.m3-switch::before {
-  z-index: 10;
-  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  content: "";
-  display: flex;
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-  background-color: var(--md-sys-color-outline);
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer {
+  r: 20px;
+  fill-opacity: 0;
 }
-input[type=checkbox].m3.m3-switch:checked::before {
-  opacity: 1;
-  transform: translateX(125%) scale(150%);
-  background-color: var(--md-sys-color-on-primary);
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
+  r: 8px;
 }
-input[type=checkbox].m3.m3-switch:hover:checked::after {
-  transform: translateX(50%);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
+  transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  stroke-width: 2px;
+  border-radius: 16px;
+  rx: 15px;
+  width: 50px;
+  height: 30px;
 }
-input[type=checkbox].m3.m3-switch:hover::after {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+div.m3.m3-switch-exp > input.m3 {
+  cursor: pointer;
+  appearance: none;
+  opacity: 0 !important;
+  margin: 0;
+  width: 52px;
+  height: 32px;
+  position: absolute;
 }
-input[type=checkbox].m3.m3-switch:active:checked::after {
-  transform: translateX(50%);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+div.m3.m3-switch-exp > input.m3:disabled {
+  cursor: not-allowed;
 }
-input[type=checkbox].m3.m3-switch:active::after {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+div.m3.m3-switch-exp > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-outline);
 }
-input[type=checkbox].m3.m3-switch:active:checked::before {
-  transform: translateX(125%) scale(175%);
-  background-color: var(--md-sys-color-primary-container);
+div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
+  transform: translate(50%, 81%);
 }
-input[type=checkbox].m3.m3-switch:active::before {
-  transform: scale(175%);
-  background-color: var(--md-sys-color-on-surface-variant);
+div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-on-primary);
 }
-input[type=checkbox].m3.m3-switch:disabled:checked {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
+div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
+  fill: var(--md-sys-color-on-primary);
 }
-input[type=checkbox].m3.m3-switch:disabled:checked::after, input[type=checkbox].m3.m3-switch:disabled::after {
+div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
+  fill: var(--md-sys-color-on-primary-container);
+}
+div.m3.m3-switch-exp > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-surface);
+}
+div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch-exp > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
+  r: 12px;
+}
+div.m3.m3-switch-exp > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
   opacity: 0;
 }
-input[type=checkbox].m3.m3-switch:disabled::before {
-  opacity: 0.38;
-  transform: initial;
-  background-color: var(--md-sys-color-outline) !important;
+div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
+  cx: calc(100% - 16px);
 }
-input[type=checkbox].m3.m3-switch:disabled:checked::before {
-  opacity: 1;
-  transform: translateX(125%) scale(150%);
-  background-color: var(--md-sys-color-surface) !important;
+div.m3.m3-switch-exp > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
+  opacity: 0;
 }
-
-@keyframes toggle-shifting {
-  50% {
-    width: 30px;
-  }
-  100% {
-    width: 16px;
-  }
+div.m3.m3-switch-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:checked, div.m3.m3-switch-exp > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
+  r: 14px;
+}
+div.m3.m3-switch-exp > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-on-surface);
+  fill-opacity: 38%;
+}
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-primary-container);
+}
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-primary);
+  fill-opacity: 8%;
+}
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
+  fill: var(--md-sys-color-on-surface-variant);
+}
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-on-surface);
+  fill-opacity: 8%;
+}
+div.m3.m3-switch-exp > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-primary);
+  fill-opacity: 12%;
+}
+div.m3.m3-switch-exp > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
+  fill: var(--md-sys-color-on-surface);
+  fill-opacity: 12%;
+}
+div.m3.m3-switch-exp > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
+  rx: 16px;
+  width: 52px;
+  height: 32px;
+  stroke-width: 0;
+}
+div.m3.m3-switch-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:not(:checked), div.m3.m3-switch-exp > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
+  x: 1px;
+  y: 1px;
+}
+div.m3.m3-switch-exp > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
+  stroke: var(--md-sys-color-outline);
+  fill: var(--md-sys-color-surface-container-highest);
+}
+div.m3.m3-switch-exp > input.m3:checked + svg > rect.m3.m3-switch-track {
+  stroke: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
+}
+div.m3.m3-switch-exp > input.m3:disabled + svg > g > text.m3 {
+  fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
+}
+div.m3.m3-switch-exp > input.m3:disabled + svg > rect.m3.m3-switch-track {
+  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent);
+}
+div.m3.m3-switch-exp > input.m3:checked:disabled + svg > g > text.m3 {
+  transform: translateX(38.5%);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+}
+div.m3.m3-switch-exp > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
+  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 
 /*# sourceMappingURL=swtich.css.map */
diff --git a/src/styles/swtich.css.map b/src/styles/swtich.css.map
index 28147ae..fe3f8fd 100644
--- a/src/styles/swtich.css.map
+++ b/src/styles/swtich.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["swtich.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI","file":"swtich.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["swtich.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA","file":"swtich.css"}
\ No newline at end of file
diff --git a/src/styles/swtich.sass b/src/styles/swtich.sass
index b55f850..187750d 100644
--- a/src/styles/swtich.sass
+++ b/src/styles/swtich.sass
@@ -1,133 +1,157 @@
-input[type="checkbox"].m3.m3-switch
-    transition: background-color .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+div.m3.m3-switch-exp
+    margin: 4px
+    box-sizing: content-box
     display: flex
-    position: relative
     align-items: center
+    justify-content: center
     width: 52px
     height: 32px
-    appearance: none
-    padding: 2px 2px 2px 6px
-    border-radius: calc(32px / 2)
-    border: 2px solid var(--md-sys-color-outline)
-    background-color: var(--md-sys-color-surface-container-high)
 
-    &:disabled
-        border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
-        background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent)
+    & > svg
+        overflow: visible
+        transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+        width: 52px
+        height: 32px
 
-    &:checked
-        border: 2px solid #00000000
-        background-color: var(--md-sys-color-primary)
+        & > g
+            transform: translate(11.5%, 81%)
+            transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+            & > text
+                font-family: Material-Symbols-Outlined-Regular
+                font-size: 20px
 
-    &::after
-        transition: color, background-color, opacity, .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
-        z-index: 9
+        & > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
+            transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+            cy: 50%
+            cx: 16px
+
+        & > circle.m3.m3-switch-handler-state-layer
+            r: 20px
+            fill-opacity: 0
+
+        & > circle.m3.m3-switch-handler
+            r: 8px
+
+        & > rect.m3.m3-switch-track
+            transition: fill .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+            stroke-width: 2px
+            border-radius: 16px
+            rx: 15px
+            width: 50px
+            height: 30px
+
+    & > input.m3
+        cursor: pointer
+        appearance: none
+        opacity: 0 !important
+        margin: 0
+        width: 52px
+        height: 32px
         position: absolute
-        display: flex
-        content: ""
-        height: 40px
-        width: 40px
-        left: -6px
-        border-radius: 50%
 
-    &:checked::after
-        transform: translateX(50%)
+        &:disabled
+            cursor: not-allowed
 
-    &:checked::after, &::after, &:checked::before, &::before
-        transform-origin: center
+        &:not(:checked, :disabled) + svg
+            & > circle.m3.m3-switch-handler
+                fill: var(--md-sys-color-outline)
 
-    &:is([data-icon=true], [data-icon=true]:checked)::before
-        font-family: Material-Symbols-Outlined-Regular, sans-serif
-        align-items: center
-        justify-content: center
-        text-align: center
-        font-weight: 500
-        font-size: 12px
-        line-height: 12px
+        &:checked:not(:disabled) + svg
+            & > g
+                transform: translate(50%, 81%)
 
-    &[data-icon=true]:checked::before
-        content: "done" !important
-        color: var(--md-sys-color-on-primary-container)
+            & > circle.m3.m3-switch-handler
+                fill: var(--md-sys-color-on-primary)
 
-    @media (prefers-color-scheme: light)
-        &[data-icon=true]::before
-            color: var(--md-sys-color-on-primary)
-        &[data-icon=true]:disabled::before
-            color: var(--md-sys-color-surface-container-highest)
-        &[data-icon=true]:disabled:checked::before
-            color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
+        &:not(:disabled) + svg
+            & > g > text.m3.m3-icon-unchecked
+                fill: var(--md-sys-color-on-primary)
 
-    @media (prefers-color-scheme: dark)
-        &[data-icon=true]::before
-            color: var(--md-sys-color-surface-container-high)
-        &[data-icon=true]:disabled::before
-            color: var(--md-sys-color-surface-container-highest)
-        &[data-icon=true]:disabled:checked::before
-            color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
+            & > g > text.m3.m3-icon-checked
+                fill: var(--md-sys-color-on-primary-container)
 
-    &[data-icon=true]:where([data-selected=false])::before,
-    &[data-icon=true]:where([data-selected=false]):disabled::before
-        transform: scale(150%)
-        content: "close"
+        &:checked:disabled + svg > circle.m3.m3-switch-handler
+            fill: var(--md-sys-color-surface)
 
-    &::before
-        z-index: 10
-        transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
-        content: ""
-        display: flex
-        height: 16px
-        width: 16px
-        border-radius: 50%
-        background-color: var(--md-sys-color-outline)
+        &:checked + svg > circle.m3.m3-switch-handler,
+        & + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
+            r: 12px
 
-    &:checked::before
-        opacity: 1
-        transform: translateX(125%) scale(150%)
-        background-color: var(--md-sys-color-on-primary)
+        &:checked + svg
+            & > g > text.m3.m3-icon-unchecked
+                opacity: 0
 
-    &:hover
-        &:checked::after
-            transform: translateX(50%)
-            background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
+            & > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer)
+                cx: calc(100% - 16px)
 
-        &::after
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
+        &:not(:checked) + svg
+            & > g > text.m3.m3-icon-checked
+                opacity: 0
 
-    &:active
-        &:checked::after
-            transform: translateX(50%)
-            background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
+        &:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler
+            r: 14px
 
-        &::after
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+        &:not(:checked):disabled + svg > circle.m3.m3-switch-handler
+            fill: var(--md-sys-color-on-surface)
+            fill-opacity: 38%
 
-        &:checked::before
-            transform: translateX(125%) scale(175%)
-            background-color: var(--md-sys-color-primary-container)
+        &:hover:not(:disabled)
+            &:checked + svg
+                & > circle.m3.m3-switch-handler
+                    fill: var(--md-sys-color-primary-container)
 
-        &::before
-            transform: scale(175%)
-            background-color: var(--md-sys-color-on-surface-variant)
+                & > circle.m3.m3-switch-handler-state-layer
+                    fill: var(--md-sys-color-primary)
+                    fill-opacity: 8%
 
-    &:disabled
-        &:checked
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
+            &:not(:checked) + svg
+                & > circle.m3.m3-switch-handler
+                    fill: var(--md-sys-color-on-surface-variant)
 
-        &:checked::after, &::after
-            opacity: 0
+                & > circle.m3.m3-switch-handler-state-layer
+                    fill: var(--md-sys-color-on-surface)
+                    fill-opacity: 8%
 
-        &::before
-            opacity: 0.38
-            transform: initial
-            background-color: var(--md-sys-color-outline) !important
+        &:active:not(:disabled)
+            &:checked + svg > circle.m3.m3-switch-handler-state-layer
+                fill: var(--md-sys-color-primary)
+                fill-opacity: 12%
 
-        &:checked::before
-            opacity: 1
-            transform: translateX(125%) scale(150%)
-            background-color: var(--md-sys-color-surface) !important
+            &:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
+                fill: var(--md-sys-color-on-surface)
+                fill-opacity: 12%
 
-@keyframes toggle-shifting
-    50%
-        width: 30px
-    100%
-        width: 16px
\ No newline at end of file
+        &:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
+            rx: 16px
+            width: 52px
+            height: 32px
+            stroke-width: 0
+
+        &:is(&:not(:checked), &:not(:checked):disabled) + svg > rect.m3.m3-switch-track
+            x: 1px
+            y: 1px
+
+        &:not(:checked) + svg > rect.m3.m3-switch-track
+            stroke: var(--md-sys-color-outline)
+            fill: var(--md-sys-color-surface-container-highest)
+
+        &:checked + svg > rect.m3.m3-switch-track
+            stroke: var(--md-sys-color-primary)
+            fill: var(--md-sys-color-primary)
+
+        &:disabled + svg
+            & > g > text.m3
+                fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent)
+
+            & > rect.m3.m3-switch-track
+                stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+                fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent)
+
+        &:checked:disabled + svg
+            & > g > text.m3
+                transform: translateX(38.5%)
+                fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
+
+            & > rect.m3.m3-switch-track
+                stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)
+                fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
\ No newline at end of file