TODO: Slider

DONE: Segmented buttons

src/styles/button-styles/button.sass

@@ -1,3 +1,10 @@
+input[type="button"].test-button
+    color: white
+    &:not(:checked)
+        background-color: green
+    &:checked
+        background-color: blue
+
 button:not(.m3-fab, .m3-icon-button)
     width: min-content
     height: min-content

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

@@ -1,31 +1,46 @@
 div.m3.m3-segmented-buttons
+    padding: 0
+    height: 40px
     display: flex
     flex-direction: row
-    width: min-content
     border-radius: 20px
+    box-sizing: border-box
+    border-collapse: collapse
 
     & > button.m3.m3-button-segment
+        margin: 0 -0.5px 0 -0.5px
+
+    & > button.m3.m3-button-segment:first-child
+        border-radius: 20px 0 0 20px
+    & > button.m3.m3-button-segment:last-child
+        border-radius: 0 20px 20px 0
+
+    & >  button.m3.m3-button-segment
         height: 40px
-        border-radius: 0
+        display: flex
         min-width: 108px
         width: max-content
-        box-sizing: border-box
+        padding-inline: 10px
         border: 1px solid var(--md-sys-color-outline)
 
+        &
+            border-radius: 0
+            background-color: transparent
+
         & > span
             color: var(--md-sys-color-on-surface)
 
         & > svg > text
             fill: var(--md-sys-color-on-surface)
 
-        &:not(:first-child)
-            margin-left: -1px
+        &.selected
+            background-color: var(--md-sys-color-secondary-container)
 
-        &:first-child
-            border-radius: 20px 0 0 20px
+        &.selected > span
+            color: var(--md-sys-color-on-secondary-container)
 
-        &:last-child
-            border-radius: 0 20px 20px 0
+        &.selected > svg > text
+            fill: var(--md-sys-color-on-secondary-container)
 
         & > span.m3.m3-button-segment-state-layer
             position: absolute

src/styles/generics.css

@@ -443,6 +443,16 @@ button.m3.m3-fab:focus-visible.tertiary::before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
 }
 
+input[type=button].test-button {
+  color: white;
+}
+input[type=button].test-button:not(:checked) {
+  background-color: green;
+}
+input[type=button].test-button:checked {
+  background-color: blue;
+}
+
 button:not(.m3-fab, .m3-icon-button) {
   width: min-content;
   height: min-content;
@@ -712,33 +722,49 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
 }
 
 div.m3.m3-segmented-buttons {
+  padding: 0;
+  height: 40px;
   display: flex;
   flex-direction: row;
-  width: min-content;
   border-radius: 20px;
+  box-sizing: border-box;
+  border-collapse: collapse;
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
+  margin: 0 -0.5px 0 -0.5px;
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
+  border-radius: 20px 0 0 20px;
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child {
+  border-radius: 0 20px 20px 0;
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
   height: 40px;
-  border-radius: 0;
+  display: flex;
   min-width: 108px;
   width: max-content;
-  box-sizing: border-box;
+  padding-inline: 10px;
   border: 1px solid var(--md-sys-color-outline);
 }
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
+  border-radius: 0;
+  background-color: transparent;
+}
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
   color: var(--md-sys-color-on-surface);
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg > text {
   fill: var(--md-sys-color-on-surface);
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:first-child) {
-  margin-left: -1px;
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
+  background-color: var(--md-sys-color-secondary-container);
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
-  border-radius: 20px 0 0 20px;
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span {
+  color: var(--md-sys-color-on-secondary-container);
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child {
-  border-radius: 0 20px 20px 0;
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > svg > text {
+  fill: var(--md-sys-color-on-secondary-container);
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
   position: absolute;