1 files changed, 133 insertions, 0 deletions
diff --git a/apps/web-shared/src/styles/components/tabbed-navigation.scss b/apps/web-shared/src/styles/components/tabbed-navigation.scss
new file mode 100644
index 0000000..4090fca
--- /dev/null
+++ b/apps/web-shared/src/styles/components/tabbed-navigation.scss
@@ -0,0 +1,133 @@
+@use '../base' as *;
+
+/* --------------------------------
+
+File#: _1_tabbed-navigation-v2
+Title: Tabbed Navigation v2
+Descr: Tabbed (secondary) navigation
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.tabs-nav-v2 {
+  display: flex;
+  flex-wrap: wrap;
+
+  .tab-v2 {
+    display: inline-block; // flexbox fallback
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+.tabs-nav-v2__item {
+  display: inline-block;
+  padding: var(--space-xxs) var(--space-sm);
+  color: inherit;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.tabs-nav-v2__item--selected,
+.tabs-nav-v2__item[aria-selected="true"] {
+  color: var(--color-bg);
+  background-color: var(--color-contrast-higher);
+}
+
+@include breakpoint(md) {
+  .tabs-nav-v2 {
+    .tab-v2 {
+      margin: 0;
+    }
+  }
+
+  .tabs-nav-v2__item {
+    background-color: transparent;
+    margin: var(--space-xxs) var(--space-sm);
+    padding: var(--space-xxxs) var(--space-xxs) !important;
+    border-radius: var(--radius-md);
+
+    &:hover {
+      background-color: alpha(var(--color-primary), 0.035);
+      color: var(--color-primary);
+    }
+  }
+  
+  .tabs-nav-v2__item--selected,
+  .tabs-nav-v2__item[aria-selected="true"] {
+    
+    background-color: alpha(var(--color-primary), 0.075);
+    color: var(--color-primary);
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: calc(var(--tabs-nav-border-width) * -1);
+      left: 0;
+      width: 100%;
+      height: var(--tabs-nav-border-width);
+      background-color: var(--color-bg);
+    }
+
+    &:hover {
+      background-color: alpha(var(--color-primary), 0.075);
+    }
+  }
+}
+
+:root {
+  --s-tabs-border-bottom-width: 1px;
+  --s-tabs-selected-item-border-bottom-width: 1px;
+}
+
+.s-tabs {
+  position: relative;
+
+  &::after { /* gradient - truncate text */
+    content: '';
+    position: absolute;
+    right: -1px;
+    top: 0;
+    height: calc(100% - var(--s-tabs-border-bottom-width));
+    width: 2em;
+    pointer-events: none;
+    z-index: 1;
+  }
+}
+
+.s-tabs__list {
+  display: flex;
+  overflow: auto;
+  -webkit-overflow-scrolling: auto;
+
+  &::after { /* border bottom */
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: var(--s-tabs-border-bottom-width);
+    left: 0;
+    bottom: 0;
+    background-color: var(--color-contrast-lower);
+  }
+}
+
+.s-tabs__link {
+  color: var(--color-contrast-medium);
+  text-decoration: none;
+  display: inline-block;
+  padding: var(--space-xs) var(--space-sm);
+  white-space: nowrap;
+  border-bottom: var(--s-tabs-selected-item-border-bottom-width) solid transparent;
+  z-index: 1;
+
+  &:hover:not(.s-tabs__link--current) {
+    color: var(--color-contrast-high);
+  }
+}
+
+.s-tabs__link--current {
+  position: relative;
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+}