From a9330d157014f2d42aaecd51b8746197b43af63a Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Sat, 12 Apr 2025 06:13:17 +0200
Subject: [PATCH] fix: :bug: prevent styles from bleeding into other components

---
 src/components/navigation.webc | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/navigation.webc b/src/components/navigation.webc
index 41bea9e..d5e40b6 100644
--- a/src/components/navigation.webc
+++ b/src/components/navigation.webc
@@ -1,4 +1,4 @@
-<nav :aria-label="label">
+<nav class="character-nav" :aria-label="label">
   <label for="nav-toggle">
     <icon icon="bars" webc:nokeep></icon>
   </label>
@@ -22,7 +22,7 @@
 </nav>
 
 <style>
-  nav {
+  .character-nav {
     --nav-spacing: 1em;
     --nav-background-color: var(--clr-nav-background);
     --nav-border: var(--border-thin) solid var(--clr-box-border);
@@ -49,17 +49,17 @@
       --nav-spacing: 2em;
     }
 
-    &:has(input:checked) {
-      & ul {
+    &:has(#nav-toggle:checked) {
+      & .list {
         opacity: 1;
       }
 
-      & li {
+      & .item {
         height: 100%;
       }
     }
 
-    & label {
+    & label[for='nav-toggle'] {
       width: 1.5em;
       height: 1.5em;
       margin-block: 0.75em;
@@ -74,11 +74,11 @@
       }
     }
 
-    & input {
+    & #nav-toggle {
       display: none;
     }
 
-    & ul {
+    & .list {
       --nav-items-position: absolute;
       --nav-items-orientation: column nowrap;
 
@@ -113,12 +113,12 @@
       }
     }
 
-    & li {
+    & .item {
       overflow: hidden;
       height: 0;
       transition: height 0.4s ease-in-out;
 
-      @media (min-width:35em) {
+      @media (min-width: 35em) {
         height: 100%;
       }
     }