Fix border radius nav (#8626)

### WHY are these changes introduced?

![Screenshot 2023-03-10 at 11 04 07
am](https://user-images.githubusercontent.com/19199063/224219789-ef2bca5e-98af-464b-b874-73ec5ea0f256.png)

When pressing down on a Navigation Item the border radius is lost and it
becomes square

### WHAT is this pull request doing?

Moving styles to the element where the background color and radius
should belong.

---------

Co-authored-by: Marc Thomas <[email protected]>

Author: alex-page

.changeset/grumpy-donuts-vanish.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fix border radius on active/pressed navigation items

polaris-react/src/components/Navigation/Navigation.scss

@@ -113,6 +113,14 @@ $disabled-fade: 0.6;
   @include nav-item-attributes;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: relative;
+
+  border-radius: var(--p-border-radius-1);
+
+  &:is(:hover, :focus-visible) {
+    background: var(--p-background-hovered);
+    color: var(--p-text);
+    text-decoration: none;
+  }
 }
 
 .Item-selected {
@@ -236,13 +244,6 @@ $disabled-fade: 0.6;
   flex-wrap: nowrap;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: 100%;
-  border-radius: var(--p-border-radius-1);
-
-  &:hover {
-    background: var(--p-background-hovered);
-    color: var(--p-text);
-    text-decoration: none;
-  }
 
   &.ItemInnerDisabled {
     pointer-events: none;