From 0a8b58668dd1e0ba7910cbccd970895ee49ef156 Mon Sep 17 00:00:00 2001
From: doryan04 <sagiev2015@yandex.ru>
Date: Sat, 24 Feb 2024 23:58:23 +0400
Subject: [PATCH] ADDED: Mixins for icon buttons, but it's not completed
 feature FIXED: Styles for segmented-button

---
 app/page.tsx                                  | 125 +++---
 .../button-components/button/button.tsx       |   2 +-
 .../button-components/fab/fab.tsx             |   1 -
 .../segmented-buttons/segment-button.tsx      |  10 +-
 .../segmented-buttons/segmented-buttons.tsx   |  12 +-
 .../ripple/hooks/useRippleBuilder.tsx         |   2 +-
 src/primitive-components/ripple/ripple.tsx    |   4 +-
 src/styles/button-styles/button.css           |   6 +-
 src/styles/button-styles/button.sass          |  28 +-
 src/styles/button-styles/fabs.sass            |  24 +-
 src/styles/button-styles/icon-button.css      |  14 +-
 src/styles/button-styles/icon-button.sass     | 142 +++----
 .../button-styles/segmented-button.sass       |  47 +--
 src/styles/card.sass                          |  16 +-
 src/styles/generics.css                       | 355 +++++++++---------
 src/styles/generics.css.map                   |   2 +-
 src/styles/generics.sass                      |  21 ++
 src/styles/input-styles/checkbox.sass         |   6 +-
 src/styles/input-styles/radio.css             |   4 +-
 src/styles/input-styles/radio.sass            |   4 +-
 src/styles/ripple.css                         |   4 +-
 src/styles/ripple.sass                        |   2 +-
 22 files changed, 423 insertions(+), 408 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 8533424..62d2174 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import { Card } from '../src/primitive-components/card/card';
-import { IconButton } from '../src/primitive-components/components';
+import {
+    Button,
+    FAB,
+    IconButton,
+} from '../src/primitive-components/components';
 import { CardFooter } from '../src/primitive-components/card/card-footer';
 import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
 import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
@@ -8,51 +12,80 @@ import { SegmentedButtons } from '../src/primitive-components/button-components/
 export default function Page() {
     return (
         <main>
-            <div
-                style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    gap: '8px',
-                    padding: '8px',
-                }}
-            >
-                <div
-                    style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}
-                >
-                    <Card variant={'outlined'}>
-                        <CardFooter>
-                            <SegmentedButtons selectable={true}>
-                                <SegmentButton
-                                    fillIcon={1}
-                                    icon={'change_history'}
-                                >
-                                    Label 1
-                                </SegmentButton>
-                                <SegmentButton
-                                    fillIcon={1}
-                                    icon={'change_history'}
-                                    iconPlace={'right'}
-                                    selectable={false}
-                                >
-                                    Not selectable
-                                </SegmentButton>
-                                <SegmentButton
-                                    fillIcon={1}
-                                    icon={'change_history'}
-                                    iconPlace={'right'}
-                                    iconSize={48}
-                                    svgSize={48}
-                                >
-                                    Label 3
-                                </SegmentButton>
-                                <SegmentButton disabled>Label 4</SegmentButton>
-                            </SegmentedButtons>
-                            <IconButton icon={'settings'} variant={'filled'} />
-                        </CardFooter>
-                    </Card>
-                </div>
-            </div>
+            <Card variant={'outlined'}>
+                <CardFooter>
+                    <Button> Default Button </Button>
+                    <Button ripple={false}> Default Button </Button>
+                    <FAB icon={'edit'} variant={'secondary'} />
+                    <FAB icon={'edit'} ripple={false} variant={'secondary'} />
+
+                    <IconButton icon={'settings'} variant={'filled'} />
+                    <IconButton icon={'settings'} variant={'default'} />
+                    <IconButton icon={'settings'} variant={'tonal'} />
+                    <IconButton icon={'settings'} variant={'outlined'} />
+
+                    <IconButton
+                        icon={'settings'}
+                        toggled={{
+                            selected: 'settings',
+                            unselected: 'settings',
+                        }}
+                        variant={'filled'}
+                    />
+                    <IconButton
+                        icon={'settings'}
+                        toggled={{
+                            selected: 'settings',
+                            unselected: 'settings',
+                        }}
+                        variant={'default'}
+                    />
+                    <IconButton
+                        icon={'settings'}
+                        toggled={{
+                            selected: 'settings',
+                            unselected: 'settings',
+                        }}
+                        variant={'tonal'}
+                    />
+                    <IconButton
+                        icon={'settings'}
+                        toggled={{
+                            selected: 'settings',
+                            unselected: 'settings',
+                        }}
+                        variant={'outlined'}
+                    />
+
+                    <SegmentedButtons density={-2} selectable={true}>
+                        <SegmentButton
+                            fillIcon={1}
+                            icon={'change_history'}
+                            ripple={false}
+                        >
+                            Label 1
+                        </SegmentButton>
+                        <SegmentButton
+                            fillIcon={1}
+                            icon={'change_history'}
+                            iconPlace={'right'}
+                            ripple={false}
+                            selectable={false}
+                        >
+                            Not selectable
+                        </SegmentButton>
+                        <SegmentButton
+                            fillIcon={1}
+                            icon={'change_history'}
+                            iconPlace={'right'}
+                            ripple={false}
+                        >
+                            Label 3
+                        </SegmentButton>
+                        <SegmentButton disabled>Label 4</SegmentButton>
+                    </SegmentedButtons>
+                </CardFooter>
+            </Card>
         </main>
     );
 }
diff --git a/src/primitive-components/button-components/button/button.tsx b/src/primitive-components/button-components/button/button.tsx
index c0f19e7..1b0b612 100644
--- a/src/primitive-components/button-components/button/button.tsx
+++ b/src/primitive-components/button-components/button/button.tsx
@@ -29,7 +29,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         <ButtonLayout
             {...props}
             centralRipple={centralRipple}
-            className={`${variant} ${className}`}
+            className={`m3-common-button ${variant} ${className}`.trimEnd()}
             disabled={disabled}
             ref={ref}
             ripple={ripple}
diff --git a/src/primitive-components/button-components/fab/fab.tsx b/src/primitive-components/button-components/fab/fab.tsx
index 72f4d43..8e67b83 100644
--- a/src/primitive-components/button-components/fab/fab.tsx
+++ b/src/primitive-components/button-components/fab/fab.tsx
@@ -44,7 +44,6 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
             <Icon iconSize={sizes[size]} svgSize={sizes[size]}>
                 {icon}
             </Icon>
