1 files changed, 70 insertions, 0 deletions
diff --git a/src/scss/layout/_nav.scss b/src/scss/layout/_nav.scss
new file mode 100644
index 0000000..98e4cb5
--- /dev/null
+++ b/src/scss/layout/_nav.scss
@@ -0,0 +1,70 @@
+@use "../abstracts/functions" as fun;
+@use "../abstracts/placeholders";
+
+.nav {
+  text-align: center;
+
+  &__label {
+    font-weight: 600;
+  }
+
+  &__list {
+    @extend %reset-list;
+
+    .btn {
+      width: 100%;
+    }
+  }
+
+  &:not(&--footer) &__item {
+    margin: fun.get-var(spacing-2xs) 0;
+  }
+
+  &:not(&--footer) &__link {
+    background-image: linear-gradient(
+      to left,
+      #{fun.get-var(color-bg)} 0,
+      #{fun.get-var(color-bg)} 50%,
+      #{fun.get-var(color-primary)} 50%
+    );
+    background-position: 100% 0;
+    background-size: 200% 100%;
+    border: fun.convert-px(3) solid fun.get-var(color-border);
+    border-radius: fun.convert-px(50);
+    display: block;
+    font-weight: 600;
+    margin: auto;
+    padding: fun.get-var(spacing-3xs);
+    position: relative;
+    text-decoration: none;
+    transition: all 0.4s ease-in-out 0s;
+    width: 75%;
+
+    &:hover,
+    &:focus {
+      background-position: 0 0;
+      color: fun.get-var(color-fg-inverted);
+    }
+
+    &:active {
+      background-position: 100% 0;
+      color: fun.get-var(color-primary-dark);
+      text-decoration: fun.convert-px(1) solid underline;
+    }
+
+    &--selected {
+      background: fun.get-var(color-primary-dark);
+      box-shadow: inset 0 0 0 4px fun.get-var(color-bg);
+      color: fun.get-var(color-fg-inverted);
+
+      &:hover,
+      &:focus {
+        background: fun.get-var(color-primary-light);
+      }
+    }
+  }
+
+  .btn {
+    margin: auto;
+  }
+}