From 9379225bac98dbe34a7255fdee8c78b300b521c3 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 6 Feb 2025 18:54:11 +0100
Subject: [PATCH 1/7] apply option 2

---
 pages/segmented-control/simple.page.tsx    | 46 +++++++----
 src/segmented-control/segment.scss         | 88 +++++++++++++++-------
 src/segmented-control/styles.scss          | 14 +++-
 style-dictionary/visual-refresh/spacing.ts |  2 +-
 4 files changed, 109 insertions(+), 41 deletions(-)

diff --git a/pages/segmented-control/simple.page.tsx b/pages/segmented-control/simple.page.tsx
index 2577ba43ab..c045815b52 100644
--- a/pages/segmented-control/simple.page.tsx
+++ b/pages/segmented-control/simple.page.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState } from 'react';
 
+import { Box, Button, Select, SpaceBetween } from '~components';
 import Input from '~components/input';
 import SegmentedControl from '~components/segmented-control';
 
@@ -10,19 +11,38 @@ export default function SegmentedControlPage() {
   return (
     <article>
       <h1>SegmentedControl demo</h1>
-      <Input ariaLabel="Input Label" value="" readOnly={true} />
-      <SegmentedControl
-        options={[
-          { text: 'Segment-1', iconName: 'settings', id: 'seg-1', disabled: false },
-          { text: 'Segment-2', iconName: 'settings', id: 'seg-2', disabled: true },
-          { text: 'Segment-3', iconName: 'settings', id: 'seg-3', disabled: false },
-          { text: 'Segment-4', iconName: 'settings', id: 'seg-4', disabled: false },
-          { text: 'Segment-5', iconName: 'settings', id: 'seg-5', disabled: false },
-        ]}
-        onChange={event => setSelectedId(event.detail.selectedId)}
-        selectedId={selectedId}
-        label="Segmented Control Label"
-      />
+      <SpaceBetween size="l">
+        <Input ariaLabel="Input Label" value="" readOnly={true} />
+        <Box margin={{ horizontal: 'm' }}>
+          <SpaceBetween size="xl" direction="horizontal">
+            <SegmentedControl
+              options={[
+                { text: 'Segment-1', iconName: 'settings', id: 'seg-1', disabled: false },
+                { text: 'S2', iconName: 'settings', id: 'seg-2', disabled: false },
+                { text: 'S3', iconName: 'settings', id: 'seg-3', disabled: false },
+                { text: 'Segment-4 Logs Insights QL', iconName: 'settings', id: 'seg-4', disabled: false },
+                { text: 'Segment-5', iconName: 'settings', id: 'seg-5', disabled: false },
+                { text: 'Segment-6 Logs Insights QL', iconName: 'settings', id: 'seg-6', disabled: false },
+              ]}
+              onChange={event => setSelectedId(event.detail.selectedId)}
+              selectedId={selectedId}
+              label="Segmented Control Label"
+            />
+            <Select
+              selectedOption={null}
+              placeholder="Select an option"
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+                { label: 'Option 4', value: '4' },
+                { label: 'Option 5', value: '5' },
+              ]}
+            />
+            <Button>Button</Button>
+          </SpaceBetween>
+        </Box>
+      </SpaceBetween>
     </article>
   );
 }
diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
index f881dbf8f2..41dfcc0a0a 100644
--- a/src/segmented-control/segment.scss
+++ b/src/segmented-control/segment.scss
@@ -12,7 +12,8 @@
 $segment-properties: (
   'default-background': awsui.$color-background-segment-default,
   'default-color': awsui.$color-text-segment-default,
-  'hover-background': awsui.$color-background-segment-hover,
+  //'hover-background': awsui.$color-background-segment-hover,
+  'hover-background': awsui.$color-background-dropdown-item-filter-match,
   'hover-color': awsui.$color-text-segment-hover,
   'active-background': awsui.$color-background-segment-active,
   'disabled-background': awsui.$color-background-segment-disabled,
@@ -38,73 +39,108 @@ $selected-color: awsui.$color-text-segment-active;
   @include styles.text-flex-wrapping;
   @include styles.font-button;
   letter-spacing: 0.25px;
-  border-block: styles.$control-border-width solid $default-border-color;
-  border-inline: styles.$control-border-width solid $default-border-color;
-  padding-block: styles.$control-padding-vertical;
-  padding-inline: awsui.$space-button-horizontal;
-  border-inline-end-width: 0;
+  // border-block: styles.$control-border-width solid $default-border-color;
+  // border-inline: styles.$control-border-width solid $default-border-color;
+  padding-block: 2px;
+  padding-inline: calc(awsui.$space-button-horizontal - 8px);
+  //border-inline-end-width: 0;
   background: $default-background;
   color: $default-color;
+  border-inline: none;
+  border-block: none;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
   overflow: visible;
+  position: relative;
+  height: calc(100% - 4px);
+
   &:focus {
     outline: none;
   }
+
   @for $i from 1 through 6 {
     &:nth-child(#{$i}) {
       grid-column: $i;
       -ms-grid-column: $i;
     }
   }
+
   @include focus-visible.when-visible {
     @include styles.focus-highlight(awsui.$space-segmented-control-focus-outline-gutter);
   }
-  &:last-child {
-    border-inline-end-width: styles.$control-border-width;
-    border-start-start-radius: 0;
-    border-start-end-radius: awsui.$border-radius-button;
-    border-end-start-radius: 0;
-    border-end-end-radius: awsui.$border-radius-button;
-  }
-  &:first-child {
-    border-start-start-radius: awsui.$border-radius-button;
-    border-start-end-radius: 0;
-    border-end-start-radius: awsui.$border-radius-button;
-    border-end-end-radius: 0;
-  }
+
+  // &:last-child {
+  //   // border-inline-end-width: styles.$control-border-width;
+  //   // border-start-start-radius: 0;
+  //   // border-start-end-radius: 8px;
+  //   // border-end-start-radius: 0;
+  //   // border-end-end-radius: 8px;
+  //   border-radius: 4px;
+  // }
+  // &:first-child {
+  //   border-start-start-radius: 8px;
+  //   border-start-end-radius: 0;
+  //   border-end-start-radius: 8px;
+  //   border-end-end-radius: 0;
+  // }
 
   &.disabled {
     background: $disabled-background;
-    border-color: $disabled-border-color;
+    //border-color: $disabled-border-color;
     color: $disabled-color;
   }
 
   &:not(.disabled) + .segment.disabled {
-    border-inline-start-color: $default-border-color;
+    //border-inline-start-color: $default-border-color;
   }
 
   &.selected {
     background: $selected-background;
-    border-color: $selected-border-color;
+    //border-color: $selected-border-color;
     color: $selected-color;
+
     & + .segment,
     & + .segment.disabled {
-      border-inline-start-color: $selected-border-color;
+      //border-inline-start-color: $selected-border-color;
     }
   }
 
   &:hover:not(.selected):not(.disabled):not(:focus) {
     background: $hover-background;
     color: $hover-color;
-    border-color: $hover-border-color;
+    //border-color: $hover-border-color;
     cursor: pointer;
+
     & + .segment:not(.selected) {
-      border-inline-start-color: $hover-border-color;
+      //border-inline-start-color: $hover-border-color;
     }
   }
 
   &.selected + .segment:hover:not(.selected):not(.disabled):not(:focus) {
-    border-inline-start-color: $selected-border-color;
+    //border-inline-start-color: $selected-border-color;
+  }
+
+  // Add dividers after each button except the last one
+  &:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    right: -9px;
+    top: 4px;
+    height: calc(100% - 8px);
+    width: 1px;
+    background: awsui.$color-border-input-default;
+    z-index: 1;
   }
