ADDED: Icon wrapper for more elegant way to placement icon in buttons

TODO: Add styles for selected segmented button
DONE: Base styles for segmented buttons

src/styles/button-styles/button.sass

@@ -1,7 +1,9 @@
 button:not(.m3-fab, .m3-icon-button)
     width: min-content
     height: min-content
+    max-height: 40px
     box-sizing: border-box
+    white-space: nowrap
     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)

src/styles/button-styles/segmented-button.sass

@@ -1,7 +1,6 @@
 div.m3.m3-segmented-buttons
     display: flex
     flex-direction: row
-    outline-offset: -1px
     width: min-content
     border-radius: 20px
 
@@ -20,4 +19,24 @@ div.m3.m3-segmented-buttons
             border-radius: 20px 0 0 20px
 
         &:last-child
-            border-radius: 0 20px 20px 0
+            border-radius: 0 20px 20px 0
+
+        & > span.m3.m3-button-segment-state-layer
+            position: absolute
+            width: 100%
+            height: 100%
+
+        & > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
+            transition: .2s cubic-bezier(0.2, 0, 0, 1)
+
+        &:hover
+            & > span.m3.m3-button-segment-state-layer
+                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
+
+        &:is(&: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)
+
+        &:active
+            & > span.m3.m3-ripple-domain > span.m3.ripple
+                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)