topbar styles

scss/sections/_navigation.scss

@@ -1,20 +0,0 @@
-.usa-header {
-  background-color: $color-white;
-}
-
-.usa-navbar {
-  height: 5rem;
-  width: 5%;
-}
-
-.usa-nav {
-  padding-top: 1rem;
-  padding-left: 0;
-}
-
-.usa-nav-primary {
-
-  li:last-child {
-    padding-left: 3rem;
-  }
-}

scss/sections/_topbar.scss

@@ -0,0 +1,71 @@
+.topbar {
+  background-color: $color-white;
+  height: $topbar-height;
+  border-bottom: 1px solid $color-black;
+
+  .topbar__navigation {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: flex-end;
+
+    > .topbar__link {
+      @include h5;
+      color: $color-primary;
+      display: inline-block;
+      height: $topbar-height;
+      line-height: $topbar-height;
+      padding: 0 ($gap * 2);
+      text-decoration: none;
+
+      > span {
+        display: inline-block;
+        height: $topbar-height;
+        line-height: $topbar-height;
+      }
+
+      &.topbar__link--primary {
+        margin-right: auto;
+        > span {
+          @include nav-border;
+        }
+
+        &:hover {
+          color: $color-white;
+          background-color: $color-primary-darkest;
+        }
+      }
+
+      &.topbar__link--secondary {
+        font-weight: normal;
+        > span {
+          @include nav-border;
+          border-bottom-width: 0;
+        }
+
+        &:hover {
+          > span {
+            @include nav-border;
+          }
+        }
+      }
+    }
+  }
+}
+
+// .usa-navbar {
+//   height: 5rem;
+//   width: 5%;
+// }
+
+// .usa-nav {
+//   padding-top: 1rem;
+//   padding-left: 0;
+// }
+
+// .usa-nav-primary {
+
+//   li:last-child {
+//     padding-left: 3rem;
+//   }
+// }