+
+  // &:has(+ .selected)::after {
+  //   content: none;
+  // }
+
+  // &.selected::after {
+  //   content: none;
+  // }
 }
 
 .icon {
diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss
index 0850729cc8..9e9cbb2613 100644
--- a/src/segmented-control/styles.scss
+++ b/src/segmented-control/styles.scss
@@ -6,6 +6,7 @@
 @use '../internal/styles/' as styles;
 @use 'segment';
 @use 'sass:list' as list;
+@use '../internal/styles/tokens' as awsui;
 
 @function repeatValue($value, $times) {
   $result: ();
@@ -22,6 +23,16 @@
 .segment-part {
   display: -ms-inline-grid;
   display: inline-grid;
+  gap: 17px;
+  border-inline: solid 2px awsui.$color-border-input-default;
+  border-block: solid 2px awsui.$color-border-input-default;
+  border-start-start-radius: 8px;
+  border-start-end-radius: 8px;
+  border-end-start-radius: 8px;
+  border-end-end-radius: 8px;
+  align-items: center;
+  min-block-size: 28px;
+  padding-inline: 2px;
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     display: none;
   }
@@ -37,7 +48,8 @@
 @for $i from 2 through 6 {
   .segment-count-#{$i} {
     // The repeat syntax is not used since it is broken when using with SASS together
-    grid-template-columns: repeatValue(1fr, $i);
+    //grid-template-columns: repeatValue(1fr, $i);
+    grid-template-columns: repeat(#{$i}, auto);
   }
 }
 
diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts
index 58dc1f198c..533628fd9b 100644
--- a/style-dictionary/visual-refresh/spacing.ts
+++ b/style-dictionary/visual-refresh/spacing.ts
@@ -52,7 +52,7 @@ const tokens: StyleDictionary.SpacingDictionary = {
   spacePanelSideRight: '{spaceScaledXl}',
   spacePanelSplitTop: '{spaceScaledL}',
   spacePanelSplitBottom: '{spaceScaledL}',
-  spaceSegmentedControlFocusOutlineGutter: '4px',
+  spaceSegmentedControlFocusOutlineGutter: '5px',
   spaceTabsContentTop: '{spaceScaledS}',
   spaceTabsFocusOutlineGutter: '-8px',
   spaceTableContentBottom: '{spaceXxs}',

From 57a523f4f3a09bbe743ad58cab52e407beedc7e6 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 6 Feb 2025 22:07:49 +0100
Subject: [PATCH 2/7] Design refinements

---
 src/segmented-control/segment.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
index 41dfcc0a0a..3830897785 100644
--- a/src/segmented-control/segment.scss
+++ b/src/segmented-control/segment.scss
@@ -48,13 +48,13 @@ $selected-color: awsui.$color-text-segment-active;
   color: $default-color;
   border-inline: none;
   border-block: none;
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 4px;
+  border-end-start-radius: 4px;
+  border-end-end-radius: 4px;
   overflow: visible;
   position: relative;
-  height: calc(100% - 4px);
+  block-size: calc(100% - 4px);
 
   &:focus {
     outline: none;
@@ -126,10 +126,10 @@ $selected-color: awsui.$color-text-segment-active;
   &:not(:last-child)::after {
     content: '';
     position: absolute;
-    right: -9px;
-    top: 4px;
-    height: calc(100% - 8px);
-    width: 1px;
+    inset-inline-end: -9px;
+    inset-block-start: 4px;
+    block-size: calc(100% - 8px);
+    inline-size: 1px;
     background: awsui.$color-border-input-default;
     z-index: 1;
   }

From 2b242586d730cd8938a1f9055a9f5b42368194da Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 7 Feb 2025 12:13:06 +0100
Subject: [PATCH 3/7] make it pill shape and address text cutting issue

---
 src/segmented-control/segment.scss | 37 +++++++++++++++---------------
 src/segmented-control/styles.scss  | 10 ++++----
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
index 3830897785..f4cd2c5666 100644
--- a/src/segmented-control/segment.scss
+++ b/src/segmented-control/segment.scss
@@ -42,19 +42,21 @@ $selected-color: awsui.$color-text-segment-active;
   // border-block: styles.$control-border-width solid $default-border-color;
   // border-inline: styles.$control-border-width solid $default-border-color;
   padding-block: 2px;
-  padding-inline: calc(awsui.$space-button-horizontal - 8px);
+  padding-inline: calc(awsui.$space-button-horizontal - 4px);
   //border-inline-end-width: 0;
   background: $default-background;
   color: $default-color;
   border-inline: none;
   border-block: none;
-  border-start-start-radius: 4px;
-  border-start-end-radius: 4px;
-  border-end-start-radius: 4px;
-  border-end-end-radius: 4px;
+  border-start-start-radius: 20px;
+  border-start-end-radius: 20px;
+  border-end-start-radius: 20px;
+  border-end-end-radius: 20px;
   overflow: visible;
   position: relative;
   block-size: calc(100% - 4px);
+  display: flex;
+  align-items: center;
 
   &:focus {
     outline: none;
@@ -72,18 +74,17 @@ $selected-color: awsui.$color-text-segment-active;
   }
 
   // &:last-child {
-  //   // border-inline-end-width: styles.$control-border-width;
-  //   // border-start-start-radius: 0;
-  //   // border-start-end-radius: 8px;
-  //   // border-end-start-radius: 0;
-  //   // border-end-end-radius: 8px;
-  //   border-radius: 4px;
+  //   border-inline-end-width: styles.$control-border-width;
+  //   border-start-start-radius: 4px;
+  //   border-start-end-radius: 20px;
+  //   border-end-start-radius: 4px;
+  //   border-end-end-radius: 20px;
   // }
   // &:first-child {
-  //   border-start-start-radius: 8px;
-  //   border-start-end-radius: 0;
-  //   border-end-start-radius: 8px;
-  //   border-end-end-radius: 0;
+  //   border-start-start-radius: 20px;
+  //   border-start-end-radius: 4px;
+  //   border-end-start-radius: 20px;
+  //   border-end-end-radius: 4px;
   // }
 
   &.disabled {
@@ -126,9 +127,9 @@ $selected-color: awsui.$color-text-segment-active;
   &:not(:last-child)::after {
     content: '';
     position: absolute;
-    inset-inline-end: -9px;
-    inset-block-start: 4px;
-    block-size: calc(100% - 8px);
+    inset-inline-end: -6px;
+    inset-block-start: 6px;
+    block-size: calc(100% - 12px);
     inline-size: 1px;
     background: awsui.$color-border-input-default;
     z-index: 1;
diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss
index 9e9cbb2613..eef6aee91d 100644
--- a/src/segmented-control/styles.scss
+++ b/src/segmented-control/styles.scss
@@ -23,13 +23,13 @@
 .segment-part {
   display: -ms-inline-grid;
   display: inline-grid;
-  gap: 17px;
+  gap: 10px;
   border-inline: solid 2px awsui.$color-border-input-default;
   border-block: solid 2px awsui.$color-border-input-default;
-  border-start-start-radius: 8px;
-  border-start-end-radius: 8px;
-  border-end-start-radius: 8px;
-  border-end-end-radius: 8px;
+  border-start-start-radius: 24px;
+  border-start-end-radius: 24px;
+  border-end-start-radius: 24px;
+  border-end-end-radius: 24px;
   align-items: center;
   min-block-size: 28px;
   padding-inline: 2px;

From 9efd108b32909dbd78d29f4ef32cb75017b89f1e Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 7 Feb 2025 12:58:46 +0100
Subject: [PATCH 4/7] update example

---
 pages/segmented-control/simple.page.tsx | 33 ++++++++++++++++---------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/pages/segmented-control/simple.page.tsx b/pages/segmented-control/simple.page.tsx
index c045815b52..7384fd3542 100644
--- a/pages/segmented-control/simple.page.tsx
+++ b/pages/segmented-control/simple.page.tsx
@@ -3,29 +3,25 @@
 import React, { useState } from 'react';
 
 import { Box, Button, Select, SpaceBetween } from '~components';
-import Input from '~components/input';
 import SegmentedControl from '~components/segmented-control';
 
 export default function SegmentedControlPage() {
+  const [selectedFirstId, setSelecteFirstdId] = useState<string | null>('seg1-1');
   const [selectedId, setSelectedId] = useState<string | null>('seg-4');
   return (
     <article>
       <h1>SegmentedControl demo</h1>
       <SpaceBetween size="l">
-        <Input ariaLabel="Input Label" value="" readOnly={true} />
-        <Box margin={{ horizontal: 'm' }}>
+        <Box margin={{ horizontal: 'm', vertical: 'xxl' }}>
           <SpaceBetween size="xl" direction="horizontal">
             <SegmentedControl
               options={[
-                { text: 'Segment-1', iconName: 'settings', id: 'seg-1', disabled: false },
-                { text: 'S2', iconName: 'settings', id: 'seg-2', disabled: false },
-                { text: 'S3', iconName: 'settings', id: 'seg-3', disabled: false },
-                { text: 'Segment-4 Logs Insights QL', iconName: 'settings', id: 'seg-4', disabled: false },
-                { text: 'Segment-5', iconName: 'settings', id: 'seg-5', disabled: false },
-                { text: 'Segment-6 Logs Insights QL', iconName: 'settings', id: 'seg-6', disabled: false },
+                { text: 'Logs Insights QL', id: 'seg1-1', disabled: false },
+                { text: 'OpenSearch PPL - new', id: 'seg1-2', disabled: false },
+                { text: 'OpenSearch SQL - new', id: 'seg1-3', disabled: false },
               ]}
-              onChange={event => setSelectedId(event.detail.selectedId)}
-              selectedId={selectedId}
+              onChange={event => setSelecteFirstdId(event.detail.selectedId)}
+              selectedId={selectedFirstId}
               label="Segmented Control Label"
             />
             <Select
@@ -42,6 +38,21 @@ export default function SegmentedControlPage() {
             <Button>Button</Button>
           </SpaceBetween>
         </Box>
+        <Box margin={{ horizontal: 'm', vertical: 'xxl' }}>
+          <SegmentedControl
+            options={[
+              { text: 'Segment-1', iconName: 'settings', id: 'seg-1', disabled: false },
+              { text: 'S2', iconName: 'settings', id: 'seg-2', disabled: false },
+              { text: 'S3', iconName: 'settings', id: 'seg-3', disabled: false },
+              { text: 'Segment-4 Logs Insights QL', iconName: 'settings', id: 'seg-4', disabled: false },
+              { text: 'Segment-5', iconName: 'settings', id: 'seg-5', disabled: false },
+              { text: 'Segment-6 Logs Insights QL', iconName: 'settings', id: 'seg-6', disabled: false },
+            ]}
+            onChange={event => setSelectedId(event.detail.selectedId)}
+            selectedId={selectedId}
+            label="Segmented Control Label"
+          />
+        </Box>
       </SpaceBetween>
     </article>
   );

From 8d1e30fc21151c0d9ae78a3aff9d83ec868298d4 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 7 Feb 2025 13:27:18 +0100
Subject: [PATCH 5/7] update example to add icon only version

---
 pages/segmented-control/simple.page.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/pages/segmented-control/simple.page.tsx b/pages/segmented-control/simple.page.tsx
index 7384fd3542..454cbd000f 100644
--- a/pages/segmented-control/simple.page.tsx
+++ b/pages/segmented-control/simple.page.tsx
@@ -7,6 +7,7 @@ import SegmentedControl from '~components/segmented-control';
 
 export default function SegmentedControlPage() {
   const [selectedFirstId, setSelecteFirstdId] = useState<string | null>('seg1-1');
+  const [selectedSecondId, setSelecteSecondId] = useState<string | null>('seg2-1');
   const [selectedId, setSelectedId] = useState<string | null>('seg-4');
   return (
     <article>
@@ -17,8 +18,8 @@ export default function SegmentedControlPage() {
             <SegmentedControl
               options={[
                 { text: 'Logs Insights QL', id: 'seg1-1', disabled: false },
-                { text: 'OpenSearch PPL - new', id: 'seg1-2', disabled: false },
-                { text: 'OpenSearch SQL - new', id: 'seg1-3', disabled: false },
+                { text: 'OpenSearch PPL', id: 'seg1-2', disabled: false },
+                { text: 'OpenSearch SQL', id: 'seg1-3', disabled: false },
               ]}
               onChange={event => setSelecteFirstdId(event.detail.selectedId)}
               selectedId={selectedFirstId}
@@ -38,6 +39,18 @@ export default function SegmentedControlPage() {
             <Button>Button</Button>
           </SpaceBetween>
         </Box>
+        <Box margin={{ horizontal: 'm', vertical: 'xxl' }}>
+          <SegmentedControl
+            options={[
+              { iconName: 'view-horizontal', id: 'seg2-1', disabled: false },
+              { iconName: 'view-vertical', id: 'seg2-2', disabled: false },
+              { iconName: 'view-full', id: 'seg2-3', disabled: false },
+            ]}
+            onChange={event => setSelecteSecondId(event.detail.selectedId)}
+            selectedId={selectedSecondId}
+            label="Segmented Control Label"
+          />
+        </Box>
         <Box margin={{ horizontal: 'm', vertical: 'xxl' }}>
           <SegmentedControl
             options={[

From 9bc7ec873cdbd6938daa71c09345924653d7718f Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 10 Feb 2025 12:06:47 +0100
Subject: [PATCH 6/7] adjust space

---
 src/segmented-control/segment.scss | 2 +-
 src/segmented-control/styles.scss  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
index f4cd2c5666..efaa7cf302 100644
--- a/src/segmented-control/segment.scss
+++ b/src/segmented-control/segment.scss
@@ -127,7 +127,7 @@ $selected-color: awsui.$color-text-segment-active;
   &:not(:last-child)::after {
     content: '';
     position: absolute;
-    inset-inline-end: -6px;
+    inset-inline-end: -5px;
     inset-block-start: 6px;
     block-size: calc(100% - 12px);
     inline-size: 1px;
diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss
index eef6aee91d..0ab3313417 100644
--- a/src/segmented-control/styles.scss
+++ b/src/segmented-control/styles.scss
@@ -23,7 +23,7 @@
 .segment-part {
   display: -ms-inline-grid;
   display: inline-grid;
-  gap: 10px;
+  gap: 9px;
   border-inline: solid 2px awsui.$color-border-input-default;
   border-block: solid 2px awsui.$color-border-input-default;
   border-start-start-radius: 24px;

From 2ac493126571b37fdf7fa85ababe32f9b6ba66ca Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Tue, 11 Feb 2025 10:34:19 +0100
Subject: [PATCH 7/7] remove unnecessary styles

---
 src/segmented-control/segment.scss | 42 ------------------------------
 1 file changed, 42 deletions(-)

diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
index efaa7cf302..0eaa2eb7aa 100644
--- a/src/segmented-control/segment.scss
+++ b/src/segmented-control/segment.scss
@@ -39,11 +39,8 @@ $selected-color: awsui.$color-text-segment-active;
   @include styles.text-flex-wrapping;
   @include styles.font-button;
   letter-spacing: 0.25px;
-  // border-block: styles.$control-border-width solid $default-border-color;
-  // border-inline: styles.$control-border-width solid $default-border-color;
   padding-block: 2px;
   padding-inline: calc(awsui.$space-button-horizontal - 4px);
-  //border-inline-end-width: 0;
   background: $default-background;
   color: $default-color;
   border-inline: none;
@@ -73,45 +70,19 @@ $selected-color: awsui.$color-text-segment-active;
     @include styles.focus-highlight(awsui.$space-segmented-control-focus-outline-gutter);
   }
 
-  // &:last-child {
-  //   border-inline-end-width: styles.$control-border-width;
-  //   border-start-start-radius: 4px;
-  //   border-start-end-radius: 20px;
-  //   border-end-start-radius: 4px;
-  //   border-end-end-radius: 20px;
-  // }
-  // &:first-child {
-  //   border-start-start-radius: 20px;
-  //   border-start-end-radius: 4px;
-  //   border-end-start-radius: 20px;
-  //   border-end-end-radius: 4px;
-  // }
-
   &.disabled {
     background: $disabled-background;
-    //border-color: $disabled-border-color;
     color: $disabled-color;
   }
 
-  &:not(.disabled) + .segment.disabled {
-    //border-inline-start-color: $default-border-color;
-  }
-
   &.selected {
     background: $selected-background;
-    //border-color: $selected-border-color;
     color: $selected-color;
-
-    & + .segment,
-    & + .segment.disabled {
-      //border-inline-start-color: $selected-border-color;
-    }
   }
 
   &:hover:not(.selected):not(.disabled):not(:focus) {
     background: $hover-background;
     color: $hover-color;
-    //border-color: $hover-border-color;
     cursor: pointer;
 
     & + .segment:not(.selected) {
@@ -119,11 +90,6 @@ $selected-color: awsui.$color-text-segment-active;
     }
   }
 
-  &.selected + .segment:hover:not(.selected):not(.disabled):not(:focus) {
-    //border-inline-start-color: $selected-border-color;
-  }
-
-  // Add dividers after each button except the last one
   &:not(:last-child)::after {
     content: '';
     position: absolute;
@@ -134,14 +100,6 @@ $selected-color: awsui.$color-text-segment-active;
     background: awsui.$color-border-input-default;
     z-index: 1;
   }
-
-  // &:has(+ .selected)::after {
-  //   content: none;
-  // }
-
-  // &.selected::after {
-  //   content: none;
-  // }
 }
 
 .icon {