touch up tabs

2 files changed, 15 insertions, 21 deletions

diff --git a/build/postcss.js b/build/postcss.js
index 0111630..9a2d81f 100644
--- a/build/postcss.js
+++ b/build/postcss.js
@@ -6,7 +6,9 @@ import { brotliCompress as brotli, gzip } from 'node:zlib'
 import postcss from 'postcss'
 
 // Plugins
-import presetEnv from 'postcss-preset-env'
+
+import nesting from 'postcss-nesting'
+import customSelectors from 'postcss-custom-selectors'
 import atImport from 'postcss-import'
 import importGlob from 'postcss-import-ext-glob'
 import mixins from 'postcss-mixins'
@@ -27,13 +29,8 @@ const build = async () => {
 	const postcssMain = postcss([
 		importGlob(),
 		atImport(),
-		presetEnv({
-			browsers: 'supports css-variables',
-			stage: 0,
-			features: {
-				'custom-properties': false,
-			},
-		}),
+		nesting(),
+		customSelectors(),
 		mixins(),
 	])
 
diff --git a/src/components/tabs.css b/src/components/tabs.css
index bf17767..e524518 100644
--- a/src/components/tabs.css
+++ b/src/components/tabs.css
@@ -2,22 +2,21 @@
 [role="tablist"] {
     display: flex;
     gap: .5ch;
-    overfiow-x: auto;
     scrollbar-width: thin;
 }
 
-[role="tab"] {
+[role="tab"][role="tab"] {
     all: initial;
 
     padding: 0 calc(var(--rhythm) / 4);
     margin: 0;
     min-height: var(--rhythm);
 
-    border: 1px solid var(--faded-fg);
+    border: solid var(--accent);
+    border-width: 1px 1px 0 1px;
+    border-block-end-color: transparent;
     background: var(--bg-3);
 
-    transform: translateY(1px);
-
     border-start-start-radius: .4em;
     border-start-end-radius: .4em;
 
@@ -25,15 +24,12 @@
         outline-bottom: none;
     }
     
-    &:active {
-        transform: translateY(.2em);
-        clip-path: inset(0 0 calc(.2em - 1px) 0);
-        border-block-end: 1px solid var(--bg);
-    }
-    
-    &[aria-selected="true"] {
+    &:active, &[aria-selected="true"] {
+        transform: none;
+        bottom: -1px;
+        position: relative;
         background: var(--bg-2);
-        border-block-end: 1px solid var(--bg);
+        border-block-end: 1px solid var(--bg-2);
     }
 }
 
@@ -42,4 +38,5 @@
     margin-block-start: 0;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
+    z-index: 1;
 }