test origin nav style

src/css/nav.css

@@ -16,8 +16,7 @@
 
 @media screen and (min-width: 769px) {
   .nav-container {
-    /* width: var(--nav-width); */
-    width: 20.125rem;
+    width: var(--nav-width);
   }
 }
 
@@ -36,12 +35,10 @@
 }
 
 .nav {
-  /* background: var(--nav-background); */
-  background: var(--color-white);
+  background: var(--nav-background);
   position: relative;
   top: var(--toolbar-height);
   height: var(--nav-height);
-  border-right: 1px solid var(--color-blue-30);
 }
 
 @media screen and (min-width: 769px) {
@@ -73,8 +70,6 @@
   overflow-y: scroll;
   overscroll-behavior: none;
   height: var(--nav-panel-menu-height);
-  padding: 1.25em;
-  padding-top: 0;
 }
 
 .nav-panel-menu:not(.is-active) .nav-menu {
@@ -94,9 +89,9 @@
 
 .nav-menu {
   min-height: 100%;
+  padding: 0.5rem 0.75rem;
+  line-height: var(--nav-line-height);
   position: relative;
-  padding: 0.5rem 0.5rem 0.5rem 0;
-  line-height: 1.375;
 }
 
 .nav-menu-toggle {
@@ -127,13 +122,13 @@
   font-size: inherit;
   font-weight: var(--body-font-weight-bold);
   margin: 0;
-  padding: 0.25em 0 0.125em 0.75em;
+  padding: 0.25em 0 0.125em;
 }
 
 .nav-list {
   list-style: none;
+  margin: 0 0 0 0.75rem;
   padding: 0;
-  margin: 0;
 }
 
 .nav-menu > .nav-list + .nav-list {
@@ -142,24 +137,6 @@
 
 .nav-item {
   margin-top: 0.5em;
-  position: relative;
-}
-
-.nav-item .nav-link {
-  padding: 0.5rem 0 0.35rem 0.25rem;
-  display: block;
-  border-bottom: 1px solid transparent;
-  border-radius: 3px;
-}
-
-.nav-item .nav-link:hover {
-  border-bottom: 1px solid var(--color-bwg-main);
-  border-radius: 0;
-}
-
-.nav-item.is-current-page > a {
-  background: var(--color-bwg-main);
-  color: var(--color-white);
 }
 
 /* adds some breathing room below a nested list */
@@ -173,38 +150,6 @@
   margin: 0;
 }
 
-.nav-item[data-depth="0"] > .nav-link {
-  padding-left: 1.25rem;
-}
-
-.nav-item[data-depth="0"] > .nav-item-toggle {
-  left: 1rem;
-}
-
-.nav-item[data-depth="1"] > .nav-link {
-  padding-left: 1.75rem;
-}
-
-.nav-item[data-depth="1"] > .nav-item-toggle {
-  left: 1.5rem;
-}
-
-.nav-item[data-depth="2"] > .nav-link {
-  padding-left: 2.25rem;
-}
-
-.nav-item[data-depth="2"] > .nav-item-toggle {
-  left: 2rem;
-}
-
-.nav-item[data-depth="3"] > .nav-link {
-  padding-left: 2.75rem;
-}
-
-.nav-item[data-depth="3"] > .nav-item-toggle {
-  left: 2.5rem;
-}
-
 .nav-item:not(.is-active) > .nav-list {
   display: none;
 }
@@ -218,9 +163,8 @@
   position: absolute;
   height: calc(var(--nav-line-height) * 1em);
   width: calc(var(--nav-line-height) * 1em);
-  margin-top: 0.35em;
+  margin-top: -0.05em;
   margin-left: calc(var(--nav-line-height) * -1em);
-  top: 0.15rem;
 }
 
 .nav-item.is-active > .nav-item-toggle {