From 6096c761d731d58240db64d4afe7d22974c08649 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Thu, 3 Oct 2024 14:47:48 +0200
Subject: [PATCH] chore(styles): implemented PR feedback

---
 .../components/forms/switch/switch.stories.ts |  2 +-
 .../styles/src/components/form-check.scss     | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
index 2ebde7a6ce..7448501bb7 100644
--- a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
+++ b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
@@ -18,7 +18,7 @@ const meta: MetaComponent = {
     },
   },
   args: {
-    labelPosition: 'before',
+    labelPosition: 'after',
     label: 'Notifications',
     hiddenLabel: false,
     checked: false,
diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss
index f546bae0a9..f9e7a20494 100644
--- a/packages/styles/src/components/form-check.scss
+++ b/packages/styles/src/components/form-check.scss
@@ -223,7 +223,15 @@ $switch-handle-icon-disabled: url("data:image/svg+xml,<svg viewBox='0 0 32 32' x
     $color: tokens.get('switch', 'focus-stroke'),
     $style: tokens.get('switch', 'focus-border-style')
   ) {
-    border-radius: tokens.get('switch', 'focus-border-radius');
+    width: fit-content;
+
+    &:not(:has(> input[aria-label])) {
+      border-radius: tokens.get('switch', 'focus-border-radius');
+    }
+
+    &:has(> input[aria-label]) {
+      border-radius: tokens.get('switch', 'border-radius-round');
+    }
   }
 
   .form-check-input {
@@ -288,7 +296,7 @@ $switch-handle-icon-disabled: url("data:image/svg+xml,<svg viewBox='0 0 32 32' x
         border-color: tokens.get('switch', 'handle-selected-stroke');
       }
 
-      & + .form-check-label {
+      + .form-check-label {
         color: tokens.get('switch', 'text-selected-fg');
       }
     }
@@ -335,7 +343,7 @@ $switch-handle-icon-disabled: url("data:image/svg+xml,<svg viewBox='0 0 32 32' x
           GrayText;
       }
 
-      & + .form-check-label {
+      + .form-check-label {
         color: tokens.get('switch', 'text-disabled-fg');
       }
 
@@ -381,12 +389,13 @@ $switch-handle-icon-disabled: url("data:image/svg+xml,<svg viewBox='0 0 32 32' x
       border-color: tokens.get('switch', 'handle-hover-stroke');
     }
 
-    &::before {
-      background-color: transparent;
+    &:checked::before {
+      background-color: tokens.get('switch', 'element-hover-bg');
     }
 
     @include utility-mx.high-contrast-mode {
       border-color: Highlight;
+
       &::after {
         background-color: CanvasText;
       }