Autocomplete item selected state (#2177)

* for real though

* Create mighty-toes-nail.md

* Stylelint auto-fixes

* Update mighty-toes-nail.md

Co-authored-by: Actions Auto Build <actions@github.com>

.changeset/mighty-toes-nail.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Autocomplete item selected state 

src/actionlist/action-list-item.scss

@@ -1,9 +1,9 @@
 // stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
 
-@mixin activeIndicatorLine {
+@mixin activeIndicatorLine($padding-left: -$actionList-item-padding-horizontal) {
   position: absolute;
   top: calc(50% - 12px);
-  left: -$actionList-item-padding-horizontal;
+  left: $padding-left;
   width: $spacer-1;
   height: $spacer-4;
   content: '';
@@ -113,10 +113,32 @@
     }
   }
 
-  // active state [aria-current]
+  // Autocomplete [aria-selected] items
 
-  &.ActionList-item--navActive,
   &[aria-selected='true'] {
+    font-weight: $font-weight-normal;
+    background: var(--color-action-list-item-default-selected-bg);
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-action-list-item-default-hover-bg);
+      }
+    }
+
+    &::before,
+    + .ActionList-item::before {
+      visibility: hidden;
+    }
+
+    // blue accent line
+    &::after {
+      @include activeIndicatorLine(-$spacer-1);
+    }
+  }
+
+  // active state [aria-current]
+
+  &.ActionList-item--navActive {
     &:not(.ActionList-item--subItem) {
       .ActionList-item-label {
         font-weight: $font-weight-bold;