-            <span className={'m3 m3-fab-state-layer'}></span>
             {size === 'extended' ? (
                 <Typography
                     className={'label-large'}
diff --git a/src/primitive-components/button-components/segmented-buttons/segment-button.tsx b/src/primitive-components/button-components/segmented-buttons/segment-button.tsx
index 8376980..9b30a18 100644
--- a/src/primitive-components/button-components/segmented-buttons/segment-button.tsx
+++ b/src/primitive-components/button-components/segmented-buttons/segment-button.tsx
@@ -77,13 +77,9 @@ export const SegmentButton = forwardRef<
                         {ButtonLabel}
                     </IconWrapper>
                 </span>
-                <span className={'m3 m3-button-segment-state-layer'}>
-                    {selectable && (
-                        <>
-                            <Icon {...iconProps}>{icon}</Icon>
-                            {ButtonLabel}
-                        </>
-                    )}
+                <span className={'m3 m3-button-segment-frame-layer'}>
+                    {icon && selectable && <Icon {...iconProps}>{icon}</Icon>}
+                    {ButtonLabel}
                 </span>
             </ButtonLayout>
         );
diff --git a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
index 23616ec..4b914a2 100644
--- a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
+++ b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
@@ -8,10 +8,13 @@ export const SegmentedButtons = forwardRef<
     HTMLDivElement,
     SegmentedButtonsProps
 >(({ selectable = false, density = 0, children, ...props }, ref) => {
-    if (children.length <= 1) {
-        throw 'You must build segmented button with 2 or more button';
+    if (children.length <= 1 && children.length > 5) {
+        throw 'You must build segmented button with 2 or more buttons, but no more 5';
     }
 
+    const extraClasses =
+        `m3 m3-segmented-buttons m3-density-${density} m3-button-segments-amount-${children.length} ${props.className ?? ''}`.trimEnd();
+
     const SegmentedButtons: Array<ReactElement> = children.map(
         (Button: ReactElement, index: number) => {
             return cloneElement(<SegmentButton />, {
@@ -23,10 +26,7 @@ export const SegmentedButtons = forwardRef<
     );
 
     return (
-        <div
-            className={`m3 m3-segmented-buttons m3-density-${density} ${props.className ?? ''}`.trimEnd()}
-            ref={ref}
-        >
+        <div className={extraClasses} ref={ref}>
             {SegmentedButtons}
         </div>
     );
diff --git a/src/primitive-components/ripple/hooks/useRippleBuilder.tsx b/src/primitive-components/ripple/hooks/useRippleBuilder.tsx
index 366c245..9821fce 100644
--- a/src/primitive-components/ripple/hooks/useRippleBuilder.tsx
+++ b/src/primitive-components/ripple/hooks/useRippleBuilder.tsx
@@ -12,7 +12,7 @@ import { baseDOMRect, RippleContainer } from '../ripple.types';
 import isEmpty, { rippleSizeCalculator } from '../utils/utils';
 import { InteractionEventsType } from './useRippleEffect';
 
-const RIPPLE_LIFETIME: number = 550;
+const RIPPLE_LIFETIME: number = 55000;
 const DEBOUNCE: number = 50;
 
 const UseRippleBuilder = (
diff --git a/src/primitive-components/ripple/ripple.tsx b/src/primitive-components/ripple/ripple.tsx
index d03d98c..4179076 100644
--- a/src/primitive-components/ripple/ripple.tsx
+++ b/src/primitive-components/ripple/ripple.tsx
@@ -12,12 +12,12 @@ const Ripple = ({
     rippleKey,
     endLifetime,
 }: RippleProps) => {
-    const [classes, setClasses] = useState<string>('m3 ripple visible');
+    const [classes, setClasses] = useState<string>('m3 m3-ripple visible');
     const rippleDomainContext = useContext(rippleAreaContext);
 
     useLayoutEffect(() => {
         if (endLifetime && !rippleDomainContext) {
-            setClasses('m3 ripple');
+            setClasses('m3 m3-ripple');
             setTimeout(() => endLifetime(rippleKey), lifetime);
         }
     }, [rippleDomainContext]);
diff --git a/src/styles/button-styles/button.css b/src/styles/button-styles/button.css
index e1d57e4..d093578 100644
--- a/src/styles/button-styles/button.css
+++ b/src/styles/button-styles/button.css
@@ -70,13 +70,13 @@ 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 {
+button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.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.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 {
+button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.m3-ripple {
   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) {
diff --git a/src/styles/button-styles/button.sass b/src/styles/button-styles/button.sass
index 8423a79..2f636c4 100644
--- a/src/styles/button-styles/button.sass
+++ b/src/styles/button-styles/button.sass
@@ -1,24 +1,4 @@
-button:not(.m3-fab, .m3-icon-button)
-    @include m3-typography-mixin('label-large')
-
-    max-height: 40px
-    width: min-content
-    white-space: nowrap
-    height: min-content
-    box-sizing: border-box
-    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
-
-    &.m3
-        @include center(inline-flex)
-
-        gap: 8px
-        border: none
-        contain: content
-        text-align: center
-        padding: 10px 24px
-        flex-direction: row
-        border-radius: 100px
-        box-sizing: border-box
+button.m3.m3-common-button
 
     &.filled
         background-color: var(--md-sys-color-primary)
@@ -59,14 +39,14 @@ button:not(.m3-fab, .m3-icon-button)
         & > svg.m3-svg-icon
             fill: var(--md-sys-color-on-secondary-container)
 
-    &.filled > span.m3.m3-ripple-domain > span.m3.ripple
+    &.filled > span.m3.m3-ripple-domain > span.m3.m3-ripple
         background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
 
     &:is(.outlined, .text, .elevated)
-        & > span.m3.m3-ripple-domain > span.m3.ripple
+        & > span.m3.m3-ripple-domain > span.m3.m3-ripple
             background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
 
-    &.tonal > span.m3.m3-ripple-domain > span.m3.ripple
+    &.tonal > span.m3.m3-ripple-domain > span.m3.m3-ripple
         background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
 
     &:active
diff --git a/src/styles/button-styles/fabs.sass b/src/styles/button-styles/fabs.sass
index 80851ef..b62be38 100644
--- a/src/styles/button-styles/fabs.sass
+++ b/src/styles/button-styles/fabs.sass
@@ -14,11 +14,11 @@
     & > svg.m3-svg-icon
         fill: var($color)
 
-    & > span.m3.m3-ripple-domain > span.m3.ripple
+    & > span.m3.m3-ripple-domain > span.m3.m3-ripple
         background: color-mix(in srgb, var($color) 12%, transparent)
 
     &:not(&:has(span.m3.m3-ripple-domain)):active
-        & > span.m3.m3-fab-state-layer
+        &:before
             background: color-mix(in srgb, var($color) 20%, transparent)
 
 
@@ -39,9 +39,11 @@ button.m3.m3-fab
         border: none
         gap: 12px
 
-    & > span.m3.m3-fab-state-layer
+    &:before
         @include m3-buttons-state-layer-mixin
 
+        content: ""
+
     &.surface
         @include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
 
@@ -77,27 +79,27 @@ button.m3.m3-fab
         @include elevation-3(true)
 
     &:hover
-        &.surface > span.m3.m3-fab-state-layer
+        &.surface:before
             background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
 
-        &.primary > span.m3.m3-fab-state-layer
+        &.primary:before
             background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
 
-        &.secondary > span.m3.m3-fab-state-layer
+        &.secondary:before
             background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
 
-        &.tertiary > span.m3.m3-fab-state-layer
+        &.tertiary:before
             background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
 
     &:focus-visible
-        &.surface > span.m3.m3-fab-state-layer
+        &.surface:before
             background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
 
-        &.primary > span.m3.m3-fab-state-layer
+        &.primary:before
             background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
 
-        &.secondary > span.m3.m3-fab-state-layer
+        &.secondary:before
             background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
 
-        &.tertiary > span.m3.m3-fab-state-layer
+        &.tertiary:before
             background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)
\ No newline at end of file
diff --git a/src/styles/button-styles/icon-button.css b/src/styles/button-styles/icon-button.css
index a991580..4bf3509 100644
--- a/src/styles/button-styles/icon-button.css
+++ b/src/styles/button-styles/icon-button.css
@@ -79,25 +79,25 @@ button.m3.m3-icon-button.outlined.selected.toggled {
   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 {
+button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.m3-ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.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 {
+button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.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 {
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.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 {
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.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 {
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.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 {
+button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.m3-ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.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 {
+button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.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 {
diff --git a/src/styles/button-styles/icon-button.sass b/src/styles/button-styles/icon-button.sass
index 713ccc9..f4936ae 100644
--- a/src/styles/button-styles/icon-button.sass
+++ b/src/styles/button-styles/icon-button.sass
@@ -1,3 +1,39 @@
+@mixin m3-icon-button-state-colors($opacity)
+    &:is(.default, .outlined)::before
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
+
+    &.filled::before, &.filled.toggled.selected::before
+        background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent)
+
+    &.filled.toggled::before
+        background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent)
+
+    &.tonal::before, &.tonal.toggled.selected::before
+        background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent)
+
+    &.tonal.toggled::before
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
+
+@mixin m3-icon-color-palette($border, $border-opacity, $fill, $fill-opacity, $background, $background-opacity)
+    @if $border != none
+        @if $border == transparent
+            border: 0 solid transparent
+        @else
+            border: 1px solid color-mix(in srgb, var($border) $border-opacity, transparent)
+
+    @if $fill != none
+        @if $fill == transparent
+            fill: $fill
+        @else
+            fill: color-mix(in srgb, var($fill) $fill-opacity, transparent)
+
+    @if $background != none
+        @if $background == transparent
+            background-color: $background
+        @else
+            background-color: color-mix(in srgb, var($background) $background-opacity, transparent)
+
+
 button.m3.m3-icon-button
     @include center(inline-flex)
 
@@ -20,114 +56,78 @@ button.m3.m3-icon-button
 
     & > span.m3-icon
         z-index: 25
-        font-size: 2em
+        font-size: 24px
         font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48
 
     &.default
-        &
-            fill: var(--md-sys-color-on-surface-variant)
-            background-color: #00000000
-
-        &:disabled, &.selected:disabled, &.selected.toggled:disabled
-            fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
-            background-color: #00000000
+        &, &:not(.selected).toggled
+            @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, transparent, 0%)
 
         &.selected.toggled
-            fill: var(--md-sys-color-primary)
+            @include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%)
+
+        &:disabled, &.selected:disabled, &.selected.toggled:disabled
+            @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
 
     &.filled
         &
-            fill: var(--md-sys-color-on-primary)
-            background-color: var(--md-sys-color-primary)
+            @include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%)
 
-        &.toggled
-            fill: var(--md-sys-color-primary)
-            background-color: var(--md-sys-color-surface-container-highest)
+        &:not(.selected).toggled
+            @include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, --md-sys-color-surface-container-highest, 100%)
 
         &.selected.toggled
-            fill: var(--md-sys-color-on-primary)
-            background-color: var(--md-sys-color-primary)
+            @include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%)
 
     &.tonal
-        &.toggled
-            fill: var(--md-sys-color-on-surface-variant)
-            background-color: var(--md-sys-color-surface-container-highest)
+        &:not(.selected).toggled
+            @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, --md-sys-color-surface-container-highest, 100%)
 
         &.selected.toggled, &
-            fill: var(--md-sys-color-on-secondary-container)
-            background-color: var(--md-sys-color-secondary-container)
+            @include m3-icon-color-palette(none, none, --md-sys-color-on-secondary-container, 100%, --md-sys-color-secondary-container, 100%)
 
     &: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)
+        @include m3-icon-color-palette(none, none, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%)
 
     &.outlined
         &
-            border: 1px solid var(--md-sys-color-outline)
-            fill: var(--md-sys-color-on-surface-variant)
-            background-color: #00000000
-
-        &: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)
-            background-color: #00000000
-
-        &.toggled.selected:disabled
-            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)
+            @include m3-icon-color-palette(--md-sys-color-outline, 100%, --md-sys-color-on-surface-variant, 100%, transparent, 0%)
 
         &.selected.toggled
-            border: 1px solid #00000000
-            background-color: var(--md-sys-color-inverse-surface)
-            fill: var(--md-sys-color-inverse-on-surface)
+            @include m3-icon-color-palette(transparent, 0%, --md-sys-color-inverse-on-surface, 100%, --md-sys-color-inverse-surface, 100%)
+
+        &:disabled
+            @include m3-icon-color-palette(--md-sys-color-outline, 12%, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
+
+        &.selected.toggled:disabled
+            @include m3-icon-color-palette(none, 0%, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%)
 
     &.filled:not(:disabled)
-        & > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
+        &:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.m3-ripple
             background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
-        &.toggled > .m3.m3-ripple-domain > .m3.ripple
+
+        &:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple
             background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
 
     &:is(.outlined, .default):not(:disabled)
-        & > .m3.m3-ripple-domain > .m3.ripple
+        & > span.m3.m3-ripple-domain > span.m3.m3-ripple
             background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
 
-        &:not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple
+        &:not(.outlined).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple
             background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
 
-        &:not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple
+        &:not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple
             background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
 
     &.tonal:not(:disabled)
-        & > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
+        &:is(&.selected.toggled, &):not(&.toggled) > span.m3.m3-ripple-domain > span.m3.m3-ripple
             background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
-        &.toggled > .m3.m3-ripple-domain > .m3.ripple
+
+        &:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple
             background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
 
     &:hover:not(:disabled)
-        &:is(.default, .outlined)::before
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent)
+        @include m3-icon-button-state-colors(8%)
 
-        &.filled::before, &.filled.toggled.selected::before
-            background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
-        &.filled.toggled::before
-            background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
-
-        &.tonal::before, &.tonal.toggled.selected::before
-            background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
-        &.tonal.toggled::before
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent)
-
-    &:focus-visible:not(:disabled)
-        &:is(.default, .outlined)::before
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
-
-        &.filled::before, &.filled.toggled.selected::before
-            background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
-        &.filled.toggled::before
-            background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
-
-        &.tonal::before, &.tonal.toggled.selected::before
-            background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
-        &.tonal.toggled::before
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
+    &:is(&:focus-visible:not(:disabled), &:active:not(:disabled, &:has(span.m3.m3-ripple-domain)))
+        @include m3-icon-button-state-colors(12%)
diff --git a/src/styles/button-styles/segmented-button.sass b/src/styles/button-styles/segmented-button.sass
index 0acb85b..4da502b 100644
--- a/src/styles/button-styles/segmented-button.sass
+++ b/src/styles/button-styles/segmented-button.sass
@@ -2,7 +2,7 @@ $densities: [0, -1, -2, -3]
 
 @each $density in $densities
     .m3.m3-density-#{$density}
-        $height: 40px + ($density * 2px)
+        $height: 40px + ($density * 4px)
 
         & > button.m3.m3-button-segment
             height: $height
@@ -13,9 +13,7 @@ $densities: [0, -1, -2, -3]
             &:last-child
                 border-radius: 0 ($height / 2) ($height / 2) 0
 
-            & > span.m3.m3-button-segment-state-layer
-                padding-top: 10px + ($density * 1px)
-                padding-bottom: 10px + ($density * 1px)
+            padding: 10px + ($density * 2px) 12px
 
 @mixin m3-segmented-button-content-color-mixin($color)
     & > svg.m3.m3-svg-icon > text
@@ -24,50 +22,57 @@ $densities: [0, -1, -2, -3]
     & > label.m3.m3-typography
         color: var($color)
 
+
+
 div.m3.m3-segmented-buttons
-    display: flex
+    width: 100%
     padding: 4px 0
     border-radius: 20px
+    display: inline-flex
     box-sizing: border-box
 
     & > button.m3.m3-button-segment
-        flex: 1 1
-        padding: 0
         width: 100%
-        min-width: 108px
+        min-width: 48px
         border-radius: 0
         margin: 0 -0.5px
         display: inline-flex
         background-color: transparent
         border: 1px solid var(--md-sys-color-outline)
 
+        &:before
+            @include m3-buttons-state-layer-mixin
+
+            content: ""
+
         & > span.m3.m3-ripple-domain
             transition: .2s cubic-bezier(0.2, 0, 0, 1)
 
-            & > span.m3.ripple
+            & > span.m3.m3-ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
 
-        & > span.m3.m3-button-segment-state-layer
-            @include m3-buttons-state-layer-mixin
+        & > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer)
+            @include center(inline-flex)
 
+            gap: 8px
+            height: inherit
+
+            & > svg.m3.m3-svg-icon
+                height: inherit
+
+        & > span.m3.m3-button-segment-frame-layer
             box-sizing: border-box
 
             & > *
                 visibility: hidden
 
         & > span.m3.m3-button-segment-content-layer
-            @include center(inline-flex)
-            @include m3-segmented-button-content-color-mixin(--md-sys-color-on-surface)
-
-            gap: 8px
             position: absolute
-            max-height: inherit
 
             & > svg.m3.m3-svg-icon
                 display: none
 
         &.selected
-
             background-color: var(--md-sys-color-secondary-container)
 
             & > span.m3.m3-button-segment-content-layer
@@ -76,13 +81,13 @@ div.m3.m3-segmented-buttons
                 & > svg.m3.m3-svg-icon
                     display: initial
 
-        &:hover
-            & > span.m3.m3-button-segment-state-layer
+        &:not(:disabled):hover
+            &:before
                 background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
 
         &:is(&:not(&:has(span.m3.m3-ripple-domain)):active, &:focus-visible)
-            & > span.m3.m3-button-segment-state-layer
-                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
+            &:before
+                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent)
 
         &:disabled
             border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
diff --git a/src/styles/card.sass b/src/styles/card.sass
index 1d55299..ab5f45d 100644
--- a/src/styles/card.sass
+++ b/src/styles/card.sass
@@ -10,25 +10,19 @@ $padding: 16px
 
 div.m3.m3-card
     & > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child,
-    & > .m3-card-media:first-child,
-    & > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
+    & > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child,
+    & > .m3-card-media:first-child
+        border-radius: 12px !important
         padding: padding-calculating(false)
         border-radius: 12px !important
 
-div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
-    padding: padding-calculating(false)
-    border-radius: 12px !important
-
 div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3
-    padding: padding-calculating(true)
-    display: block
     box-sizing: border-box
 
 .m3.m3-card-media
     &.m3-rounded
         border-radius: 12px + padding-calculating(true)
 
-    width: 100%
     display: block
     contain: content
     position: relative
@@ -52,7 +46,9 @@ div.m3.m3-card-action-area
         width: 100%
         height: 100%
         position: absolute
-        transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
+
+    & > .m3.m3-ripple-domain > .m3.m3-ripple
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
 
     &:hover
         & > span.m3.m3-card-state-layer
diff --git a/src/styles/generics.css b/src/styles/generics.css
index 5162cfb..ef9669e 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -3,25 +3,17 @@
 @import "./themes/typography.module.css";
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark);
 @import "./themes/theme.light.css" (prefers-color-scheme: light);
-div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
-  border-radius: 12px !important;
-  padding: 0px;
-}
-
-div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
+div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child {
   border-radius: 12px !important;
   padding: 0px;
 }
 
 div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3 {
-  padding: 16px;
-  display: block;
   box-sizing: border-box;
   padding: 16px;
 }
 
 .m3.m3-card-media {
-  width: 100%;
   display: block;
   contain: content;
   position: relative;
@@ -50,7 +42,7 @@ div.m3.m3-card-action-area > span.m3:is(.m3-card-state-layer, .m3-ripple-domain)
   height: 100%;
   position: absolute;
 }
-div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.ripple {
+div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.m3-ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 div.m3.m3-card-action-area:hover > span.m3.m3-card-state-layer {
@@ -235,7 +227,7 @@ svg.m3.m3-badge > text {
   pointer-events: none;
 }
 
-.m3.ripple {
+.m3.m3-ripple {
   position: absolute;
   overflow: hidden;
   pointer-events: none;
@@ -250,7 +242,7 @@ svg.m3.m3-badge > text {
   transition-property: opacity, background-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.m3.ripple.visible {
+.m3.m3-ripple.visible {
   opacity: 1 !important;
 }
 
@@ -330,11 +322,12 @@ button.m3.m3-fab.m3 {
   border: none;
   gap: 12px;
 }
-button.m3.m3-fab > span.m3.m3-fab-state-layer {
+button.m3.m3-fab:before {
   width: 100%;
   height: 100%;
   position: absolute;
   transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  content: "";
 }
 button.m3.m3-fab.surface {
   color: var(--md-sys-color-primary);
@@ -346,10 +339,10 @@ button.m3.m3-fab.surface:not(.without-elevation) {
 button.m3.m3-fab.surface > svg.m3-svg-icon {
   fill: var(--md-sys-color-primary);
 }
-button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.m3.ripple {
+button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer {
+button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active:before {
   background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
 }
 button.m3.m3-fab.primary {
@@ -362,10 +355,10 @@ button.m3.m3-fab.primary:not(.without-elevation) {
 button.m3.m3-fab.primary > svg.m3-svg-icon {
   fill: var(--md-sys-color-on-primary-container);
 }
-button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.m3.ripple {
+button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
 }
-button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer {
+button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active:before {
   background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent);
 }
 button.m3.m3-fab.secondary {
@@ -378,10 +371,10 @@ button.m3.m3-fab.secondary:not(.without-elevation) {
 button.m3.m3-fab.secondary > svg.m3-svg-icon {
   fill: var(--md-sys-color-on-secondary-container);
 }
-button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.m3.ripple {
+button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
-button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer {
+button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active:before {
   background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent);
 }
 button.m3.m3-fab.tertiary {
@@ -394,10 +387,10 @@ button.m3.m3-fab.tertiary:not(.without-elevation) {
 button.m3.m3-fab.tertiary > svg.m3-svg-icon {
   fill: var(--md-sys-color-on-tertiary-container);
 }
-button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.m3.ripple {
+button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
 }
-button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer {
+button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active:before {
   background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 20%, transparent);
 }
 button.m3.m3-fab.m3-small-fab {
@@ -434,162 +427,136 @@ button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .ter
 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 > span.m3.m3-fab-state-layer {
+button.m3.m3-fab:hover.surface:before {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
-button.m3.m3-fab:hover.primary > span.m3.m3-fab-state-layer {
+button.m3.m3-fab:hover.primary:before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent);
 }
-button.m3.m3-fab:hover.secondary > span.m3.m3-fab-state-layer {
+button.m3.m3-fab:hover.secondary:before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
 }
-button.m3.m3-fab:hover.tertiary > span.m3.m3-fab-state-layer {
+button.m3.m3-fab:hover.tertiary:before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent);
 }
-button.m3.m3-fab:focus-visible.surface > span.m3.m3-fab-state-layer {
+button.m3.m3-fab:focus-visible.surface:before {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-button.m3.m3-fab:focus-visible.primary > span.m3.m3-fab-state-layer {
+button.m3.m3-fab:focus-visible.primary:before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
 }
-button.m3.m3-fab:focus-visible.secondary > span.m3.m3-fab-state-layer {
+button.m3.m3-fab:focus-visible.secondary:before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
-button.m3.m3-fab:focus-visible.tertiary > span.m3.m3-fab-state-layer {
+button.m3.m3-fab:focus-visible.tertiary:before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
 }
 
-button:not(.m3-fab, .m3-icon-button) {
-  font-size: var(--md-sys-typescale-label-large-font-size);
-  font-weight: var(--md-sys-typescale-label-large-font-weight);
-  line-height: var(--md-sys-typescale-label-large-line-height);
-  font-family: var(--md-sys-typescale-label-large-font-family-name);
-  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
-  max-height: 40px;
-  width: min-content;
-  white-space: nowrap;
-  height: min-content;
-  box-sizing: border-box;
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-}
-button:not(.m3-fab, .m3-icon-button).m3 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  border: none;
-  contain: content;
-  text-align: center;
-  padding: 10px 24px;
-  flex-direction: row;
-  border-radius: 100px;
-  box-sizing: border-box;
-}
-button:not(.m3-fab, .m3-icon-button).filled {
+button.m3.m3-common-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.m3.m3-common-button.filled, button.m3.m3-common-button.filled > svg.m3-svg-icon {
   fill: var(--md-sys-color-on-primary);
   color: var(--md-sys-color-on-primary);
 }
-button:not(.m3-fab, .m3-icon-button).outlined {
+button.m3.m3-common-button.outlined {
   outline-offset: -1px;
   background-color: transparent;
   color: var(--md-sys-color-primary);
   outline: 1px solid var(--md-sys-color-outline) !important;
 }
-button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
+button.m3.m3-common-button.outlined > svg.m3-svg-icon {
   fill: var(--md-sys-color-primary);
 }
-button:not(.m3-fab, .m3-icon-button).text {
+button.m3.m3-common-button.text {
   background-color: transparent;
   color: var(--md-sys-color-primary);
 }
-button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
+button.m3.m3-common-button.text > svg.m3-svg-icon {
   fill: var(--md-sys-color-primary);
 }
-button:not(.m3-fab, .m3-icon-button).elevated {
+button.m3.m3-common-button.elevated {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   color: var(--md-sys-color-primary);
   background-color: var(--md-sys-color-surface-container-low);
 }
-button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
+button.m3.m3-common-button.elevated > svg.m3-svg-icon {
   fill: var(--md-sys-color-primary);
 }
-button:not(.m3-fab, .m3-icon-button).tonal {
+button.m3.m3-common-button.tonal {
   color: var(--md-sys-color-on-secondary-container);
   background-color: var(--md-sys-color-secondary-container);
 }
-button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
+button.m3.m3-common-button.tonal > svg.m3-svg-icon {
   fill: var(--md-sys-color-on-secondary-container);
 }
-button:not(.m3-fab, .m3-icon-button).filled > span.m3.m3-ripple-domain > span.m3.ripple {
+button.m3.m3-common-button.filled > span.m3.m3-ripple-domain > span.m3.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) > span.m3.m3-ripple-domain > span.m3.ripple {
+button.m3.m3-common-button:is(.outlined, .text, .elevated) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-button:not(.m3-fab, .m3-icon-button).tonal > span.m3.m3-ripple-domain > span.m3.ripple {
+button.m3.m3-common-button.tonal > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   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) {
+button.m3.m3-common-button:active:is(.filled, .tonal) {
   box-shadow: none !important;
 }
-button:not(.m3-fab, .m3-icon-button):active.elevated {
+button.m3.m3-common-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;
 }
-button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).outlined {
+button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).outlined {
   border-color: var(--md-sys-color-primary) !important;
 }
-button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).filled {
+button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).filled {
   background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 20%, var(--md-sys-color-primary));
 }
-button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)):is(.outlined, .text, .elevated) {
+button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)):is(.outlined, .text, .elevated) {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
 }
-button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).tonal {
+button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).tonal {
   background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, var(--md-sys-color-secondary-container));
 }
-button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
+button.m3.m3-common-button:focus-visible.outlined {
   border-color: var(--md-sys-color-primary) !important;
 }
-button:not(.m3-fab, .m3-icon-button):focus-visible.filled {
+button.m3.m3-common-button:focus-visible.filled {
   background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, var(--md-sys-color-primary));
 }
-button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated) {
+button.m3.m3-common-button:focus-visible:is(.outlined, .text, .elevated) {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-button:not(.m3-fab, .m3-icon-button):focus-visible.tonal {
+button.m3.m3-common-button:focus-visible.tonal {
   background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, var(--md-sys-color-secondary-container));
 }
-button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
+button.m3.m3-common-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);
 }
-button:not(.m3-fab, .m3-icon-button):hover.elevated {
+button.m3.m3-common-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);
 }
-button:not(.m3-fab, .m3-icon-button):hover.filled {
+button.m3.m3-common-button:hover.filled {
   background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
 }
-button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated) {
+button.m3.m3-common-button:hover:is(.outlined, .text, .elevated) {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
-button:not(.m3-fab, .m3-icon-button):hover.tonal {
+button.m3.m3-common-button:hover.tonal {
   background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
 }
-button:not(.m3-fab, .m3-icon-button):disabled {
+button.m3.m3-common-button:disabled {
   pointer-events: none;
 }
-button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
+button.m3.m3-common-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) {
+button.m3.m3-common-button:disabled:is(.filled, .elevated, .tonal) {
   background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
-button:not(.m3-fab, .m3-icon-button):disabled.elevated {
+button.m3.m3-common-button:disabled.elevated {
   box-shadow: none;
 }
-button:not(.m3-fab, .m3-icon-button):disabled.outlined {
+button.m3.m3-common-button:disabled.outlined {
   outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
 }
 
@@ -616,83 +583,83 @@ button.m3.m3-icon-button::before {
 }
 button.m3.m3-icon-button > span.m3-icon {
   z-index: 25;
-  font-size: 2em;
+  font-size: 24px;
   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, button.m3.m3-icon-button.default:not(.selected).toggled {
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
+  background-color: transparent;
+}
+button.m3.m3-icon-button.default.selected.toggled {
+  fill: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
+  background-color: 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 {
-  fill: var(--md-sys-color-primary);
+  background-color: transparent;
 }
 button.m3.m3-icon-button.filled {
-  fill: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
+  fill: color-mix(in srgb, var(--md-sys-color-on-primary) 100%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
 }
-button.m3.m3-icon-button.filled.toggled {
-  fill: var(--md-sys-color-primary);
-  background-color: var(--md-sys-color-surface-container-highest);
+button.m3.m3-icon-button.filled:not(.selected).toggled {
+  fill: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 100%, transparent);
 }
 button.m3.m3-icon-button.filled.selected.toggled {
-  fill: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
+  fill: color-mix(in srgb, var(--md-sys-color-on-primary) 100%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
 }
-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:not(.selected).toggled {
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 100%, transparent);
 }
 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);
+  fill: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 100%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container) 100%, transparent);
 }
 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);
 }
 button.m3.m3-icon-button.outlined {
-  border: 1px solid var(--md-sys-color-outline);
-  fill: var(--md-sys-color-on-surface-variant);
-  background-color: rgba(0, 0, 0, 0);
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 100%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
+  background-color: transparent;
+}
+button.m3.m3-icon-button.outlined.selected.toggled {
+  border: 0 solid transparent;
+  fill: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 100%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface) 100%, transparent);
 }
 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);
-  background-color: rgba(0, 0, 0, 0);
+  background-color: transparent;
 }
-button.m3.m3-icon-button.outlined.toggled.selected:disabled {
-  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
+button.m3.m3-icon-button.outlined.selected.toggled: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);
 }
-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 {
+button.m3.m3-icon-button.filled:not(:disabled):is(button.m3.m3-icon-button.filled:not(:disabled).selected.toggled, button.m3.m3-icon-button.filled:not(:disabled)) > span.m3.m3-ripple-domain > span.m3.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 {
+button.m3.m3-icon-button.filled:not(:disabled):is(button.m3.m3-icon-button.filled:not(:disabled).toggled):not(button.m3.m3-icon-button.filled:not(:disabled).toggled.selected) > span.m3.m3-ripple-domain > span.m3.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 {
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > span.m3.m3-ripple-domain > span.m3.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 {
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > span.m3.m3-ripple-domain > span.m3.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 {
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.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 {
+button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled, button.m3.m3-icon-button.tonal:not(:disabled)):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled) > span.m3.m3-ripple-domain > span.m3.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 {
+button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).toggled):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled.selected) > span.m3.m3-ripple-domain > span.m3.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 {
@@ -710,24 +677,25 @@ button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-b
 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);
 }
-button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
+button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))):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 {
+button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).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 {
+button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.toggled::before {
   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 {
+button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).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 {
+button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled::before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
 }
 
 .m3.m3-density-0 > button.m3.m3-button-segment {
   height: 40px;
+  padding: 10px 12px;
 }
 .m3.m3-density-0 > button.m3.m3-button-segment:first-child {
   border-radius: 20px 0 0 20px;
@@ -735,99 +703,87 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
 .m3.m3-density-0 > button.m3.m3-button-segment:last-child {
   border-radius: 0 20px 20px 0;
 }
-.m3.m3-density-0 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
 
 .m3.m3-density--1 > button.m3.m3-button-segment {
-  height: 38px;
+  height: 36px;
+  padding: 8px 12px;
 }
 .m3.m3-density--1 > button.m3.m3-button-segment:first-child {
-  border-radius: 19px 0 0 19px;
+  border-radius: 18px 0 0 18px;
 }
 .m3.m3-density--1 > button.m3.m3-button-segment:last-child {
-  border-radius: 0 19px 19px 0;
-}
-.m3.m3-density--1 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
-  padding-top: 9px;
-  padding-bottom: 9px;
+  border-radius: 0 18px 18px 0;
 }
 
 .m3.m3-density--2 > button.m3.m3-button-segment {
-  height: 36px;
+  height: 32px;
+  padding: 6px 12px;
 }
 .m3.m3-density--2 > button.m3.m3-button-segment:first-child {
-  border-radius: 18px 0 0 18px;
+  border-radius: 16px 0 0 16px;
 }
 .m3.m3-density--2 > button.m3.m3-button-segment:last-child {
-  border-radius: 0 18px 18px 0;
-}
-.m3.m3-density--2 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
-  padding-top: 8px;
-  padding-bottom: 8px;
+  border-radius: 0 16px 16px 0;
 }
 
 .m3.m3-density--3 > button.m3.m3-button-segment {
-  height: 34px;
+  height: 28px;
+  padding: 4px 12px;
 }
 .m3.m3-density--3 > button.m3.m3-button-segment:first-child {
-  border-radius: 17px 0 0 17px;
+  border-radius: 14px 0 0 14px;
 }
 .m3.m3-density--3 > button.m3.m3-button-segment:last-child {
-  border-radius: 0 17px 17px 0;
-}
-.m3.m3-density--3 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
-  padding-top: 7px;
-  padding-bottom: 7px;
+  border-radius: 0 14px 14px 0;
 }
 
 div.m3.m3-segmented-buttons {
-  display: flex;
+  width: 100%;
   padding: 4px 0;
   border-radius: 20px;
+  display: inline-flex;
   box-sizing: border-box;
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
-  flex: 1 1;
-  padding: 0;
   width: 100%;
-  min-width: 108px;
+  min-width: 48px;
   border-radius: 0;
   margin: 0 -0.5px;
   display: inline-flex;
   background-color: transparent;
   border: 1px solid var(--md-sys-color-outline);
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain {
-  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain > span.m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:before {
   width: 100%;
   height: 100%;
   position: absolute;
   transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  box-sizing: border-box;
+  content: "";
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer > * {
-  visibility: hidden;
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain {
+  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer {
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain > span.m3.m3-ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
+  height: inherit;
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) > svg.m3.m3-svg-icon {
+  height: inherit;
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-frame-layer {
+  box-sizing: border-box;
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-frame-layer > * {
+  visibility: hidden;
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer {
   position: absolute;
-  max-height: inherit;
-}
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon > text {
-  fill: var(--md-sys-color-on-surface);
-}
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > label.m3.m3-typography {
-  color: var(--md-sys-color-on-surface);
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
   display: none;
@@ -844,11 +800,11 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
   display: initial;
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment:hover > span.m3.m3-button-segment-state-layer {
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:disabled):hover:before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible) > span.m3.m3-button-segment-state-layer {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible):before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent);
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled {
   border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
@@ -894,7 +850,7 @@ div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):checked
 div.m3.m3-radio-container > 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-container > 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 {
+div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
 }
 div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
@@ -903,7 +859,7 @@ div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):hover +
 div.m3.m3-radio-container > 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-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
 }
 div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
@@ -1275,7 +1231,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :
 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 {
+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.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 {
@@ -1284,7 +1240,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indetermi
 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 {
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.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 {
@@ -1293,7 +1249,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-stat
 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 {
+input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
 }
 
@@ -1535,4 +1491,31 @@ html {
   border-radius: 25px;
 }
 
+button:not(.m3-fab, .m3-icon-button) {
+  font-size: var(--md-sys-typescale-label-large-font-size);
+  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  max-height: 40px;
+  width: min-content;
+  white-space: nowrap;
+  height: min-content;
+  box-sizing: border-box;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+}
+button:not(.m3-fab, .m3-icon-button).m3 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: none;
+  contain: content;
+  text-align: center;
+  padding: 10px 24px;
+  flex-direction: row;
+  border-radius: 100px;
+  box-sizing: border-box;
+}
+
 /*# sourceMappingURL=generics.css.map */
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index 17753f9..7c15334 100644
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"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ACA;EACA;EWhBQ;;AAEA;EACI;;AAER;EXxDJ,SWyDwB;EXxDxB;EACA;EW0DQ;EACA;EACA;;AA3CR;EACI;;AAEJ;EACI;;AAyCI;EACI;;AAER;EAEI;;AAlDR;EACI;;AAEJ;EACI;;AAmDQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;AC1FhB;EZCI;EACA;EACA;EYAA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;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;;;ACtEhB;EACI;EACA;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbjBI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAuCI;;AAvDJ;EAII;;AAHA;EACI;;AAIR;EACI;;AAkDJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbhCI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhBA;EAII;;AAHA;EACI;;AAIR;EACI;;;ACVR;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;EfMI;EACA;EACA;EACA;EACA;EACA;EACA;;AeTA;EfmBA;EACA;EACA;EACA;EACA;;AepBA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAER;EfbI,SecgB;EfbhB;EACA;EecA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EfrDA,SesDoB;EfrDpB;EACA;EesDI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AAEA;EACI;;AAER;EACI;;AAEJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACjGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EhBFA;EACA;EACA;EACA;EACA;;AgBCA;EhBLA;EACA;EACA;EACA;EACA;EgBII;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;EhBrFJ;EACA;EACA;EACA;EACA;EgBoFQ;;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;EAnLJ;EACA;EACA;EACA;EAmLQ;;AAEJ;EAxLJ;EACA;EACA;EACA;EAwLQ;;AAEJ;EACI;;AAEJ;EhBlLJ;EACA;EACA;EACA;EACA;;AgBiLI;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AlB3LhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"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AAzDR;EACI;;AAEJ;EACI;;AA0DQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;AC/FhB;EZCI;EACA;EACA;EYAA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;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;;;ACtEhB;EACI;EACA;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbjBI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAuCI;;AAvDJ;EAII;;AAHA;EACI;;AAIR;EACI;;AAkDJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbhCI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhBA;EAII;;AAHA;EACI;;AAIR;EACI;;;ACVR;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;EfMI;EACA;EACA;EACA;EACA;EACA;EACA;;AeTA;EfmBA;EACA;EACA;EACA;EACA;;AepBA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAER;EfbI,SecgB;EfbhB;EACA;EecA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EfrDA,SesDoB;EfrDpB;EACA;EesDI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AAEA;EACI;;AAER;EACI;;AAEJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACjGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EhBFA;EACA;EACA;EACA;EACA;;AgBCA;EhBLA;EACA;EACA;EACA;EACA;EgBII;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;EhBrFJ;EACA;EACA;EACA;EACA;EgBoFQ;;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;EAnLJ;EACA;EACA;EACA;EAmLQ;;AAEJ;EAxLJ;EACA;EACA;EACA;EAwLQ;;AAEJ;EACI;;AAEJ;EhBlLJ;EACA;EACA;EACA;EACA;;AgBiLI;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AlB3LhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EExBI;EACA;EACA;EACA;EACA;EFuBA;EACA;EACA;EACA;EACA;EACA;;AAEA;EEhDA,SFiDoB;EEhDpB;EACA;EFiDI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
diff --git a/src/styles/generics.sass b/src/styles/generics.sass
index 6df67c4..5285447 100644
--- a/src/styles/generics.sass
+++ b/src/styles/generics.sass
@@ -36,3 +36,24 @@ html
     background-color: var(--md-sys-color-surface)
     border-radius: 25px
 
+button:not(.m3-fab, .m3-icon-button)
+    @include m3-typography-mixin('label-large')
+
+    max-height: 40px
+    width: min-content
+    white-space: nowrap
+    height: min-content
+    box-sizing: border-box
+    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
+
+    &.m3
+        @include center(inline-flex)
+
+        gap: 8px
+        border: none
+        contain: content
+        text-align: center
+        padding: 10px 24px
+        flex-direction: row
+        border-radius: 100px
+        box-sizing: border-box
diff --git a/src/styles/input-styles/checkbox.sass b/src/styles/input-styles/checkbox.sass
index 7e61228..e57feb9 100644
--- a/src/styles/input-styles/checkbox.sass
+++ b/src/styles/input-styles/checkbox.sass
@@ -81,7 +81,7 @@ input[type="checkbox"].m3.m3-checkbox
         &: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)
 
-            & ~ span.m3-ripple-domain > .m3.ripple
+            & ~ span.m3-ripple-domain > .m3.m3-ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
 
         &:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer
@@ -90,7 +90,7 @@ input[type="checkbox"].m3.m3-checkbox
         &:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
 
-            & ~ span.m3-ripple-domain > .m3.ripple
+            & ~ span.m3-ripple-domain > .m3.m3-ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
 
         &:hover
@@ -100,6 +100,6 @@ input[type="checkbox"].m3.m3-checkbox
         &:active ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
 
-            & ~ span.m3-ripple-domain > .m3.ripple
+            & ~ span.m3-ripple-domain > .m3.m3-ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
 
diff --git a/src/styles/input-styles/radio.css b/src/styles/input-styles/radio.css
index 9635c7d..0f6c6f1 100644
--- a/src/styles/input-styles/radio.css
+++ b/src/styles/input-styles/radio.css
@@ -32,7 +32,7 @@ div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + s
 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);
 }
-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 {
+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.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:not(:disabled):hover + span.m3.m3-radio-state-layer {
@@ -41,7 +41,7 @@ div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m
 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);
 }
-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 {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.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:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
diff --git a/src/styles/input-styles/radio.sass b/src/styles/input-styles/radio.sass
index 656341b..854168e 100644
--- a/src/styles/input-styles/radio.sass
+++ b/src/styles/input-styles/radio.sass
@@ -34,7 +34,7 @@ div.m3.m3-radio-container
 
             &: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
+                & ~ span.m3-ripple-domain > .m3.m3-ripple
                     background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
 
             &:hover
@@ -43,7 +43,7 @@ div.m3.m3-radio-container
 
             &: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
+                & ~ span.m3-ripple-domain > .m3.m3-ripple
                     background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
 
         &:disabled
diff --git a/src/styles/ripple.css b/src/styles/ripple.css
index 33d0748..06dbeab 100644
--- a/src/styles/ripple.css
+++ b/src/styles/ripple.css
@@ -5,7 +5,7 @@
   z-index: 20;
   pointer-events: none; }
 
-.m3.ripple {
+.m3.m3-ripple {
   position: absolute;
   overflow: hidden;
   pointer-events: none;
@@ -21,7 +21,7 @@
   transition-duration: 0.55s;
   transition-property: opacity, background-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
-  .m3.ripple.visible {
+  .m3.m3-ripple.visible {
     opacity: 1 !important; }
 
 @keyframes rippleAppearanceAnimation {
diff --git a/src/styles/ripple.sass b/src/styles/ripple.sass
index 2ac8725..5ad26ba 100644
--- a/src/styles/ripple.sass
+++ b/src/styles/ripple.sass
@@ -5,7 +5,7 @@
   z-index: 20
   pointer-events: none
 
-.m3.ripple
+.m3.m3-ripple
   position: absolute
   overflow: hidden
   pointer-events: none