DONE: Switch now is SVG

RENAMING: check-box-skeleton -> check-box-layout

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,
 }: {

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 {
 

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}
+                <CheckBoxLayout {...props}
-                                  ref={checkboxRef}
+                                ref={checkboxRef}
-                                  indeterminate={indeterminate}
+                                indeterminate={indeterminate}
-                                  type={"checkbox"}/>
+                                type={"checkbox"}/>
                 <span className={"m3 m3-checkbox-state-layer"}/>
                 <RippleArea className={"m3-checkbox-ripple-layer"}
                             ref={ripplesRef}

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}
+                <CheckBoxLayout {...props}
-                                  ref={ref}
+                                ref={ref}
-                                  type={"radio"}/>
+                                type={"radio"}/>
                 <span className={"m3 m3-radio-state-layer"}/>
                 <RippleArea className={"m3-checkbox-ripple-layer"}
                             ref={ripplesRef}

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 : ForwardedRef<any>) => (
-    ({icon, disabled, selected = false, ...props} : switchMainProps, ref) => (
+        <div className={"m3 m3-switch-exp"} ref={ref}>
-        <label>
+            <CheckBoxLayout {...props}
-            <CheckBoxSkeleton {...props}
+                            type={"checkbox"}
-                              ref={ref}
+                            disabled={disabled}
-                              data-icon={icon}
+                            className={`m3 ${props.className ?? ""}`.trimEnd()}/>
-                              type={"checkbox"}
+            <svg>
-                              disabled={disabled}
+                <rect className={"m3 m3-switch-track"}/>
-                              typeInput={"switch"}
+                <circle className={"m3 m3-switch-handler"}/>
-                              data-selected={selected}/>
+                <circle className={"m3 m3-switch-handler-state-layer"}/>
-        </label>
+                <g>
+                    {
+                        icon && !selected &&
+                        <text className={"m3 m3-icon-unchecked"}>
+                            close
+                        </text>
+                    }
+                    {
+                        icon &&
+                        <text className={"m3 m3-icon-checked"}>
+                            check
+                        </text>
+                    }
+                </g>
+            </svg>
+        </div>
     )
 
 )

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;
+  width: 2.5rem;
-  height: 40px;
+  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;
+  width: 1.125rem;
-  height: 18px;
+  height: 1.125rem;
   margin: 0;
