@vixcom/ui 1.7.1 → 1.7.3

package/dist/css/menu.css

@@ -5,6 +5,14 @@
 *              2. full-menu (fullscreen floating)
 *              2. float-menu (miniscreen corner floating)
 */
+/* HACK: use 1% in css calc to insure the unit is applied to the variable ex: calc(1% * var(--the-variable)) */
+:root {
+  --side-menu-width-sm: 80;
+  --side-menu-width-md: 15;
+  --side-menu-width-lg: 25;
+  --side-menu-width-lg-mini: 10;
+}
+
 input.main-menu-trigger {
   /* @include absolute-content; */
   position: fixed;
@@ -23,25 +31,8 @@ input.main-menu-trigger::after {
 input.main-menu-trigger, input.main-menu-trigger::before, input.main-menu-trigger::after {
   background-color: transparent;
 }
-input.main-menu-trigger:checked ~ main > footer, input.main-menu-trigger:checked ~ main + footer,
-input.main-menu-trigger:checked ~ .page > footer,
-input.main-menu-trigger:checked ~ .page + footer,
-input.main-menu-trigger:checked ~ * main > footer,
-input.main-menu-trigger:checked ~ * main + footer,
-input.main-menu-trigger:checked ~ * .page > footer,
-input.main-menu-trigger:checked ~ * .page + footer {
-  background-color: var(--secondary);
-  color: var(--secondary-c);
-}
 .main-menu-toggle {
-  position: relative;
   font-size: 120%;
-  /* z-index: 1; */
-}
-
-.menu-container {
-  max-width: 100%;
-  overflow: hidden;
 }
 
 nav,
@@ -57,9 +48,9 @@ nav,
   align-items: center;
 }
 
+.menu-container,
 .menu-container nav,
-.menu-container .nav, .menu-container {
-  flex: 1 1 100%;
+.menu-container .nav {
   gap: 0.5rem;
 }
 
@@ -83,52 +74,41 @@ nav .item .label,
   height: 100%;
   transition: 0.5s;
 }
-.main-menu-container .side-menu nav,
-.main-menu-container .side-menu .nav,
-.main-menu-container .side-menu .menu-container {
-  flex-direction: column;
-}
-.main-menu-container .menu-logo {
-  min-width: 7.5rem;
-}
-.main-menu-container .menu-logo-alt {
-  display: none;
-}
-.main-menu-container.rtl .page {
-  order: -1;
-}
 .main-menu-container:is(body) {
   width: 100vw;
   height: 100vh;
 }
-.main-menu-container:has(> .side-menu).grid {
-  grid-template-columns: 1fr 4fr;
-}
-.main-menu-container:has(> .side-menu).grid:has(> header + main) {
-  grid-auto-rows: 1fr;
-}
-.main-menu-container:has(> .side-menu).grid main {
-  grid-row: span 18;
-}
-.main-menu-container:has(> .side-menu) > main section,
-.main-menu-container:has(> .side-menu) > .page section {
-  height: 100%;
-  min-height: unset;
-}
-.main-menu-container:not(:has(> .side-menu)).flex {
-  flex-direction: column;
-}
 .main-menu-container.flex {
   display: flex;
 }
+.main-menu-container.flex:not(:has(> .side-menu)) {
+  flex-direction: column;
+}
 .main-menu-container.flex > .side-menu {
-  flex-basis: 25%;
+  --side-menu-width: var(--side-menu-width-lg);
 }
 .main-menu-container.grid {
   display: grid;
 }
-.main-menu-container.grid > .side-menu {
-  grid-row: span 20;
+.main-menu-container.grid:has(> .side-menu) {
+  grid-auto-flow: column;
+  grid-template-columns: calc(1% * var(--side-menu-width)) 1fr;
+}
+.main-menu-container.grid:has(> .side-menu) > *:not(.side-menu) {
+  grid-column: 2;
+}
+.main-menu-container.grid:has(> .side-menu) > header {
+  /* grid-row: 1; */
+}
+.main-menu-container.grid:has(> .side-menu) > footer {
+  /* grid-row: 3; */
+}
+.main-menu-container > main,
+.main-menu-container > .main-page,
+.main-menu-container > .content {
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
 }
 
 .main-menu {
@@ -136,14 +116,25 @@ nav .item .label,
   padding: 0;
   margin: 0;
   transition: transform 0.5s;
+  overflow: scroll;
   z-index: 1;
 }
+.main-menu:not(.side-menu) .menu-header,
+.main-menu:not(.side-menu) .menu-footer {
+  flex: 1 1 auto;
+}
 .main-menu:not(.side-menu:has(> .menu-snap)) {
   flex-direction: column;
 }
 .main-menu .menu-snap img {
   max-height: 2.5rem;
 }
+.main-menu .main-logo img {
+  width: 100%;
+}
+.main-menu .menu-logo-alt {
+  display: none;
+}
 .main-menu nav,
 .main-menu .nav {
   font-size: 120%;
@@ -194,14 +185,18 @@ nav .item .label,
 .main-menu .nav .item:hover::before {
   opacity: 0.125;
 }
+.main-menu nav .item .icon,
+.main-menu .nav .item .icon {
+  max-width: 2.5rem;
+}
 .main-menu nav .item .label,
 .main-menu .nav .item .label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.main-menu > .main-menu-toggle {
-  font-size: 150%;
+.main-menu .main-menu-toggle {
+  aspect-ratio: unset;
 }
 
 .menu-snap {
@@ -211,12 +206,13 @@ nav .item .label,
 }
 .menu-snap .item {
   padding: 0.125%;
-  z-index: 1;
 }
 
 .side-menu {
   position: relative;
   height: 100%;
+  grid-row: 1/-1;
+  flex-basis: calc(1% * var(--side-menu-width));
   transition: flex-basis 0.5s, transform 0.5s, opacity 0.25s;
   overflow: hidden;
   /* side-menu scrollbar */
@@ -231,112 +227,109 @@ nav .item .label,
 .side-menu .menu-footer .title {
   transition: height 0.5s linear 0.5s, opacity 0.5s linear 0.5s;
 }
-.side-menu nav .item, .side-menu .nav .item {
-  min-width: auto;
-}
-
-/* Page */
-.page,
-main {
-  display: flex;
+.side-menu nav,
+.side-menu .nav,
+.side-menu .menu-container {
+  flex: 1 1 auto;
   flex-direction: column;
-  position: relative;
+}
+.side-menu .menu-container {
   width: 100%;
-  height: 100%;
-  margin: 0;
-  flex: 1 1 100%;
-  transition: width 0.5s;
-  overflow-y: scroll;
-  z-index: 0;
 }
-
-.main-menu-container > footer {
-  background-color: var(--primary);
-  color: var(--primary-c);
+.side-menu nav .item, .side-menu .nav .item {
+  min-width: auto;
 }
 
 /* Mobile or PC (Tablet Excluded) */
 /* Above Tablets/Mini PC */
 @media (min-width: 769px) {
-  .main-menu-container .float-menu nav,
-  .main-menu-container .float-menu .nav,
-  .main-menu-container .full-menu nav,
-  .main-menu-container .full-menu .nav {
+  .float-menu nav,
+  .float-menu .nav,
+  .full-menu nav,
+  .full-menu .nav {
     overflow-x: scroll;
   }
-  .main-menu-container input.main-menu-trigger:not(:checked) ~ .side-menu > .menu-snap, .main-menu-container input.main-menu-trigger:not(:checked) ~ * .side-menu > .menu-snap {
+  input.main-menu-trigger:not(:checked) ~ .side-menu > .menu-snap {
     /* flex-basis: 25%; */
   }
   .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
-    grid-template-columns: 0fr 1fr;
+    --side-menu-width: 0;
   }
   .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) {
-    grid-template-columns: 1fr 10fr;
+    --side-menu-width: calc(
+      var(--side-menu-width-lg-mini) /
+        ((var(--side-menu-width-lg-mini) / 100) + 1)
+    );
   }
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .menu-logo {
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-logo {
     display: none;
   }
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .menu-logo-alt {
-    display: block;
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-logo-alt {
+    display: unset;
   }
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .title {
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .nav .title {
     opacity: 0;
     height: 0;
     margin-bottom: 0;
   }
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) nav .item,
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .nav .item {
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu nav .item,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu nav .title,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .nav .item,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .nav .title,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-header .item,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-header .title,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-footer .item,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-footer .title {
     justify-content: center;
   }
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) nav .item .label,
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) nav .title .label,
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .nav .item .label,
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .nav .title .label,
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .item .label,
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .title .label,
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-footer .item .label,
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-footer .title .label {
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu nav .item .label,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu nav .title .label,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .nav .item .label,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .nav .title .label,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-header .item .label,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-header .title .label,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-footer .item .label,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-footer .title .label {
     opacity: 0;
     transform: translateX(100%);
     position: absolute;
   }
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) nav .title,
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .nav .title,
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .title,
-  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-footer .title {
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu nav .title,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .nav .title,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-header .title,
+  .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-footer .title {
     border-bottom: thin solid;
     padding: 0;
   }
-  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu:not(.mini),
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu:not(.mini) {
-    flex-basis: 0;
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu:not(.mini) {
+    --side-menu-width: 0;
+    /* flex-basis: 0; */
   }
-  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini {
-    flex-basis: 5%;
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini {
+    --side-menu-width: var(--side-menu-width-lg-mini);
   }
-  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini:has(> .menu-snap),
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini:has(> .menu-snap) {
-    flex-basis: 10%;
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini:not(:has(> .menu-snap)) {
+    --side-menu-width: calc(var(--side-menu-width-lg-mini) / 2);
   }
-  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .menu-logo,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .menu-logo {
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-logo {
     display: none;
   }
-  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .menu-logo-alt,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .menu-logo-alt {
-    display: block;
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-logo-alt {
+    display: unset;
   }
-  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .title,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .title {
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .title {
     opacity: 0;
     height: 0;
     margin-bottom: 0;
   }
   .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .item,
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .title,
   .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .item,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .item,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .item {
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .title,
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .item,
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .title,
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .item,
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .title {
     justify-content: center;
   }
   .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .item .label,
@@ -346,15 +339,7 @@ main {
   .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .item .label,
   .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .title .label,
   .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .item .label,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .title .label,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .item .label,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .title .label,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .item .label,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .title .label,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .item .label,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .title .label,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-footer .item .label,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-footer .title .label {
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .title .label {
     opacity: 0;
     transform: translateX(100%);
     position: absolute;
@@ -362,98 +347,112 @@ main {
   .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .title,
   .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .title,
   .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .title,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .title,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .title,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .title,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .title,
-  .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-footer .title {
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .title {
     border-bottom: thin solid;
     padding: 0;
   }
 }
 /* Above Mobile */
 @media (min-width: 577px) {
-  .main-menu-container input.main-menu-trigger {
-    z-index: -1;
-  }
-  .main-menu-container .full-menu .menu-container,
-  .main-menu-container .full-menu .menu-container nav,
-  .main-menu-container .full-menu .menu-container .nav,
-  .main-menu-container .float-menu .menu-container,
-  .main-menu-container .float-menu .menu-container nav,
-  .main-menu-container .float-menu .menu-container .nav {
+  .full-menu .menu-container,
+  .full-menu .menu-container nav,
+  .full-menu .menu-container .nav,
+  .float-menu .menu-container,
+  .float-menu .menu-container nav,
+  .float-menu .menu-container .nav {
     align-items: center;
   }
-  .main-menu-container .full-menu .menu-container nav,
-  .main-menu-container .full-menu .menu-container .nav,
-  .main-menu-container .float-menu .menu-container nav,
-  .main-menu-container .float-menu .menu-container .nav {
+  .full-menu .menu-container nav,
+  .full-menu .menu-container .nav,
+  .float-menu .menu-container nav,
+  .float-menu .menu-container .nav {
     width: 100%;
     overflow-x: scroll;
   }
-  .main-menu-container:has(> .side-menu).grid > header, .main-menu-container:has(> .side-menu).grid footer {
-    grid-column: 2;
+  .main-menu-container.grid:has(> .side-menu) {
+    --side-menu-width: calc(
+      var(--side-menu-width-lg) / ((var(--side-menu-width-lg) / 100) + 1)
+    );
   }
 }
 /* Tablets/Mini PC (Tablet Only) */
 @media (min-width: 577px) and (max-width: 768px) {
+  .main-menu-container.grid:has(> input.main-menu-trigger:checked) > .float-menu .menu-container {
+    width: 100%;
+  }
   .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) {
-    grid-template-columns: 1fr 6fr;
+    --side-menu-width: calc(
+      var(--side-menu-width-md) / ((var(--side-menu-width-md) / 100) + 1)
+    );
   }
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-header .menu-logo {
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-logo {
     display: none;
   }
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-header .menu-logo-alt {
-    display: block;
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-logo-alt {
+    display: unset;
   }
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-header .title {
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .nav .title {
     opacity: 0;
     height: 0;
     margin-bottom: 0;
   }
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) nav .item,
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .nav .item {
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu nav .item,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu nav .title,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .nav .item,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .nav .title,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-header .item,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-header .title,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-footer .item,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-footer .title {
     justify-content: center;
   }
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) nav .item .label,
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) nav .title .label,
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .nav .item .label,
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .nav .title .label,
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-header .item .label,
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-header .title .label,
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-footer .item .label,
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-footer .title .label {
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu nav .item .label,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu nav .title .label,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .nav .item .label,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .nav .title .label,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-header .item .label,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-header .title .label,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-footer .item .label,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-footer .title .label {
     opacity: 0;
     transform: translateX(100%);
     position: absolute;
   }
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) nav .title,
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .nav .title,
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-header .title,
-  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-footer .title {
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu nav .title,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .nav .title,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-header .title,
+  .main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-footer .title {
     border-bottom: thin solid;
     padding: 0;
   }
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu, .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu {
-    flex-basis: 8.25%;
+  .main-menu-container.flex input.main-menu-trigger:checked ~ .float-menu .menu-container {
+    width: 100%;
+  }
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu {
+    --side-menu-width: var(--side-menu-width-md);
   }
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu:has(> .menu-snap), .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu:has(> .menu-snap) {
-    flex-basis: 16.5%;
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu:not(:has(> .menu-snap)) {
+    --side-menu-width: calc(var(--side-menu-width-md) / 2);
   }
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .menu-logo, .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .menu-logo {
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-logo {
     display: none;
   }
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .menu-logo-alt, .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .menu-logo-alt {
-    display: block;
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-logo-alt {
+    display: unset;
   }
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .title, .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .title {
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .title {
     opacity: 0;
     height: 0;
     margin-bottom: 0;
   }
   .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .item,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .item, .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu nav .item,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .item {
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .title,
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .item,
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .title,
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .item,
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .title,
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .item,
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .title {
     justify-content: center;
   }
   .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .item .label,
@@ -463,14 +462,7 @@ main {
   .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .item .label,
   .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .title .label,
   .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .item .label,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .title .label, .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu nav .item .label,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu nav .title .label,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .item .label,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .title .label,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .item .label,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .title .label,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-footer .item .label,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-footer .title .label {
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .title .label {
     opacity: 0;
     transform: translateX(100%);
     position: absolute;
@@ -478,119 +470,95 @@ main {
   .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .title,
   .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .title,
   .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .title,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .title, .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu nav .title,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .title,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .title,
-  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-footer .title {
+  .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .title {
     border-bottom: thin solid;
     padding: 0;
   }
-  .float-menu {
-    /* width: 50%; */
-  }
 }
 /* Tablet Below */
 @media (max-width: 768px) {
-  .main-menu-container input.main-menu-trigger:checked ~ .side-menu > .menu-snap, .main-menu-container input.main-menu-trigger:checked ~ * .side-menu > .menu-snap {
+  input.main-menu-trigger:checked ~ .side-menu > .menu-snap {
     /* flex-basis: 25%; */
   }
-  .main-menu-container input.main-menu-trigger:not(:checked) ~ .full-menu .menu-container nav,
-  .main-menu-container input.main-menu-trigger:not(:checked) ~ .full-menu .menu-container .nav,
-  .main-menu-container input.main-menu-trigger:not(:checked) ~ .float-menu .menu-container nav,
-  .main-menu-container input.main-menu-trigger:not(:checked) ~ .float-menu .menu-container .nav,
-  .main-menu-container input.main-menu-trigger:not(:checked) ~ * .full-menu .menu-container nav,
-  .main-menu-container input.main-menu-trigger:not(:checked) ~ * .full-menu .menu-container .nav,
-  .main-menu-container input.main-menu-trigger:not(:checked) ~ * .float-menu .menu-container nav,
-  .main-menu-container input.main-menu-trigger:not(:checked) ~ * .float-menu .menu-container .nav {
+  input.main-menu-trigger:not(:checked) ~ .full-menu .menu-container nav,
+  input.main-menu-trigger:not(:checked) ~ .full-menu .menu-container .nav,
+  input.main-menu-trigger:not(:checked) ~ .float-menu .menu-container nav,
+  input.main-menu-trigger:not(:checked) ~ .float-menu .menu-container .nav {
     max-height: 0;
     max-width: 0;
   }
-  .main-menu-container .float-menu .menu-container {
+  .float-menu .menu-container {
     position: fixed;
     bottom: 0;
   }
-  .main-menu-container .float-menu .menu-container.right, .main-menu-container .float-menu .menu-container:not(.left) {
+  .float-menu .menu-container.right, .float-menu .menu-container:not(.left) {
     right: 0;
   }
-  .main-menu-container .float-menu .menu-container.left {
+  .float-menu .menu-container.left {
     left: 0;
   }
 }
 /* Mobile Below */
 @media (max-width: 576px) {
+  .side-menu {
+    --side-menu-width: var(--side-menu-width-sm);
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 80%;
+    transform: translateX(-100%);
+    opacity: 0;
+    box-shadow: 0 0 50px hsla(var(--black-hs), var(--black-l), 0.25);
+  }
+  .full-menu {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
   input.main-menu-trigger:checked {
     width: 100vw;
     height: 100vh;
     background-color: hsla(var(--black-hs), var(--black-l), 0.2);
     z-index: 1;
   }
-  input.main-menu-trigger:checked ~ .main-menu:not(:has(> .menu-snap)),
-  input.main-menu-trigger:checked ~ * .main-menu:not(:has(> .menu-snap)) {
+  input.main-menu-trigger:checked ~ .main-menu {
+    --background-color: hsla(
+      var(--secondary-hs),
+      var(--secondary-l),
+      0.125
+    );
+    --color: var(--secondary-c);
+  }
+  input.main-menu-trigger:checked ~ .main-menu:not(:has(> .menu-snap), .h) {
     flex-direction: column;
   }
-  input.main-menu-trigger:checked ~ .main-menu .menu-header,
-  input.main-menu-trigger:checked ~ * .main-menu .menu-header {
+  input.main-menu-trigger:checked ~ .main-menu .menu-header {
     order: -1;
   }
-  input.main-menu-trigger:checked ~ .side-menu,
-  input.main-menu-trigger:checked ~ * .side-menu {
+  input.main-menu-trigger:checked ~ .side-menu {
     transform: translateX(0);
     opacity: 1;
   }
-  input.main-menu-trigger:checked ~ .full-menu,
-  input.main-menu-trigger:checked ~ * input.main-menu-trigger:checked ~ .full-menu,
-  input.main-menu-trigger:checked ~ * .full-menu,
-  input.main-menu-trigger:checked ~ .float-menu .menu-container,
-  input.main-menu-trigger:checked ~ * .float-menu .menu-container {
-    --background-color: hsla(
-      var(--secondary-hs),
-      var(--secondary-l),
-      0.125
-    );
+  input.main-menu-trigger:checked ~ .full-menu, input.main-menu-trigger:checked ~ .float-menu input.main-menu-trigger:checked ~ .menu-container {
     background-color: var(--background-color);
-    color: var(--secondary-c);
+    color: var(--color);
     backdrop-filter: blur(0.75rem);
   }
-  input.main-menu-trigger:checked ~ .full-menu,
-  input.main-menu-trigger:checked ~ * .full-menu {
+  input.main-menu-trigger:checked ~ .full-menu {
     position: fixed;
     transform: translateY(0);
     opacity: 1;
     font-size: 125%;
   }
-  input.main-menu-trigger:checked ~ .full-menu .menu-container,
-  input.main-menu-trigger:checked ~ * .full-menu .menu-container {
+  input.main-menu-trigger:checked ~ .full-menu .menu-container {
     background-color: unset;
   }
-  .main-menu-container input.main-menu-trigger:checked ~ .main-menu nav:not(.menu-snap), .main-menu-container input.main-menu-trigger:checked ~ .main-menu .nav:not(.menu-snap), .main-menu-container input.main-menu-trigger:checked ~ .main-menu .menu-container:not(.menu-snap), .main-menu-container input.main-menu-trigger:checked ~ * .main-menu nav:not(.menu-snap), .main-menu-container input.main-menu-trigger:checked ~ * .main-menu .nav:not(.menu-snap), .main-menu-container input.main-menu-trigger:checked ~ * .main-menu .menu-container:not(.menu-snap), .main-menu-container.flex {
-    flex-direction: column;
-  }
-  .main-menu-container.grid:has(> .side-menu) {
-    grid-template-columns: 1fr;
-  }
-  .main-menu-container .main-menu nav, .main-menu-container .main-menu .nav {
+  .main-menu nav, .main-menu .nav {
     overflow-y: scroll;
   }
-  .main-menu-container .side-menu {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 80%;
-    flex-basis: 80%;
-    transform: translateX(-100%);
-    opacity: 0;
-    box-shadow: 0 0 50px hsla(var(--black-hs), var(--black-l), 0.25);
-  }
-  .main-menu-container .full-menu {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-  .main-menu-container .full-menu .menu-header {
-    width: 100%;
+  .main-menu-container input.main-menu-trigger:checked ~ .main-menu nav:not(.menu-snap), .main-menu-container input.main-menu-trigger:checked ~ .main-menu .nav:not(.menu-snap), .main-menu-container input.main-menu-trigger:checked ~ .main-menu .menu-container:not(.menu-snap), .main-menu-container.flex {
+    flex-direction: column;
   }
 }
-
-/*# sourceMappingURL=menu.css.map */