fix: focus-ring on SideNav

Closes #1317

Author: pfulton

components/sidenav/index.css

@@ -52,24 +52,23 @@ governing permissions and limitations under the License.
 
   cursor: pointer;
 
-  transition: background-color var(--spectrum-global-animation-duration-100)
-      ease-out,
+  transition: background-color var(--spectrum-global-animation-duration-100) ease-out,
     color var(--spectrum-global-animation-duration-100) ease-out;
 
   &:focus {
     outline: none;
   }
 
-  &:focus-ring::before {
-    content: "";
+  &:before {
+    content: '';
     position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    inset-block-end: 0;
+    inset: 0;
+    pointer-events: none;
 
-    border-block: var(--spectrum-tabs-m-focus-ring-size) solid transparent;
+    border: var(--spectrum-tabs-m-focus-ring-size) solid transparent;
     border-radius: var(--spectrum-sidenav-item-border-radius);
+
+    transition: border var(--spectrum-global-animation-duration-100) ease-out;
   }
 
   .spectrum-SideNav-itemIcon {