-  border-radius: 2px;
+  outline-offset: -0.14rem;
-  outline-offset: -2px;
+  border-radius: 0.14rem;
-  outline: 2px solid var(--md-sys-color-on-surface-variant);
+  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 {

src/styles/checkbox.sass

@@ -10,8 +10,8 @@ span.m3.m3-checkbox-ripple-layer
     contain: content
     border-radius: 50%
     position: absolute
-    width: 40px
+    width: 2.5rem
-    height: 40px
+    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
+    width: 1.125rem
-    height: 18px
+    height: 1.125rem
     margin: 0
-    border-radius: 2px
+    outline-offset: -.14rem
-    outline-offset: -2px
+    border-radius: .14rem
-    outline: 2px solid var(--md-sys-color-on-surface-variant)
+    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

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 {
+div.m3.m3-switch-exp {
-  transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  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;
+  width: 52px;
-  font-weight: 500;
+  height: 32px;
-  font-size: 12px;
-  line-height: 12px;
 }
-input[type=checkbox].m3.m3-switch[data-icon=true]:checked::before {
+div.m3.m3-switch-exp > svg {
-  content: "done" !important;
+  overflow: visible;
-  color: var(--md-sys-color-on-primary-container);
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  width: 52px;
+  height: 32px;
 }
-@media (prefers-color-scheme: light) {
+div.m3.m3-switch-exp > svg > g {
-  input[type=checkbox].m3.m3-switch[data-icon=true]::before {
+  transform: translate(11.5%, 81%);
-    color: var(--md-sys-color-on-primary);
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  }
-  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);
-  }
 }
-@media (prefers-color-scheme: dark) {
+div.m3.m3-switch-exp > svg > g > text {
-  input[type=checkbox].m3.m3-switch[data-icon=true]::before {
+  font-family: Material-Symbols-Outlined-Regular;
-    color: var(--md-sys-color-surface-container-high);
+  font-size: 20px;
-  }
-  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);
-  }
 }
-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 {
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
-  transform: scale(150%);
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  content: "close";
+  cy: 50%;
+  cx: 16px;
 }
-input[type=checkbox].m3.m3-switch::before {
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer {
-  z-index: 10;
+  r: 20px;
-  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  fill-opacity: 0;
-  content: "";
-  display: flex;
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-  background-color: var(--md-sys-color-outline);
 }
-input[type=checkbox].m3.m3-switch:checked::before {
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
-  opacity: 1;
+  r: 8px;
-  transform: translateX(125%) scale(150%);
-  background-color: var(--md-sys-color-on-primary);
 }
-input[type=checkbox].m3.m3-switch:hover:checked::after {
+div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
-  transform: translateX(50%);
+  transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+  stroke-width: 2px;
+  border-radius: 16px;
+  rx: 15px;
+  width: 50px;
+  height: 30px;
 }
-input[type=checkbox].m3.m3-switch:hover::after {
+div.m3.m3-switch-exp > input.m3 {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+  cursor: pointer;
+  appearance: none;
+  opacity: 0 !important;
+  margin: 0;
+  width: 52px;
+  height: 32px;
+  position: absolute;
 }
-input[type=checkbox].m3.m3-switch:active:checked::after {
+div.m3.m3-switch-exp > input.m3:disabled {
-  transform: translateX(50%);
+  cursor: not-allowed;
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-input[type=checkbox].m3.m3-switch:active::after {
+div.m3.m3-switch-exp > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  fill: var(--md-sys-color-outline);
 }
-input[type=checkbox].m3.m3-switch:active:checked::before {
+div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
-  transform: translateX(125%) scale(175%);
+  transform: translate(50%, 81%);
-  background-color: var(--md-sys-color-primary-container);
 }
-input[type=checkbox].m3.m3-switch:active::before {
+div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
-  transform: scale(175%);
+  fill: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-on-surface-variant);
 }
-input[type=checkbox].m3.m3-switch:disabled:checked {
+div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
+  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 {
+div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
-  opacity: 0.38;
+  cx: calc(100% - 16px);
-  transform: initial;
-  background-color: var(--md-sys-color-outline) !important;
 }
-input[type=checkbox].m3.m3-switch:disabled:checked::before {
+div.m3.m3-switch-exp > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
-  opacity: 1;
+  opacity: 0;
-  transform: translateX(125%) scale(150%);
+}
-  background-color: var(--md-sys-color-surface) !important;
+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;
+  width: 2.5rem;
-  height: 40px;
+  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;
+  width: 1.125rem;
-  height: 18px;
+  height: 1.125rem;
   margin: 0;
-  border-radius: 2px;
+  outline-offset: -0.14rem;
-  outline-offset: -2px;
+  border-radius: 0.14rem;
-  outline: 2px solid var(--md-sys-color-on-surface-variant);
+  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 {

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)

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);

src/styles/swtich.css

@@ -1,141 +1,149 @@
-input[type=checkbox].m3.m3-switch {
+div.m3.m3-switch-exp {
-  transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  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;
+  width: 52px;
-  font-weight: 500;
+  height: 32px;
-  font-size: 12px;
-  line-height: 12px;
 }
-input[type=checkbox].m3.m3-switch[data-icon=true]:checked::before {
+div.m3.m3-switch-exp > svg {
-  content: "done" !important;
+  overflow: visible;
-  color: var(--md-sys-color-on-primary-container);
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  width: 52px;
+  height: 32px;
 }
-@media (prefers-color-scheme: light) {
+div.m3.m3-switch-exp > svg > g {
-  input[type=checkbox].m3.m3-switch[data-icon=true]::before {
+  transform: translate(11.5%, 81%);
-    color: var(--md-sys-color-on-primary);
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  }
-  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);
-  }
 }
-@media (prefers-color-scheme: dark) {
+div.m3.m3-switch-exp > svg > g > text {
-  input[type=checkbox].m3.m3-switch[data-icon=true]::before {
+  font-family: Material-Symbols-Outlined-Regular;
-    color: var(--md-sys-color-surface-container-high);
+  font-size: 20px;
-  }
-  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);
-  }
 }
-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 {
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
-  transform: scale(150%);
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  content: "close";
+  cy: 50%;
+  cx: 16px;
 }
-input[type=checkbox].m3.m3-switch::before {
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer {
-  z-index: 10;
+  r: 20px;
-  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  fill-opacity: 0;
-  content: "";
-  display: flex;
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-  background-color: var(--md-sys-color-outline);
 }
-input[type=checkbox].m3.m3-switch:checked::before {
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
-  opacity: 1;
+  r: 8px;
-  transform: translateX(125%) scale(150%);
-  background-color: var(--md-sys-color-on-primary);
 }
-input[type=checkbox].m3.m3-switch:hover:checked::after {
+div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
-  transform: translateX(50%);
+  transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+  stroke-width: 2px;
+  border-radius: 16px;
+  rx: 15px;
+  width: 50px;
+  height: 30px;
 }
-input[type=checkbox].m3.m3-switch:hover::after {
+div.m3.m3-switch-exp > input.m3 {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+  cursor: pointer;
+  appearance: none;
+  opacity: 0 !important;
+  margin: 0;
+  width: 52px;
+  height: 32px;
+  position: absolute;
 }
-input[type=checkbox].m3.m3-switch:active:checked::after {
+div.m3.m3-switch-exp > input.m3:disabled {
-  transform: translateX(50%);
+  cursor: not-allowed;
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-input[type=checkbox].m3.m3-switch:active::after {
+div.m3.m3-switch-exp > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  fill: var(--md-sys-color-outline);
 }
-input[type=checkbox].m3.m3-switch:active:checked::before {
+div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
-  transform: translateX(125%) scale(175%);
+  transform: translate(50%, 81%);
-  background-color: var(--md-sys-color-primary-container);
 }
-input[type=checkbox].m3.m3-switch:active::before {
+div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
-  transform: scale(175%);
+  fill: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-on-surface-variant);
 }
-input[type=checkbox].m3.m3-switch:disabled:checked {
+div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
+  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 {
+div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
-  opacity: 0.38;
+  cx: calc(100% - 16px);
-  transform: initial;
-  background-color: var(--md-sys-color-outline) !important;
 }
-input[type=checkbox].m3.m3-switch:disabled:checked::before {
+div.m3.m3-switch-exp > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
-  opacity: 1;
+  opacity: 0;
-  transform: translateX(125%) scale(150%);
-  background-color: var(--md-sys-color-surface) !important;
 }
-
+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 {
-@keyframes toggle-shifting {
+  r: 14px;
-  50% {
+}
-    width: 30px;
+div.m3.m3-switch-exp > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
-  }
+  fill: var(--md-sys-color-on-surface);
-  100% {
+  fill-opacity: 38%;
-    width: 16px;
+}
-  }
+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 */

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"}
+{"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"}

src/styles/swtich.sass

@@ -1,133 +1,157 @@
-input[type="checkbox"].m3.m3-switch
+div.m3.m3-switch-exp
-    transition: background-color .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    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
+    & > svg
-        border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+        overflow: visible
-        background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent)
+        transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+        width: 52px
+        height: 32px
 
-    &:checked
+        & > g
-        border: 2px solid #00000000
+            transform: translate(11.5%, 81%)
-        background-color: var(--md-sys-color-primary)
+            transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+            & > text
+                font-family: Material-Symbols-Outlined-Regular
+                font-size: 20px
 
-    &::after
+        & > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
-        transition: color, background-color, opacity, .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+            transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
-        z-index: 9
+            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
+        &:disabled
-        transform: translateX(50%)
+            cursor: not-allowed
 
-    &:checked::after, &::after, &:checked::before, &::before
+        &:not(:checked, :disabled) + svg
-        transform-origin: center
+            & > circle.m3.m3-switch-handler
+                fill: var(--md-sys-color-outline)
 
-    &:is([data-icon=true], [data-icon=true]:checked)::before
+        &:checked:not(:disabled) + svg
-        font-family: Material-Symbols-Outlined-Regular, sans-serif
+            & > g
-        align-items: center
+                transform: translate(50%, 81%)
-        justify-content: center
-        text-align: center
-        font-weight: 500
-        font-size: 12px
-        line-height: 12px
 
-    &[data-icon=true]:checked::before
+            & > circle.m3.m3-switch-handler
-        content: "done" !important
+                fill: var(--md-sys-color-on-primary)
-        color: var(--md-sys-color-on-primary-container)
 
-    @media (prefers-color-scheme: light)
+        &:not(:disabled) + svg
-        &[data-icon=true]::before
+            & > g > text.m3.m3-icon-unchecked
-            color: var(--md-sys-color-on-primary)
+                fill: 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)
 
-    @media (prefers-color-scheme: dark)
+            & > g > text.m3.m3-icon-checked
-        &[data-icon=true]::before
+                fill: var(--md-sys-color-on-primary-container)
-            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)
 
-    &[data-icon=true]:where([data-selected=false])::before,
+        &:checked:disabled + svg > circle.m3.m3-switch-handler
-    &[data-icon=true]:where([data-selected=false]):disabled::before
+            fill: var(--md-sys-color-surface)
-        transform: scale(150%)
-        content: "close"
 
-    &::before
+        &:checked + svg > circle.m3.m3-switch-handler,
-        z-index: 10
+        & + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
-        transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+            r: 12px
-        content: ""
-        display: flex
-        height: 16px
-        width: 16px
-        border-radius: 50%
-        background-color: var(--md-sys-color-outline)
 
-    &:checked::before
+        &:checked + svg
-        opacity: 1
+            & > g > text.m3.m3-icon-unchecked
-        transform: translateX(125%) scale(150%)
+                opacity: 0
-        background-color: var(--md-sys-color-on-primary)
 
-    &:hover
+            & > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer)
-        &:checked::after
+                cx: calc(100% - 16px)
-            transform: translateX(50%)
-            background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
 
-        &::after
+        &:not(:checked) + svg
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
+            & > g > text.m3.m3-icon-checked
+                opacity: 0
 
-    &:active
+        &:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler
-        &:checked::after
+            r: 14px
-            transform: translateX(50%)
-            background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
 
-        &::after
+        &:not(:checked):disabled + svg > circle.m3.m3-switch-handler
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+            fill: var(--md-sys-color-on-surface)
+            fill-opacity: 38%
 
-        &:checked::before
+        &:hover:not(:disabled)
-            transform: translateX(125%) scale(175%)
+            &:checked + svg
-            background-color: var(--md-sys-color-primary-container)
+                & > circle.m3.m3-switch-handler
+                    fill: var(--md-sys-color-primary-container)
 
-        &::before
+                & > circle.m3.m3-switch-handler-state-layer
-            transform: scale(175%)
+                    fill: var(--md-sys-color-primary)
-            background-color: var(--md-sys-color-on-surface-variant)
+                    fill-opacity: 8%
 
-    &:disabled
+            &:not(:checked) + svg
-        &:checked
+                & > circle.m3.m3-switch-handler
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
+                    fill: var(--md-sys-color-on-surface-variant)
 
-        &:checked::after, &::after
+                & > circle.m3.m3-switch-handler-state-layer
-            opacity: 0
+                    fill: var(--md-sys-color-on-surface)
+                    fill-opacity: 8%
 
-        &::before
+        &:active:not(:disabled)
-            opacity: 0.38
+            &:checked + svg > circle.m3.m3-switch-handler-state-layer
-            transform: initial
+                fill: var(--md-sys-color-primary)
-            background-color: var(--md-sys-color-outline) !important
+                fill-opacity: 12%
 
-        &:checked::before
+            &:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
-            opacity: 1
+                fill: var(--md-sys-color-on-surface)
-            transform: translateX(125%) scale(150%)
+                fill-opacity: 12%
-            background-color: var(--md-sys-color-surface) !important
 
-@keyframes toggle-shifting
+        &:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
-    50%
+            rx: 16px
-        width: 30px
+            width: 52px
-    100%
+            height: 32px
-        width: 16px
+            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)