ADDED: base styles for segmented buttons

src/styles/button-styles/segmented-button.css

@@ -0,0 +1,4 @@
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
+  width: max-content; }
+
+/*# sourceMappingURL=segmented-button.css.map */

src/styles/button-styles/segmented-button.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AACI,yDAA+B;EAC3B,KAAK,EAAE,WAAW",
+"sources": ["segmented-button.sass"],
+"names": [],
+"file": "segmented-button.css"
+}

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

@@ -0,0 +1,38 @@
+div.m3.m3-segmented-buttons
+    display: flex
+    flex-direction: row
+    outline-offset: -1px
+    width: min-content
+    border-radius: 20px
+
+    & > button.m3.m3-button-segment
+        width: max-content
+        border-radius: 0
+        box-sizing: border-box
+        height: 40px
+
+        &
+            border: 1px solid var(--md-sys-color-outline)
+            border-right: 0.5px
+            border-left: 0.5px
+            border-left-style: solid
+            border-right-style: solid
+            border-left-color: var(--md-sys-color-outline)
+            border-right-color: var(--md-sys-color-outline)
+            min-width: 107px
+
+        &:first-child
+            border: 1px solid var(--md-sys-color-outline)
+            border-right: 0.5px
+            border-right-style: solid
+            border-right-color: var(--md-sys-color-outline)
+            min-width: 108px - 0.5px
+            border-radius: 20px 0 0 20px
+
+        &:last-child
+            border: 1px solid var(--md-sys-color-outline)
+            border-left: 0.5px
+            border-left-style: solid
+            border-left-color: var(--md-sys-color-outline)
+            min-width: 108px - 0.5px
+            border-radius: 0 20px 20px 0