fix: Use inset border for highlighting selected items in select and multiselect

Author: avinashbot

src/internal/components/selectable-item/styles.scss

@@ -68,6 +68,12 @@
       border-color: awsui.$color-border-dropdown-item-dimmed-hover;
       background-color: awsui.$color-background-dropdown-item-dimmed;
     }
+    &.is-keyboard {
+      border-color: awsui.$color-border-dropdown-item-focused;
+      &:not(.visual-refresh) {
+        box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
+      }
+    }
   }
 
   &.selected {
@@ -80,8 +86,21 @@
       border-end-end-radius: 0;
     }
     &.highlighted {
-      border-color: awsui.$color-border-dropdown-item-hover;
-      z-index: 3;
+      border-color: awsui.$color-border-dropdown-item-selected;
+      outline: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
+      outline-offset: calc(-2 * #{awsui.$border-item-width});
+      &.is-keyboard {
+        border-color: awsui.$color-border-dropdown-item-selected;
+        outline-color: awsui.$color-border-dropdown-item-focused;
+      }
+
+      &:not(.visual-refresh) {
+        border-color: awsui.$color-border-dropdown-item-hover;
+        outline: none;
+        &.is-keyboard {
+          border-color: awsui.$color-border-dropdown-item-focused;
+        }
+      }
     }
   }
 
@@ -90,13 +109,6 @@
     border-start-end-radius: 0;
   }
 
-  &.highlighted.is-keyboard {
-    border-color: awsui.$color-border-dropdown-item-focused;
-    &:not(.visual-refresh) {
-      box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
-    }
-  }
-
   &.parent {
     font-weight: bold;
     color: awsui.$color-text-dropdown-group-label;