From 28c7fac9f0b740473575200051bc2983ec5c9be9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 17:49:56 +0200
Subject: implement list item styles

---
 src/App.scss | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index 8c60a05d..219269a1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -384,7 +384,8 @@ nav {
   }
 }
 
-.menu-item {
+.menu-item,
+.list-item {
   display: block;
   box-sizing: border-box;
   border: none;
@@ -397,9 +398,11 @@ nav {
   color: inherit;
   clear: both;
   position: relative;
-  border-bottom: 1px solid;
   white-space: nowrap;
   border-color: var(--border);
+  border-style: solid;
+  border-width: 0;
+  border-top-width: 1px;
   width: 100%;
   line-height: var(--__line-height);
   padding: var(--__vertical-gap) var(--__horizontal-gap);
@@ -408,8 +411,28 @@ nav {
   --__horizontal-gap: 0.75em;
   --__vertical-gap: 0.5em;
 
+  &.-active,
+  &:hover {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+  }
+
+  &.-active + &,
+  &:hover + & {
+    border-top-width: 0;
+  }
+
+  &:hover + .menu-item-collapsible:not(.-expanded) + &,
+  &.-active + .menu-item-collapsible:not(.-expanded) + & {
+    border-top-width: 0;
+  }
+
+  &[aria-expanded="true"] {
+    border-bottom-width: 1px;
+  }
+
   a,
-  button {
+  button:not(.button-default) {
     text-align: initial;
     padding: 0;
     background: none;
@@ -425,12 +448,13 @@ nav {
   &:first-child {
     border-top-right-radius: var(--roundness);
     border-top-left-radius: var(--roundness);
+    border-top-width: 0;
   }
 
   &:last-child {
     border-bottom-right-radius: var(--roundness);
     border-bottom-left-radius: var(--roundness);
-    border: none;
+    border-bottom-width: 0;
   }
 }
 
-- 
cgit v1.2.3-70-g09d2