From f39f3025550a8a3c9644eb51cd8349b4e705c6c5 Mon Sep 17 00:00:00 2001
From: doryan04 <sagiev2015@yandex.ru>
Date: Fri, 2 Feb 2024 00:30:13 +0400
Subject: [PATCH] CHANGED: Some stuff changed in switch, Radio now is SVG

---
 .../icon-button/icon-button.tsx               |   9 +-
 src/primitive-components/radio/radio.tsx      |  18 +-
 src/primitive-components/switch/switch.tsx    |   2 +-
 src/styles/generics.css                       | 994 +++++-------------
 src/styles/generics.css.map                   |   2 +-
 src/styles/radio.sass                         | 120 ++-
 src/styles/swtich.css                         |  84 +-
 src/styles/swtich.sass                        |   2 +-
 8 files changed, 378 insertions(+), 853 deletions(-)

diff --git a/src/primitive-components/icon-button/icon-button.tsx b/src/primitive-components/icon-button/icon-button.tsx
index bae5e25..e70a67b 100644
--- a/src/primitive-components/icon-button/icon-button.tsx
+++ b/src/primitive-components/icon-button/icon-button.tsx
@@ -3,14 +3,7 @@
 import { Icon } from '../components';
 import { ButtonLayout } from '../button-layout/button-layout';
 import { IconButtonProps, StateToggleIconType } from './icon-button.types';
