fix border width of segmented button in hcm

swisspost · Dec 19, 2024 · 1001a2d · 1001a2d
1 parent 52fddc6
commit 1001a2d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/.changeset/stale-months-dance.md b/.changeset/stale-months-dance.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed segmented button style in HCM.
diff --git a/packages/styles/src/components/segmented-button.scss b/packages/styles/src/components/segmented-button.scss
@@ -110,6 +110,10 @@ $post-segmented-button-max-count: 8;
         transform: translateX(calc($i * -100% - $i * tokens.get('button-segmented-gap-inline')));
       }
     }
+
+    &:last-child():has(input:checked) ~ label:hover {
+      z-index: 3;
+    }
   }
 }
 
@@ -177,6 +181,10 @@ $post-segmented-button-max-count: 8;
       &:hover {
         input {
           border-color: tokens.get('button-segmented-hover-border');
+
+          @include utilities.high-contrast-mode() {
+            border-color: Highlight;
+          }
         }
       }