-import {
-    forwardRef,
-    MouseEventHandler,
-    useCallback,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
 /**
  * Icon button-layout component
diff --git a/src/primitive-components/radio/radio.tsx b/src/primitive-components/radio/radio.tsx
index c6b662f..5661fbb 100644
--- a/src/primitive-components/radio/radio.tsx
+++ b/src/primitive-components/radio/radio.tsx
@@ -18,12 +18,24 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
             events = useRippleEffect(ripplesRef, setIsActive);
 
         const classes =
-            `m3 m3-radio-label ${isActive === true ? 'visible' : ''}`.trimEnd();
+            `m3 m3-radio ${isActive === true ? 'visible' : ''}`.trimEnd();
 
         return (
-            <label {...events} className={classes}>
+            <div {...events} className={classes}>
                 <CheckBoxLayout {...props} ref={ref} type={'radio'} />
                 <span className={'m3 m3-radio-state-layer'} />
+                <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
+                    <circle
+                        className={'m3-radio-outline'}
+                        cx={'50%'}
+                        cy={'50%'}
+                    />
+                    <circle
+                        className={'m3-radio-state'}
+                        cx={'50%'}
+                        cy={'50%'}
+                    />
+                </svg>
                 <RippleArea
                     callback={setIsActive}
                     central={centralRipple}
@@ -31,7 +43,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
                     ref={ripplesRef}
                 />
                 {props.children}
-            </label>
+            </div>
         );
     },
 );
diff --git a/src/primitive-components/switch/switch.tsx b/src/primitive-components/switch/switch.tsx
index 6c0e907..df56e08 100644
--- a/src/primitive-components/switch/switch.tsx
+++ b/src/primitive-components/switch/switch.tsx
@@ -11,7 +11,7 @@ import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
 
 export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
     ({ icon, disabled, selected = false, ...props }, ref) => (
-        <div className={'m3 m3-switch-exp'}>
+        <div className={'m3 m3-switch'}>
             <CheckBoxLayout
                 {...props}
                 className={`m3 ${props.className ?? ''}`.trimEnd()}
diff --git a/src/styles/generics.css b/src/styles/generics.css
index 9508c00..8782749 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -4,10 +4,7 @@
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark);
 @import "./themes/theme.light.css" (prefers-color-scheme: light);
 button.m3.m3-fab {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
 }
 button.m3.m3-fab > span.m3-icon {
   font-family: Material-Symbols-Outlined-Regular, sans-serif;
@@ -24,10 +21,7 @@ button.m3.m3-fab.m3 {
   gap: 12px;
 }
 button.m3.m3-fab::before {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
   content: "";
   top: 0;
   bottom: 0;
@@ -41,9 +35,7 @@ button.m3.m3-fab.surface {
   color: var(--md-sys-color-primary);
 }
 button.m3.m3-fab.surface:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 button.m3.m3-fab.surface > svg.m3-svg-icon {
   fill: var(--md-sys-color-primary);
@@ -56,57 +48,39 @@ button.m3.m3-fab.primary {
   color: var(--md-sys-color-on-primary-container);
 }
 button.m3.m3-fab.primary:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 button.m3.m3-fab.primary > svg.m3-svg-icon {
   fill: var(--md-sys-color-on-primary-container);
 }
 button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary-container) 12%,
-    transparent
-  );
+  background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
 }
 button.m3.m3-fab.secondary {
   background-color: var(--md-sys-color-secondary-container);
   color: var(--md-sys-color-on-secondary-container);
 }
 button.m3.m3-fab.secondary:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 button.m3.m3-fab.secondary > svg.m3-svg-icon {
   fill: var(--md-sys-color-on-secondary-container);
 }
 button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button.m3.m3-fab.tertiary {
   background-color: var(--md-sys-color-tertiary-container);
   color: var(--md-sys-color-on-tertiary-container);
 }
 button.m3.m3-fab.tertiary:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 button.m3.m3-fab.tertiary > svg.m3-svg-icon {
   fill: var(--md-sys-color-on-tertiary-container);
 }
 button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-tertiary-container) 12%,
-    transparent
-  );
+  background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
 }
 button.m3.m3-fab.m3-small-fab {
   width: 40px;
@@ -136,81 +110,35 @@ button.m3.m3-fab.m3-extended-fab {
   padding: 19px;
   font-size: 24px;
 }
-button.m3.m3-fab:not(.without-elevation):is(
-    .surface,
-    .primary,
-    .secondary,
-    .tertiary
-  ):hover {
-  box-shadow:
-    0 2px 3px 0 rgba(0, 0, 0, 0.3),
-    0 6px 10px 4px rgba(0, 0, 0, 0.15);
+button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover {
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
 }
-button.m3.m3-fab:not(.without-elevation):is(
-    .surface,
-    .primary,
-    .secondary,
-    .tertiary
-  ):active {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
+button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
 }
 button.m3.m3-fab:hover.surface::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
 button.m3.m3-fab:hover.primary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary-container) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent);
 }
 button.m3.m3-fab:hover.secondary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
 }
 button.m3.m3-fab:hover.tertiary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-tertiary-container) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent);
 }
 button.m3.m3-fab:focus-visible.surface::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
 button.m3.m3-fab:focus-visible.primary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary-container) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
 }
 button.m3.m3-fab:focus-visible.secondary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button.m3.m3-fab:focus-visible.tertiary::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-tertiary-container) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
 }
 
 svg.m3.m3-svg-icon > text {
@@ -281,118 +209,93 @@ svg.m3.m3-svg-icon > text.m3-Sharp {
   font-family: Material-Symbols-Sharp-Regular;
 }
 
-label.m3.m3-radio-label {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 1;
-}
-label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
-  position: absolute;
-  width: 2.5rem;
-  aspect-ratio: inherit;
-  border-radius: 50%;
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-
-input[type="radio"].m3.m3-radio {
-  appearance: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
+div.m3.m3-radio {
   width: 20px;
-  margin: 0;
-  aspect-ratio: inherit;
-  border-radius: 50%;
-  border: 2px solid var(--md-sys-color-on-surface-variant);
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
+  height: 20px;
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
 }
-input[type="radio"].m3.m3-radio::after {
-  content: "";
-  width: 10px;
+div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
+  z-index: 5;
+}
+div.m3.m3-radio > span.m3.m3-radio-state-layer {
+  width: 40px;
   aspect-ratio: 1;
   border-radius: 50%;
+  position: absolute;
+  pointer-events: none;
+  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
-input[type="radio"].m3.m3-radio:disabled {
-  border: 2px solid
-    color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+div.m3.m3-radio > input[type=radio].m3.m3-radio {
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  aspect-ratio: 1;
+  cursor: pointer;
+  appearance: none;
+  position: absolute;
 }
-input[type="radio"].m3.m3-radio:checked {
-  border: 2px solid var(--md-sys-color-primary);
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
-input[type="radio"].m3.m3-radio:checked::after {
-  background-color: var(--md-sys-color-primary);
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-input[type="radio"].m3.m3-radio:checked:disabled {
-  border: 2px solid
-    color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
 }
-input[type="radio"].m3.m3-radio:checked:disabled::after {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 38%,
-    transparent
-  );
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
 }
-input[type="radio"].m3.m3-radio:not(:disabled):checked:hover
-  + span.m3.m3-radio-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 8%,
-    transparent
-  );
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
-input[type="radio"].m3.m3-radio:not(:disabled):is(
-    :checked:active,
-    :indeterminate:active
-  )
-  + span.m3.m3-radio-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
 }
-input[type="radio"].m3.m3-radio:not(:disabled):is(
-    :checked:active,
-    :indeterminate:active
-  )
-  + span.m3.m3-radio-state-layer
-  + span.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 20%,
-    transparent
-  );
+div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
+  stroke-opacity: 38%;
+  stroke: var(--md-sys-color-on-surface);
 }
-input[type="radio"].m3.m3-radio:not(:disabled):hover
-  + span.m3.m3-radio-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 8%,
-    transparent
-  );
+div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
+  fill-opacity: 38%;
+  fill: var(--md-sys-color-on-surface);
 }
-input[type="radio"].m3.m3-radio:not(:disabled):active
-  + span.m3.m3-radio-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 12%,
-    transparent
-  );
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
+  stroke: var(--md-sys-color-on-surface-variant);
 }
-input[type="radio"].m3.m3-radio:not(:disabled):active
-  + span.m3.m3-radio-state-layer
-  + span.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 20%,
-    transparent
-  );
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
+  fill-opacity: 0;
+  fill: var(--md-sys-color-primary);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
+  stroke: var(--md-sys-color-primary);
+}
+div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
+  fill-opacity: 1;
+  fill: var(--md-sys-color-primary);
+}
+div.m3.m3-radio svg {
+  margin: 0;
+  width: 20px;
+  z-index: 10;
+  border-radius: 50%;
+  pointer-events: none;
+  aspect-ratio: inherit;
+}
+div.m3.m3-radio svg > circle {
+  transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-radio svg > circle.m3-radio-outline {
+  r: 9px;
+  fill: black;
+  fill-opacity: 0;
+  stroke-width: 2px;
+  stroke: var(--md-sys-color-on-surface-variant);
+}
+div.m3.m3-radio svg > circle.m3-radio-state {
+  r: 5px;
 }
 
 svg.m3.m3-badge {
@@ -428,20 +331,17 @@ svg.m3.m3-badge > text {
 @font-face {
   font-family: Material-Symbols-Rounded-Regular;
   src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
-    format("woff2");
+  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
 }
 @font-face {
   font-family: Material-Symbols-Outlined-Regular;
   src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2")
-    format("woff2");
+  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2");
 }
 @font-face {
   font-family: Material-Symbols-Sharp-Regular;
   src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2")
-    format("woff2");
+  src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
 }
 @font-face {
   font-family: Roboto;
@@ -480,10 +380,7 @@ svg.m3.m3-badge > text {
   src: url("./font/Roboto-Black.ttf");
 }
 button:not(.m3-fab, .m3-icon-button) {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
   font-family: var(--md-sys-typescale-label-large-font-family-name);
   font-size: var(--md-sys-typescale-label-large-font-size);
   font-weight: var(--md-sys-typescale-label-large-font-weight);
@@ -506,8 +403,7 @@ button:not(.m3-fab, .m3-icon-button).m3 {
 button:not(.m3-fab, .m3-icon-button).filled {
   background-color: var(--md-sys-color-primary);
 }
-button:not(.m3-fab, .m3-icon-button).filled,
-button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
+button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
   color: var(--md-sys-color-on-primary);
   fill: var(--md-sys-color-on-primary);
 }
@@ -529,9 +425,7 @@ button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
   fill: var(--md-sys-color-primary);
 }
 button:not(.m3-fab, .m3-icon-button).elevated {
-  box-shadow:
-    0 1px 3px 1px rgba(0, 0, 0, 0.15),
-    0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   background-color: var(--md-sys-color-surface-container-low);
   color: var(--md-sys-color-primary);
 }
@@ -546,10 +440,7 @@ button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
   fill: var(--md-sys-color-on-secondary-container);
 }
 button:not(.m3-fab, .m3-icon-button)::before {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
   content: "";
   top: 0;
   bottom: 0;
@@ -558,130 +449,65 @@ button:not(.m3-fab, .m3-icon-button)::before {
   position: absolute;
   background: rgba(0, 0, 0, 0);
 }
-button:not(.m3-fab, .m3-icon-button).filled
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 12%,
-    transparent
-  );
+button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
+  background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
 }
-button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated)
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
+button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
   background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
   box-shadow: none !important;
 }
 button:not(.m3-fab, .m3-icon-button):active.elevated {
-  box-shadow:
-    0 1px 3px 1px rgba(0, 0, 0, 0.15),
-    0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
 }
 button:not(.m3-fab, .m3-icon-button):active.tonal::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
   border-color: var(--md-sys-color-primary) !important;
 }
 button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
 }
-button:not(.m3-fab, .m3-icon-button):focus-visible:is(
-    .outlined,
-    .text,
-    .elevated
-  )::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
+button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
-  box-shadow:
-    0 1px 3px 1px rgba(0, 0, 0, 0.15),
-    0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 button:not(.m3-fab, .m3-icon-button):hover.elevated {
-  box-shadow:
-    0 2px 6px 2px rgba(0, 0, 0, 0.15),
-    0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 button:not(.m3-fab, .m3-icon-button):hover.filled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
 }
-button:not(.m3-fab, .m3-icon-button):hover:is(
-    .outlined,
-    .text,
-    .elevated
-  )::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 8%,
-    transparent
-  );
+button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):disabled {
   pointer-events: none;
 }
-button:not(.m3-fab, .m3-icon-button):disabled:is(
-    .filled,
-    .elevated,
-    .tonal,
-    .outlined,
-    .text
-  ) {
+button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
   color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
-  background: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 12%,
-    transparent
-  );
+  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 button:not(.m3-fab, .m3-icon-button):disabled.elevated {
   box-shadow: none;
 }
 button:not(.m3-fab, .m3-icon-button):disabled.outlined {
-  outline: 1px solid
-    color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
+  outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
 }
 
 .m3.m3-ripple-domain {
@@ -704,11 +530,7 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined {
   animation-name: rippleAppearanceAnimation;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   animation-duration: 0.55s;
-  transition:
-    opacity,
-    background,
-    background-color,
-    0.55s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity, background, background-color, 0.55s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .m3.ripple.visible {
   opacity: 1 !important;
@@ -722,7 +544,7 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined {
     transform: scale3d(1, 1, 1);
   }
 }
-div.m3.m3-switch-exp {
+div.m3.m3-switch {
   margin: 4px;
   box-sizing: content-box;
   display: flex;
@@ -731,34 +553,33 @@ div.m3.m3-switch-exp {
   width: 52px;
   height: 32px;
 }
-div.m3.m3-switch-exp > svg {
+div.m3.m3-switch > svg {
   overflow: visible;
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   width: 52px;
   height: 32px;
 }
-div.m3.m3-switch-exp > svg > g {
+div.m3.m3-switch > svg > g {
   transform: translate(11.5%, 81%);
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-div.m3.m3-switch-exp > svg > g > text {
+div.m3.m3-switch > svg > g > text {
   font-family: Material-Symbols-Outlined-Regular;
   font-size: 20px;
 }
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer,
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   cy: 50%;
   cx: 16px;
 }
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
   r: 20px;
   fill-opacity: 0;
 }
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
   r: 8px;
 }
-div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > 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;
@@ -766,7 +587,7 @@ div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
   width: 50px;
   height: 30px;
 }
-div.m3.m3-switch-exp > input.m3 {
+div.m3.m3-switch > input.m3 {
   cursor: pointer;
   appearance: none;
   opacity: 0 !important;
@@ -775,173 +596,98 @@ div.m3.m3-switch-exp > input.m3 {
   height: 32px;
   position: absolute;
 }
-div.m3.m3-switch-exp > input.m3:disabled {
+div.m3.m3-switch > input.m3:disabled {
   cursor: not-allowed;
 }
-div.m3.m3-switch-exp
-  > input.m3:not(:checked, :disabled)
-  + svg
-  > circle.m3.m3-switch-handler {
+div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-outline);
 }
-div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
+div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
   transform: translate(50%, 81%);
 }
-div.m3.m3-switch-exp
-  > input.m3:checked:not(:disabled)
-  + svg
-  > circle.m3.m3-switch-handler {
+div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch-exp
-  > input.m3:not(:disabled)
-  + svg
-  > g
-  > text.m3.m3-icon-unchecked {
+div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
   fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch-exp
-  > input.m3:not(:disabled)
-  + svg
-  > g
-  > text.m3.m3-icon-checked {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > 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 {
+div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
   opacity: 0;
 }
-div.m3.m3-switch-exp
-  > input.m3:checked
-  + svg
-  > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
+div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
   cx: calc(100% - 16px);
 }
-div.m3.m3-switch-exp
-  > input.m3:not(:checked)
-  + svg
-  > g
-  > text.m3.m3-icon-checked {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:checked, div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:not(:checked), div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 > 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 {
+div.m3.m3-switch > 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
-  );
+  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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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);
 }
@@ -957,8 +703,7 @@ hr.m3.m3-divider {
 hr.m3.m3-divider.vertical {
   writing-mode: tb-rl;
 }
-hr.m3.m3-divider.vertical,
-hr.m3.m3-divider.vertical.full-width {
+hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.full-width {
   height: 100%;
 }
 hr.m3.m3-divider.vertical.inset {
@@ -968,8 +713,7 @@ hr.m3.m3-divider.vertical.inset {
 hr.m3.m3-divider.vertical.middle-inset {
   height: calc(100% - 32px);
 }
-hr.m3.m3-divider.horizontal,
-hr.m3.m3-divider.horizontal.full-width {
+hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.full-width {
   width: 100%;
 }
 hr.m3.m3-divider.horizontal.inset {
@@ -1004,7 +748,7 @@ span.m3.m3-checkbox-ripple-layer {
   height: 2.5rem;
 }
 
-input[type="checkbox"].m3.m3-checkbox {
+input[type=checkbox].m3.m3-checkbox {
   appearance: none;
   display: flex;
   align-items: center;
@@ -1019,154 +763,67 @@ input[type="checkbox"].m3.m3-checkbox {
   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)
-  ) {
+input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
   outline-color: var(--md-sys-color-error);
   background-color: var(--md-sys-color-error);
 }
-input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
+input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
   outline-color: var(--md-sys-color-error);
 }
-input[type="checkbox"].m3.m3-checkbox:is(
-    :checked:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
-        .m3.m3-error,
-        :disabled
-      ),
-    :indeterminate:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
-        .m3.m3-error,
-        :disabled
-      )
-  ) {
+input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
   outline-color: var(--md-sys-color-primary);
   background-color: var(--md-sys-color-primary);
 }
-input[type="checkbox"].m3.m3-checkbox:disabled:is(
-    :hover,
-    input[type="checkbox"].m3.m3-checkbox:disabled
-  ) {
+input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
   opacity: 38%;
   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
-  ) {
+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 {
+input[type=checkbox].m3.m3-checkbox::after {
   line-height: 1.125rem;
   font-family: Material-Symbols-Outlined-Regular, sans-serif;
   font-weight: 700;
   font-size: 1.125rem;
   color: var(--md-sys-color-on-primary);
 }
-input[type="checkbox"].m3.m3-checkbox:checked::after {
+input[type=checkbox].m3.m3-checkbox:checked::after {
   content: "done";
 }
-input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
+input[type=checkbox].m3.m3-checkbox:indeterminate::after {
   content: "check_indeterminate_small";
 }
-input[type="checkbox"].m3.m3-checkbox:hover {
+input[type=checkbox].m3.m3-checkbox:hover {
   outline-color: var(--md-sys-color-on-surface);
 }
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :user-invalid:is(:hover, :indeterminate:hover),
-    .m3.m3-error:hover
-  )
-  + span.m3.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-error) 8%,
-    transparent
-  );
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) + span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
 }
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :user-invalid:is(:active, :indeterminate:active),
-    .m3.m3-error:active
-  )
-  + span.m3.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-error) 12%,
-    transparent
-  );
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
 }
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :user-invalid:is(:active, :indeterminate:active),
-    .m3.m3-error:active
-  )
-  + span.m3.m3-checkbox-state-layer
-  + span.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-error) 20%,
-    transparent
-  );
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent);
 }
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :checked:hover,
-    :indeterminate:hover
-  )
-  + span.m3.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 8%,
-    transparent
-  );
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :checked:active,
-    :indeterminate:active
-  )
-  + span.m3.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-    :checked:active,
-    :indeterminate:active
-  )
-  + span.m3.m3-checkbox-state-layer
-  + span.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 20%,
-    transparent
-  );
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
 }
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover
-  + span.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 8%,
-    transparent
-  );
+input[type=checkbox].m3.m3-checkbox:not(:disabled):hover + span.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
 }
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
-  + span.m3.m3-checkbox-state-layer {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 12%,
-    transparent
-  );
+input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
-input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
-  + span.m3.m3-checkbox-state-layer
-  + span.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 20%,
-    transparent
-  );
+input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
 }
 
 div.m3.m3-text-field {
@@ -1180,9 +837,7 @@ div.m3.m3-text-field {
 div.m3.m3-text-field span.m3-icon.icon-before {
   align-self: start;
 }
-div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder,
-div.m3.m3-text-field > input,
-div.m3.m3-text-field > label {
+div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label {
   line-height: var(--md-sys-typescale-body-large-line-height);
   font-size: var(--md-sys-typescale-body-large-font-size);
 }
@@ -1225,8 +880,7 @@ div.m3.m3-text-field > span.m3-text-field-state-layer {
   pointer-events: none;
   position: absolute;
 }
-div.m3.m3-text-field > input,
-div.m3.m3-text-field > label {
+div.m3.m3-text-field > input, div.m3.m3-text-field > label {
   color: var(--md-sys-color-on-surface);
 }
 div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
@@ -1236,9 +890,7 @@ div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
   outline: none;
   caret-color: var(--md-sys-color-primary);
 }
-div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *,
-div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled)
-  + span.m3-text-field-supporting-text {
+div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text {
   opacity: 38%;
 }
 div.m3.m3-text-field.filled {
@@ -1282,10 +934,7 @@ div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
 div.m3.m3-text-field.filled > input:required:user-invalid {
   box-shadow: inset 0 -1px 0 var(--md-sys-color-error);
 }
-div.m3.m3-text-field.filled:has(input:required:user-invalid)
-  > *:not(input):nth-last-child(-n + 3),
-div.m3.m3-text-field.filled:has(input:required:user-invalid)
-  + span.m3-text-field-supporting-text {
+div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
   color: var(--md-sys-color-error);
 }
 div.m3.m3-text-field.filled > input:focus-visible {
@@ -1295,15 +944,9 @@ div.m3.m3-text-field.filled > input:focus-visible {
 div.m3.m3-text-field.filled > input:focus-visible + label {
   color: var(--md-sys-color-primary);
 }
-div.m3.m3-text-field.filled:hover
-  > input:not(:disabled)
-  ~ span.m3-text-field-state-layer {
+div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
   transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
 }
 div.m3.m3-text-field.outlined > fieldset {
   margin: 0;
@@ -1355,22 +998,14 @@ div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
 div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
   border: 3px solid var(--md-sys-color-primary);
 }
-div.m3.m3-text-field.outlined:not(
-    div.m3.m3-text-field.outlined:has(label.raised)
-  ):has(input:focus-visible)
-  > fieldset
-  > legend {
+div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend {
   border-top-width: 0;
   border-bottom-width: 0;
   border-inline-width: 5.5px;
   border-style: solid;
   border-color: transparent;
 }
-div.m3.m3-text-field.outlined:not(
-    div.m3.m3-text-field.outlined:has(input:focus-visible)
-  ):has(label.raised)
-  > fieldset
-  > legend {
+div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend {
   border-top-width: 0;
   border-bottom-width: 0;
   border-inline-width: 7.5px;
@@ -1380,8 +1015,7 @@ div.m3.m3-text-field.outlined:not(
 div.m3.m3-text-field.outlined > input:focus-visible + label {
   color: var(--md-sys-color-primary);
 }
-div.m3.m3-text-field.outlined > label.raised,
-div.m3.m3-text-field.outlined > fieldset > * {
+div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * {
   line-height: var(--md-sys-typescale-body-small-line-height);
   font-size: var(--md-sys-typescale-body-small-font-size);
 }
@@ -1391,39 +1025,22 @@ div.m3.m3-text-field.outlined > label.raised {
 div.m3.m3-text-field.outlined > input:required:user-invalid {
   caret-color: var(--md-sys-color-error);
 }
-div.m3.m3-text-field.outlined:has(input:required:user-invalid)
-  > *:not(input):nth-last-child(-n + 3),
-div.m3.m3-text-field.outlined:has(input:required:user-invalid)
-  + span.m3-text-field-supporting-text {
+div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
   color: var(--md-sys-color-error);
 }
 div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
   border: 3px solid var(--md-sys-color-error);
 }
-div.m3.m3-text-field.outlined:has(
-    input:required:user-invalid:not(:focus-visible)
-  )
-  > fieldset {
+div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset {
   border: 1px solid var(--md-sys-color-error);
 }
-div.m3.m3-text-field.outlined:hover:not(
-    div.m3.m3-text-field.outlined:hover:has(
-        input:disabled,
-        input:focus-visible,
-        label.raised,
-        input:required:user-invalid
-      )
-  )
-  > fieldset {
+div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset {
   transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
   border-color: var(--md-sys-color-on-surface);
 }
 
 button.m3.m3-icon-button {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
   contain: content;
   border-radius: 50%;
   position: relative;
@@ -1437,10 +1054,7 @@ button.m3.m3-icon-button {
   padding: 0;
 }
 button.m3.m3-icon-button::before {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
   content: "";
   width: 100%;
   height: 100%;
@@ -1449,24 +1063,14 @@ button.m3.m3-icon-button::before {
 button.m3.m3-icon-button > span.m3-icon {
   z-index: 25;
   font-size: 2em;
-  font-variation-settings:
-    "FILL" 0,
-    "wght" 500,
-    "GRAD" 0,
-    "opsz" 48;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
 }
 button.m3.m3-icon-button.default {
   fill: var(--md-sys-color-on-surface-variant);
   background-color: rgba(0, 0, 0, 0);
 }
-button.m3.m3-icon-button.default:disabled,
-button.m3.m3-icon-button.default.selected:disabled,
-button.m3.m3-icon-button.default.selected.toggled:disabled {
-  fill: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 38%,
-    transparent
-  );
+button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
   background-color: rgba(0, 0, 0, 0);
 }
 button.m3.m3-icon-button.default.selected.toggled {
@@ -1488,18 +1092,13 @@ button.m3.m3-icon-button.tonal.toggled {
   fill: var(--md-sys-color-on-surface-variant);
   background-color: var(--md-sys-color-surface-container-highest);
 }
-button.m3.m3-icon-button.tonal.selected.toggled,
-button.m3.m3-icon-button.tonal {
+button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
   fill: var(--md-sys-color-on-secondary-container);
   background-color: var(--md-sys-color-secondary-container);
 }
 button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
   fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 button.m3.m3-icon-button.outlined {
   border: 1px solid var(--md-sys-color-outline);
@@ -1507,183 +1106,70 @@ button.m3.m3-icon-button.outlined {
   background-color: rgba(0, 0, 0, 0);
 }
 button.m3.m3-icon-button.outlined:disabled {
-  border: 1px solid
-    color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
-  fill: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 38%,
-    transparent
-  );
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
   background-color: rgba(0, 0, 0, 0);
 }
 button.m3.m3-icon-button.outlined.toggled.selected:disabled {
-  border: 1px solid
-    color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
   fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 button.m3.m3-icon-button.outlined.selected.toggled {
   border: 1px solid rgba(0, 0, 0, 0);
   background-color: var(--md-sys-color-inverse-surface);
   fill: var(--md-sys-color-inverse-on-surface);
 }
-button.m3.m3-icon-button.filled:not(:disabled)
-  > .m3.m3-ripple-domain
-  > .m3.ripple,
-button.m3.m3-icon-button.filled:not(:disabled).selected.toggled
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 12%,
-    transparent
-  );
+button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
 }
-button.m3.m3-icon-button.filled:not(:disabled).toggled
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
+button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled)
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 12%,
-    transparent
-  );
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
 }
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
-    .outlined
-  ).toggled.selected
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
-    .default
-  ).toggled.selected
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-inverse-on-surface) 12%,
-    transparent
-  );
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
 }
-button.m3.m3-icon-button.tonal:not(:disabled)
-  > .m3.m3-ripple-domain
-  > .m3.ripple,
-button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
+button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
-button.m3.m3-icon-button.tonal:not(:disabled).toggled
-  > .m3.m3-ripple-domain
-  > .m3.ripple {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 12%,
-    transparent
-  );
+button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
 }
 button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
 }
-button.m3.m3-icon-button:hover:not(:disabled).filled::before,
-button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 8%,
-    transparent
-  );
+button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
 }
 button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
-button.m3.m3-icon-button:hover:not(:disabled).tonal::before,
-button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 8%,
-    transparent
-  );
+button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
 }
 button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 8%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
 }
-button.m3.m3-icon-button:focus-visible:not(:disabled):is(
-    .default,
-    .outlined
-  )::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 12%,
-    transparent
-  );
+button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
 }
-button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before,
-button.m3.m3-icon-button:focus-visible:not(
-    :disabled
-  ).filled.toggled.selected::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-primary) 12%,
-    transparent
-  );
+button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
 }
 button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-primary) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before,
-button.m3.m3-icon-button:focus-visible:not(
-    :disabled
-  ).tonal.toggled.selected::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
+button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
-  background-color: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 12%,
-    transparent
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
 }
 
 html {
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index ba42a68..55047b7 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;;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
+{"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;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC5FhB;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/radio.sass b/src/styles/radio.sass
index 26cdfdc..a28fb13 100644
--- a/src/styles/radio.sass
+++ b/src/styles/radio.sass
@@ -1,59 +1,93 @@
 @import "mixins/m3-mixins"
 
-label.m3.m3-radio-label
-    @include m3-label-mixin
-    & > span.m3.m3-radio-state-layer
-        @include m3-state-layer-mixin
-
-input[type="radio"].m3.m3-radio
-    appearance: none
-    display: flex
-    align-items: center
-    justify-content: center
-    z-index: 10
+div.m3.m3-radio
     width: 20px
-    margin: 0
-    aspect-ratio: inherit
-    border-radius: 50%
-    border: 2px solid var(--md-sys-color-on-surface-variant)
-    transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
+    height: 20px
+    align-items: center
+    display: inline-flex
+    justify-content: center
 
-    &::after
-        content: ""
-        width: 10px
+    & > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
+        z-index: 5
+
+    & > span.m3.m3-radio-state-layer
+        width: 40px
         aspect-ratio: 1
         border-radius: 50%
+        position: absolute
+        pointer-events: none
+        transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
-    &:disabled
-        border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
+    & > input[type="radio"].m3.m3-radio
+        margin: 0
+        width: 20px
+        height: 20px
+        aspect-ratio: 1
+        cursor: pointer
+        appearance: none
+        position: absolute
 
-    &:checked
-        border: 2px solid var(--md-sys-color-primary)
+        &:not(:disabled)
+            &:checked:hover + span.m3.m3-radio-state-layer
+                background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
 
-    &:checked::after
-        background-color: var(--md-sys-color-primary)
+            &:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
+                background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
+                & ~ span.m3-ripple-domain > .m3.ripple
+                    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
 
-    &:checked:disabled
-        border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
+            &:hover
+                & + span.m3.m3-radio-state-layer
+                    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
 
-    &:checked:disabled::after
-        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
+            &:active + span.m3.m3-radio-state-layer
+                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+                & ~ span.m3-ripple-domain > .m3.ripple
+                    background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
 
-    &:not(:disabled)
+        &:disabled
+            &:is(:not(:checked), &:checked) ~ svg
+                & > circle.m3-radio-outline
+                    stroke-opacity: 38%
+                    stroke: var(--md-sys-color-on-surface)
 
-        &:checked:hover + span.m3.m3-radio-state-layer
-            background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
+            &:checked ~ svg > circle.m3-radio-state
+                fill-opacity: 38%
+                fill: var(--md-sys-color-on-surface)
 
-        &:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
-            background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
-            & + span.m3-ripple-domain > .m3.ripple
-                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
+        &:not(:checked) ~ svg
+            & > circle.m3-radio-outline
+                stroke: var(--md-sys-color-on-surface-variant)
 
-        &:hover
-            & + span.m3.m3-radio-state-layer
-                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
+            & > circle.m3-radio-state
+                fill-opacity: 0
+                fill: var(--md-sys-color-primary)
 
-        &:active + span.m3.m3-radio-state-layer
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
-            & + span.m3-ripple-domain > .m3.ripple
-                background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
+        &:checked ~ svg
+            & > circle.m3-radio-outline
+                stroke: var(--md-sys-color-primary)
+
+            & > circle.m3-radio-state
+                fill-opacity: 1
+                fill: var(--md-sys-color-primary)
+
+    svg
+        margin: 0
+        width: 20px
+        z-index: 10
+        border-radius: 50%
+        pointer-events: none
+        aspect-ratio: inherit
+
+        & > circle
+            transition: fill, stroke, .2s cubic-bezier(0.2, 0, 0, 1)
+
+            &.m3-radio-outline
+                r: 9px
+                fill: black
+                fill-opacity: 0
+                stroke-width: 2px
+                stroke: var(--md-sys-color-on-surface-variant)
+
+            &.m3-radio-state
+                r: 5px
diff --git a/src/styles/swtich.css b/src/styles/swtich.css
index acb5bb1..0f45003 100644
--- a/src/styles/swtich.css
+++ b/src/styles/swtich.css
@@ -1,4 +1,4 @@
-div.m3.m3-switch-exp {
+div.m3.m3-switch {
   margin: 4px;
   box-sizing: content-box;
   display: flex;
@@ -7,34 +7,34 @@ div.m3.m3-switch-exp {
   width: 52px;
   height: 32px;
 }
-div.m3.m3-switch-exp > svg {
+div.m3.m3-switch > svg {
   overflow: visible;
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   width: 52px;
   height: 32px;
 }
-div.m3.m3-switch-exp > svg > g {
+div.m3.m3-switch > svg > g {
   transform: translate(11.5%, 81%);
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-div.m3.m3-switch-exp > svg > g > text {
+div.m3.m3-switch > svg > g > text {
   font-family: Material-Symbols-Outlined-Regular;
   font-size: 20px;
 }
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer,
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer,
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   cy: 50%;
   cx: 16px;
 }
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
   r: 20px;
   fill-opacity: 0;
 }
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
   r: 8px;
 }
-div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > 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;
@@ -42,7 +42,7 @@ div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
   width: 50px;
   height: 30px;
 }
-div.m3.m3-switch-exp > input.m3 {
+div.m3.m3-switch > input.m3 {
   cursor: pointer;
   appearance: none;
   opacity: 0 !important;
@@ -51,124 +51,124 @@ div.m3.m3-switch-exp > input.m3 {
   height: 32px;
   position: absolute;
 }
-div.m3.m3-switch-exp > input.m3:disabled {
+div.m3.m3-switch > input.m3:disabled {
   cursor: not-allowed;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:not(:checked, :disabled)
   + svg
   > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-outline);
 }
-div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
+div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
   transform: translate(50%, 81%);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:checked:not(:disabled)
   + svg
   > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:not(:disabled)
   + svg
   > g
   > text.m3.m3-icon-unchecked {
   fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:not(:disabled)
   + svg
   > g
   > text.m3.m3-icon-checked {
   fill: var(--md-sys-color-on-primary-container);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > 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
+div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler,
+div.m3.m3-switch
   > 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 {
+div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
   opacity: 0;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:checked
   + svg
   > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
   cx: calc(100% - 16px);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:not(:checked)
   + svg
   > g
   > text.m3.m3-icon-checked {
   opacity: 0;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:is(
-    div.m3.m3-switch-exp > input.m3:checked,
-    div.m3.m3-switch-exp > input.m3
+    div.m3.m3-switch > input.m3:checked,
+    div.m3.m3-switch > input.m3
   ):not(:disabled):active
   + svg
   > circle.m3.m3-switch-handler {
   r: 14px;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > 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
+div.m3.m3-switch
   > input.m3:hover:not(:disabled):checked
   + svg
   > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-primary-container);
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > 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
+div.m3.m3-switch
   > 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
+div.m3.m3-switch
   > 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
+div.m3.m3-switch
   > 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
+div.m3.m3-switch
   > 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
+div.m3.m3-switch
   > input.m3:is(:checked, :checked:disabled)
   + svg
   > rect.m3.m3-switch-track {
@@ -177,32 +177,32 @@ div.m3.m3-switch-exp
   height: 32px;
   stroke-width: 0;
 }
-div.m3.m3-switch-exp
+div.m3.m3-switch
   > input.m3:is(
-    div.m3.m3-switch-exp > input.m3:not(:checked),
-    div.m3.m3-switch-exp > input.m3:not(:checked):disabled
+    div.m3.m3-switch > input.m3:not(:checked),
+    div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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 {
+div.m3.m3-switch > 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,
@@ -210,11 +210,11 @@ div.m3.m3-switch-exp > input.m3:disabled + svg > rect.m3.m3-switch-track {
     transparent
   );
 }
-div.m3.m3-switch-exp > input.m3:checked:disabled + svg > g > text.m3 {
+div.m3.m3-switch > 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
+div.m3.m3-switch
   > input.m3:checked:disabled
   + svg
   > rect.m3.m3-switch-track {
diff --git a/src/styles/swtich.sass b/src/styles/swtich.sass
index 187750d..c19850d 100644
--- a/src/styles/swtich.sass
+++ b/src/styles/swtich.sass
@@ -1,4 +1,4 @@
-div.m3.m3-switch-exp
+div.m3.m3-switch
     margin: 4px
     box-sizing: content-box
     display: flex