@iamproperty/components 3.8.0 → 4.0.0

package/assets/sass/components/nav.scss

@@ -1,965 +1,633 @@
 @use "../_func" as *;
 
-// #region set dark background for mobile view
-.nav .nav__mobile-bar {
-  
-  background: var(--colour-primary);
-  color: white;
-
-  @if $compatible != "true" {
-    
-    @include invert-colours();
-  }
-
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  width: rem(375);
-  
-  @include media-breakpoint-up(sm) {
-    width: 100%;
-  }
-
-  > .container {
-
-    padding-top: rem(16);
-    padding-bottom: 1rem;
-    flex-shrink: 0;
-    overflow: visible;
-  }
+:host{
+  display: flex!important;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
 }
-// #endregion
 
-// #region General styles
-.nav {
-  
-  overflow-x: hidden;
-  font-weight: bold;
-
-  &__inner, 
-  &__menu--account {
+::slotted(.brand) {
 
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
+  margin-right: auto;
+}
 
-    > .container {
+.btn-menu {
+    
+  padding: 0;
+  margin: 0 0 0 rem(32);
+  text-align: center;
+  height: rem(48);
+  padding-block: rem(12);
+  line-height: rem(24);
+  overflow: hidden;
+  position: relative;
+  background: none;
+  border: none;
+  width: rem(24);
+  text-indent: -1000%;
+  color: var(--colour-brand);
+
+  i {
+    font-size: rem(24);
+    line-height: rem(24);
+    position: absolute;
+    text-indent: 0px;
 
-      padding-top: rem(16);
-      padding-bottom: 0;
-      flex-shrink: 0;
-      overflow: visible;
-      z-index: unset;
-    }
+    width: rem(24);
+    text-align: center;
+    top: rem(12);
+    right: 0;
+    margin: 0!important;
+    transition: none!important;
   }
 
-  &__menu {
-    padding-top: rem(36);
-    padding-bottom: rem(16);
+  i + i {
+    display: none;
   }
 
-  .brand {
-    font-size: rem(36);
+  &.selected {
 
-    @include media-breakpoint-up(md) {
-      font-size: rem(60);
+    i {
+      display: none;
     }
-  }
-}
-
-.nav__logo img {
-  height: rem(36);
-  width: auto;
-
-  @include media-breakpoint-up(sm) {
-    height: rem(60);
-    width: auto;
-  }
-}
-
-.nav__search-btn,
-.nav__menu-btn {
-
-  display: flex;
 
-  label {
-    height: rem(18);
-    width: rem(24);
-    text-indent: -300%;
-    overflow: hidden;
-    position: relative;
-    cursor: pointer;
-
-    color: var(--colour-link);
-
-    &:hover,
-    &:focus {
-
-      color: var(--colour-hover);
+    i + i {
+      display: inline;
     }
+  }
 
-    &:active {
-
-      color: var(--colour-active);
-    }
+  @media screen and (max-width: 62em) {
+    > .btn {
+      display: contents;
 
-    &:before,
-    &:after {
-      content: "";
-      position: absolute;
-      width: 0%;
-      height: 2px;
-      top: calc(50% - 1px);
-      left: 0;
-      background: currentColor;
-      transform-origin: 50% 50%;
-      transition: transform 0.5s, width 0.5s;
+      display: contents;
+      color: inherit!important;
+      padding: 0!important;
+      margin: 0;
+      font-weight: normal!important;
+      line-height: inherit;
+      font-size: inherit;
+      transition: none!important;
     }
   }
-}
 
-.nav__search-btn {
+  @include media-breakpoint-up(sm) {
 
-  label {
+    margin: 0 0 0 rem(48);
+    width: auto;
+    padding-right: rem(24 + 6);
     text-indent: 0;
-    overflow: visible;
-  }
-  .icon {
-    height: rem(32);
-    width: rem(32);
-    margin-top: rem(-8);
-    margin-left: rem(-1);
-    transition: opacity 0.5s;
-    color: inherit;
-
-    &__outline {
 
-      stroke-width: 2px;
-      stroke: currentColor;
+    &.selected {
+      text-indent: -1000%;
     }
   }
-}
 
-.nav__menu-btn {
-  display: flex;
+  @include media-breakpoint-up(md) {
 
-  label {
+    width: fit-content;
+    height: auto;
+    margin: 0 0 0 3rem!important;
+    padding: 0!important;
+    text-indent: 0;
+    padding-right: 0!important;
 
-    border-top: 2px solid currentColor;
-    border-bottom: 2px solid currentColor;
-    
-    &:before,
-    &:after {
-      width: 100%;
+    &.selected {
+      text-indent: 0;
     }
-  }
-}
-
-.nav__account-btn {
-
-  label {
-    font-size: rem(18);
-    text-indent: 0;
-    overflow: visible;
-    color: var(--colour-body);
-    height: rem(48);
-    line-height: rem(48);
-    display: block;
-    border-top: 1px solid var(--colour-border);
-    border-bottom: 1px solid var(--colour-border);
-  }
-  .icon {
-    height: rem(28);
-    width: rem(28);
-    margin-top: rem(-8);
-    margin-right: rem(8);
-    transition: opacity 0.5s;
-    color: inherit;
 
-    &__outline {
+    .btn {
+      @media screen and (prefers-color-scheme: light) {
+    
+        @include reset-colours();
 
-      stroke-width: 2px;
-      stroke: currentColor;
-    }
-  }
-}
+        &:is(:hover,:focus){
+          color: var(--colour-inverted);
+        }
+      }
 
-.nav__menu > ul {
-  margin-bottom: 0;
+      margin: 0!important;
+      display: flex;
+      
+      span {
+        order: 2;
+      }
 
-  > li > a {
-    font-size: rem(18);
-    line-height: rem(32);
-    display: inline-block;
-    position: relative;
-    text-decoration: none;
+      i[class*=fa-] {
+        position: relative;
+        position: static;
+        vertical-align: bottom;
+        display: inline-block;
+        font-size: 1.2rem;
+        margin-right: 1rem!important;
+        line-height: 1em;
+      }
 
-    &.current{
-      border-left: #{rem(6)} solid var(--colour-info);
-      margin-left: rem(-20);
-      padding-left: rem(20 - 6)
+      i[class*=fa-] + i[class*=fa-] {
+        display: none;
+      }
     }
   }
 }
 
-// #endregion
-
-// #region nav search
-
-@include media-breakpoint-up(md) {
-
-  .nav__menu--search {
-    display: none;
+// #region mobile and tablet menu
+@media screen and (max-width: 62em) {
+  :host > .container {
+    display: contents;
   }
 
-  #showSearch:checked ~ .nav__inner > .nav__menu--search {
-    order: 2;
+  .menu__outer {
+    
     position: absolute;
-    top: 100%;
+    top: rem(96);
     left: 0;
     width: 100%;
+    height: calc(100vh - #{rem(96)});
+    overflow: hidden;
+    pointer-events: none;
+    transition: background 0.5s;
 
-    background: rgba(0,0,0,.6);
-    height: calc(100vh - 5rem);
-    display: block;
-  }
-}
-// #endregion
-
-// #region nav account
-
-.services {
-  line-height: 2rem;
+    &:has(.menu.open) {
 
-  li {
-    display: flex;
-    justify-content: space-between;
-  }
-    
-  .service--active {
-    &:before {
-      content: "";
-      height: 1em;
-      width: 1em;
-      display: inline-block;
-      background: var(--colour-secondary);
-      margin-right: 0.5rem;
-      margin-bottom: -0.1em;
-      border-radius: 50%;
+      background: rgba(0,0,0,0.2);
+      backdrop-filter: blur(2px);
     }
   }
-}
-
-.credits {
-  border: 2px solid var(--colour-primary);
-  padding: 1rem;
-  margin-bottom: 2rem;
-  border-radius: rem(10);
-
-  .h5,
-  ul {
-    padding-inline: 1rem;
-  }
-
-
-  > *:last-child {
-    margin-bottom: 0!important;
-  }
-}
-// #endregion
 
-// #region Nav with background colour applied
-.nav[class*="bg-"] {
-
-  .nav__inner {
-    background-color: transparent;
+  .menu::-webkit-scrollbar {
+    width: 6px;
   }
-  .nav__menu--secondary {
-
-    //background-color: white!important;
+   
+  .menu::-webkit-scrollbar-track {
+    border: 0!important;
   }
-  .nav__menu--secondary > .container > .list-unstyled > li > a,
-  .nav__menu--secondary > .container > .list-unstyled > li > details > summary .link {
-/*
-    --colour-link: var(--colour-link-theme);
-    --colour-hover: var(--colour-hover-theme);
-    --colour-active: var(--colour-active-theme);
-    */
+   
+  .menu::-webkit-scrollbar-thumb {
+    border: 0!important;
   }
-}
-// #endregion
 
-// #region Secondary nav
-.nav__menu--secondary {
-  flex-grow: 1;
+  .menu {
 
-  font-weight: bold;
-
-  .nav__section-link {
-    pointer-events: none;
-    font-weight: bold;
-    color: var(--colour-link);
-    font-size: rem(18);
-  }
-
-  > .container > ul > li {
+    overscroll-behavior: contain;
+    width: calc(#{rem(375)} - var(--scrollbar-width));
+    background-color: var(--colour-canvas-2);
+    position: absolute;
+    height: calc(100vh - #{rem(96)});
+    left: 100%;
+    top: 0;
+    padding: 0 rem(24) 0 rem(24);
+    z-index: var(--index-menu);
+    overflow: auto;
+    transition: all 1s ease-out;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
 
-    &:not(:last-child){
-        
-      border-bottom: 1px solid var(--colour-border);
+    > * {
+      flex-shrink: 0;
     }
 
-    padding-block: rem(6);
-
-    a {
-      display: inline-block;
-      font-size: rem(18);
-      line-height: rem(36);
-      text-decoration: none;
-      font-weight: bold;
+    @media screen and (prefers-color-scheme: dark) {
+      --colour-link: var(--colour-white);
+      @include invert-colours();
     }
 
-    ul {
-      padding: 0;
+    // The menu is always white unless in dark mode
+    @media screen and (prefers-color-scheme: light) {
+      
+      background-color: var(--colour-white);
+      @include reset-colours();
+    }
 
-      a {
-        font-weight: normal;
+    @media (forced-colors: active) {
+      
+      outline: 1px solid white;
+    }
 
-        .icon {
-          display: none;
-        }
-      }
+    &:before {
+      content: "";
+      position: absolute;
+      display: block ;
+      top: 0;
+      left: 0;
+      width: 100%;
+      border-top: 2px solid var(--colour-border);
+      z-index: 1;
     }
-  }
 
-  /*
-  background: var(--colour-primary);
-  
-  > .container > .list-unstyled > li > a,
-  > .container > .list-unstyled > li > details > summary .link {
-    --colour-body: white;
-    --colour-link: white;
-    --colour-hover: white;
-    --colour-active: white;
-    --colour-heading: white;
-    --colour-underline: white;
-    --colour-border: white;
-  }
-
-  a,
-  .link {
-    display: inline-block;
-    font-size: rem(15);
-    padding: rem(8) 0 rem(8) 0;
-    text-decoration: none;
+    &.open {
+      left: calc(100% - (#{rem(375)} - var(--scrollbar-width)) );
+      -webkit-box-shadow: 0 6px 12px 0px rgba(0,0,0,0.2);
+      box-shadow: 0 6px 12px 0px rgba(0,0,0,0.2);
+      pointer-events: all;
+    }
 
-    &:hover,
-    &:focus {
-      text-decoration: underline!important;
+    &.closed * {
+      display: none!important;
     }
   }
 
-  */
-}
-// #endregion
-
-
-// #region Sticky nav
-.nav {
-
-  position: sticky;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: var(--index-menu);
-
-  &.is-stuck {
-
-    -webkit-box-shadow: 0 4px 20px -10px rgba(51,51,51,0.25);
-    box-shadow: 0 4px 20px -10px rgba(51,51,51,0.25);
+  .menu__secondary {
+    display: none;
   }
-}
-
-nav + main > *:first-child {
-  padding-top: 2rem;
-}
 
+  .has-secondary .menu__secondary {
+    display: block;
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-bottom: 3rem!important;
+    flex-grow: 1;
+    position: relative;
 
-// #endregion
+    @media screen and (prefers-color-scheme: light) {
+      background-color: #EEEEEE;
+    }
 
-// #region Show/hide
-.nav__menu,
-.nav__btn,
-.nav__menu--secondary {
+    .container {
+      display: contents;
+    }
+  }
 
-  display: none;
-}
+  ::slotted(a:not([slot="logo"])) {
+    display: block!important;
+    line-height: rem(20)!important;
+    padding: rem(24) 0!important;
+    margin: 0!important;
+    flex-shrink: 0;
+    font-size: 1rem!important;
+    font-weight: normal!important;
 
-.nav__inner,
-.nav__menu--account {
-  position: absolute;
-  top: 0;
-  left: 100%;
-  background: var(--colour-canvas);
-  z-index: 2;
-  width: 100%;
-  overscroll-behavior: contain;
+    &:after {
+      content: "";
+      display: block;
+      height: 2px;
+      width: 100%!important;
+      background-color: var(--colour-border)!important;  
+      top: calc(100% - 2px)!important;
+    }
+  }
 
-  @include media-breakpoint-up(sm) {
+  *:is(.has-search, .has-actions) .menu__primary{
     
-    width: rem(375);
+    display: block;
+    padding-bottom: rem(48);
   }
-}
-
-.nav__menu--account {
-  z-index: 2;
-  height: 100vh;
-}
-
-.nav:has(#showMenu:checked){
-  min-height: 100vh;
-}
 
-#showMenu:checked ~ .nav__inner,
-#showAccount:checked ~ .nav__menu--account {
-
-  height: 100vh;
-  overflow: visible;
-  overflow-x: auto;
-  left: 0;
-
-  @include media-breakpoint-up(sm) {
+  .menu:not(.has-secondary) .menu__primary{
     
-    left: calc(100% - #{rem(375)});
+    display: block;
+    padding-bottom: rem(48);
   }
-}
 
-@include media-breakpoint-up(md) {
-   
-  #showAccount ~ .nav__menu--account {
+  ::slotted(button) {
 
-    display: none;
+    display: block!important;
+    margin: 0 0 rem(24) 0!important;
+    width: 100%!important;
+    max-width: 100%!important;
+    text-align: center!important;
+    flex-shrink: 0;
   }
 
-  #showAccount:checked ~ .nav__menu--account {
-
-    left: 0;
-    width: 100%;
-    height: auto;
+  .has-actions slot[name="actions"]{
     display: block;
-    top: 6rem;
-    border-top: rem(5) solid var(--colour-primary);
-    border-bottom: 1px solid var(--colour-border-light);
-    -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
-    -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
-    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+    padding-bottom: rem(24);
   }
-}
 
-#showMenu:checked ~ div .nav__menu,
-#showMenu:checked ~ div .nav__btn,
-#showMenu:checked ~ div .nav__menu--secondary,
-#showMenu:not(:checked) ~ #showSearch:checked ~ div .nav__menu--search {
-  display: block;
-}
-
-
-
-#showMenu:checked ~ div .nav__menu-btn label,
-#showSearch:checked ~ div .nav__search-btn label {
-  
-  border: 0;
-  
-  .icon {
-    opacity: 0;
+  slot[name="actions"]::slotted(button){
+    margin-top: 0!important;
   }
-  &:before {
-    width: 100%;
-    transform: rotate(45deg);
-  }
-  &:after {
 
+  // Search
+  .dialog__wrapper {
     width: 100%;
-    transform: rotate(-45deg);
+    margin: 0 0 rem(48) 0!important;
+    flex-shrink: 0;
   }
-}
-
-@include media-breakpoint-up(sm) {
-    
-  #showMenu:checked ~ .nav__bg {
-      content: " ";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      background: rgba(0,0,0,0.5);
-      z-index: 1;
-    
+  .dialog__wrapper > .btn {
+    display: none;
   }
-}
-
-@include media-breakpoint-up(md) {
-    
-  .nav__bg {
-      display: none;
+  .dialog__wrapper dialog {
+    display: contents;
   }
 }
-
 // #endregion
 
-// #region Desktop nav
-@include media-breakpoint-up(md) {
-
-  .nav .nav__mobile-bar {
+// #region tablet tweaks
+@media screen and (max-width: 62em) and (min-width: 36em) {
 
-    display: none;
+  .menu {
+    padding-right: rem(40)!important;
   }
 
+  .has-secondary .menu__secondary {
 
-  .nav__logo {
-    height: rem(64);
-  }
-  
-  #showMenu:checked ~ .nav__inner,
-  .nav__inner {
-    overflow: visible;
-    position: static;
-    width: 100%;
-  }
+    margin-right: rem(-40)!important;
+    padding-right: rem(40)!important;
 
-  .nav .nav__menu {
-    display: flex;
-    padding-bottom: 0;
+    &:before {
+      width: calc(100% - 4rem) !important
+    }
   }
+  ::slotted(button) {
 
-  .nav__btn,
-  .nav__menu--secondary {
-    display: flex;
+    width: auto!important;
   }
+}
+// #endregion
 
-  .nav {
+// #region desktop
+@include media-breakpoint-up(md) {
 
-    .nav__inner > .container {
-      padding-bottom: 1rem;
-    }
-    
+  :host {
+    max-width: 100%!important;
+    padding: 0!important;
   }
-  
-  .nav__search-btn,
-  .nav__btn {
-    order: 2;
-    margin-left: 1rem;
 
-    .btn {
-      margin-bottom: 0;
-    }
-  }
-  .nav__menu {
-    padding-top: 0;
-  }
-  .nav__menu > .list-unstyled {
-    margin-left: -1.5rem!important;
-    margin-right: -1.5rem!important;
-    width: calc(100% + 3rem);
-    margin-bottom: 0;
-    //text-align: right;
-    padding-top: 0;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-
-    > li {
-      display: inline-block;
-      padding-left: 1rem;
-      padding-right: 1rem;
+  :host > .container {
+    padding-block: rem(24)!important;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
 
-      &:not(:last-child){
-          
-        border-right: 1px solid var(--colour-border);
-      }
-      > a {
-        line-height: 1.75rem;
-      }
-      > a.current {
-        border-left: none;
-        padding-left: 0;
-        border-bottom: rem(3) solid var(--colour-info);
-      }
+    &:has(.has-secondary) {
+      padding-top: rem(24 + 40)!important;
     }
-  }
-
-  .nav__account-btn {
-    max-width: fit-content!important;
 
-    label {
-      
-      border: none!important;
-      padding-top: 0.5rem;
-      position: relative;
-      padding-right: 2.5rem;
-
-      &:after {
-        content: "";
-        position: absolute;
-        top: calc(50% + 0.5rem);
-        right: 0;
-        width: 1.5em;
-        height: 1.5em;
-        background: currentColor;
-        mask-image: var(--icon-arrow);
-        mask-size: 50%;
-        mask-repeat: no-repeat;
-        mask-position: 50% 50%;
-        -webkit-mask-image: var(--icon-arrow);
-        -webkit-mask-size: 50%;
-        -webkit-mask-repeat: no-repeat;
-        -webkit-mask-position: 50% 50%;
-        transition: transform 0.2s ease-in-out;
-        transform: rotate(90deg) translate(-50%, 0);
-      }
+    > * {
+      margin-bottom: 0!important;
     }
   }
 
-  .nav .nav__menu--secondary > .container > .list-unstyled {
-    font-size: rem(15);
-    padding-top: 0;
+  .btn-menu {
+    display: none;
   }
 
-
-}
-// #endregion
-
-
-// #region Nav secondary DESKTOP 
-@include media-breakpoint-up(md) {
-
-
-  .nav__menu--secondary {
-    background-color: var(--colour-primary);
-    @include invert-colours();
-
-    .nav__section-link {
-      pointer-events: all;
-    }
+  .buttons-holder {
+    display: contents;
   }
-
-  .nav__menu--secondary > .container {
-    padding-bottom: 0;
+  .buttons-holder .btn-menu {
+    display: inline-block;
+    order: 2;
   }
 
-  .nav__menu--secondary > .container > .list-unstyled {
-    margin-left: -1rem!important;
-    margin-right: -1rem!important;
-    width: calc(100% + 2rem);
-    margin-bottom: 0;
-
-    > li {
-      display: inline-block;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      border: none!important;
-      padding-block: 0;
-      position: relative;
-        
-      a,
-      .nav__section-link {
-        display: block;
-        line-height: 2.25rem;
-        padding-block: 0.5rem;
-        cursor: pointer;
-      }
-
-      ul {
-        display: none;
-      }
-
-      &:hover,
-      &:focus,
-      &:focus-within {
-
-        > .nav__section-link {
-          
-          color: var(--colour-selected);
-        }
+  .menu,
+  .menu__outer,
+  .menu__primary {
+    display: contents;
+  }
 
-        ul {
-          display: block;
-          background: white;
-          position: absolute;
-          top: 100%;
-          left: 0;
-          padding-top: rem(16);
+  .menu__secondary {
+    display: none;
+  }
 
-          -webkit-box-shadow: 0 4px 20px -10px rgba(51,51,51,0.25);
-          box-shadow: 0 4px 20px -10px rgba(51,51,51,0.25);
+  .has-secondary .menu__secondary {
           
-          @include reset-colours();
-
-          --colour-admin: var(--colour-admin-theme);
+    background-color: var(--colour-canvas-2);
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
 
-          li {
+    @media screen and (prefers-color-scheme: light) {
             
-            padding-inline: rem(24);
-          }
+      background-color: #EEEEEE;
+      @include reset-colours();
+    }
 
-          li:last-child {
+    @media screen and (prefers-color-scheme: dark) {
             
-            padding-bottom: rem(16);
-          }
-
-          li.nav__download {
-            background: var(--colour-admin);
-            padding-top: rem(16);
-
-            & + li.nav__download {
-              padding-top: 0;
-            }
-          }
-
-          a {
-            white-space: nowrap;
-            padding: 0;
-            line-height: 3rem;
-
-            .icon {
-              display: inline-block;
-              font-size: 1.5em;
-              padding: 0;
-              margin: -0.15em 0.25em 0 0;
-            }
-          }
-        }
-      }
+      
+      @include invert-colours();
     }
-  }
-
-  .nav__menu--secondary > .container > .logout-button {
-    display: none;
-  }
-
-}
-// #endregion
-
-
-// #region Nav account Desktop
 
 
-@include media-breakpoint-up(md) {
-  .nav__menu--account {
-
-    > .container:first-child {
-      
-      display: none;
+    .container {
+      margin-left: auto;
+      margin-right: auto;
+      padding: var(--container-padding)!important;
+      padding-top: rem(8)!important;
+      padding-bottom: rem(8)!important;
+      text-align: right;
     }
+  }
 
-    > .container:not(:first-child) {
+  ::slotted(a[slot="secondary"]) {
+    font-size: rem(14)!important;
 
-      &:before {
-        display: none;
-      }
-
-      display: flex;
-      flex-wrap: wrap;
-      gap: 2rem;
-      
-    align-items: start;
+    &:after {
+      top: calc(100% - 0.25em)!important;
+    }
+  }
 
-      > .row,
-      .nav__featured-link,
-      .credits {
+  ::slotted(a:not([slot="logo"])),
+  ::slotted(button) {
 
-        flex-basis: 22%;
-        flex-grow: 1;
-        margin: 0;
+    margin-bottom: 0!important;
+    margin-right: 0!important;
+  }
 
-      }
+  ::slotted(a:not([slot="logo"])) {
 
-      > .row > .col:first-child,
-      .nav__featured-link > .row > .col:first-child {
-        max-width: 100%!important;
-        width: 100%;
-        flex-shrink: 0;
-        min-width: 100%;
-        margin-bottom: 1rem;
-      }
+    margin-left: rem(32)!important;
+    font-size: rem(16)!important;
+    font-weight: normal!important;
 
-      .logout-button {
-        min-width: 100%;
-      }
-    } 
+    &:after {
+      display: none;
+    }
   }
-}
-// #endregion
 
+  ::slotted(button) {
 
-// #region Mega menu
-.nav .list-unstyled > li details.nav__mega-menu {
+    margin-left: rem(48)!important;
+  }
 
-  @include media-breakpoint-up(md) {
+  .has-actions slot[name="actions"]{
+    display: block;
+    padding-left: rem(48);
+  }
 
-    position: static;
+  // Search bar
+  slot[name="actions"]::slotted(button) {
 
-    height: 4.5rem;
-    margin-bottom: -5rem;
+    margin-left: rem(12)!important;
   }
 
-  .inner {
+  :host([data-search]) slot[name="actions"] {
 
-    z-index: 5;
+    padding-left: 0!important;
+  }
+  
+  #search-wrapper {
     
-    [class*="bg-"]{
-
-      --bs-bg-opacity: 0;
-      @include media-breakpoint-up(md) {
-        --bs-bg-opacity: 1;
-      }
-    }
+    margin-left: rem(24)!important;
+    position: static;
+  }
 
+  #search-dialog[open] {
+    position: absolute;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding-block: rem(24);
+    padding-inline: 0;
+    background-color: transparent;
 
-    @include media-breakpoint-up(md) {
+    text-align: right;
+    border-radius: 0;
+    box-shadow: none;
 
-      --bs-bg-opacity: 1;
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      width: 100vw!important;
-      max-width: 100vw!important;
-      -webkit-transform: translateX(-50%);
-      -ms-transform: translateX(-50%);
-      transform: translateX(-50%);
-
-      background: rgba(0,0,0,.6);
-      height: calc(100vh - 8rem);
-
-      pointer-events: none;
-      padding-top: 0;
-
-      .container {
-        padding: 0 rem(60 - 36) 1rem rem(60 - 36)!important;
-        max-width: rem(1440)!important;
-        text-align: left;
-        pointer-events: all;
-        display: flex;
-
-        > div {
-          padding: rem(36);
-        }
-      }
+    .container {
+      
+    padding: var(--container-padding);
+    padding-bottom: 0;
     }
   }
-}
-// #endregion
 
-// #region inline search
-.nav--inline-search {
+  :host(.search-open) {
 
-  .nav__menu form {
-    position: relative;
-    .form-control__wrapper .form-control {
-      padding-right: 3rem;
-    }
+    background: #E6EAEC!important;
 
-    button {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      margin: 0;
-      z-index: var(--index-focus);
-      border-color: transparent;
-      background: transparent;
-      padding: 0.85rem 0rem;
-
-      .icon {
-        stroke: currentColor;
-      }
+    @media screen and (prefers-color-scheme: dark) {
+      
+      background: var(--colour-canvas-2)!important;
     }
-  }
 
-  @include media-breakpoint-up(md) {
-    .nav__menu > .list-unstyled {
-      text-align: left;
-      margin-right: 0!important;
+    .buttons-holder,
+    #search-button {
+      display: none;
     }
+  }
 
-    .nav__menu form {
-      min-width: rem(350);
-      position: relative;
-
-      .form-control__wrapper {
-        margin-bottom: 0;
-        display: flex;
-        align-items: center;
+  :host(.search-open.bg-primary) {
 
-        label {
-          white-space: nowrap;
-          padding-right: 1rem;
-        }
+    background: var(--colour-primary)!important;
 
-        .form-control {
-          padding: rem(7) 3rem rem(7) 1rem;
-        }
-      }
-
-      button {
-        padding: rem(8) 0rem;
-      }
+    .suffix,
+    #search {
+      border: 2px solid #B3C1C5;
+      color: white;
+    }
+    #search {
+      border-right: 0;
     }
   }
-}
-// #endregion
 
-// #region nav admin
-@include media-breakpoint-up(md) {
-  .nav--admin {
-    .nav__logo {
-      height: 3rem;
+  // backdrop
+  .backdrop {
 
-      .brand {
-        font-size: 3rem;
-      }
+    content: "";
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    height: calc(100vh - var(--nav-height));
+    width: 100%;
+    z-index: -1;
+    pointer-events: none;
+    transition: background 0.5s;
+
+    &.show {
+        
+      pointer-events: all;
+      background: rgba(0,0,0,0.2);
+      backdrop-filter: blur(2px);
     }
   }
 }
 // #endregion
 
-// #region
+// #region Menus
+::slotted(.nav--menu) {
+  overscroll-behavior: contain;
+  width: calc(#{rem(375)} - var(--scrollbar-width));
+  background-color: var(--colour-canvas-2);
+  position: absolute;
+  height: calc(100vh - #{rem(96)});
+  left: 100%;
+  top: 0;
+  padding: 0 rem(24) 0 rem(24);
+  z-index: var(--index-menu);
+  overflow: auto;
+  transition: all 1s ease-out;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
 
-.nav--just-account {
+  > * {
+    flex-shrink: 0;
+  }
 
-  .nav__menu,
-  .nav__account-btn {
-    display: none!important;
+  @media screen and (prefers-color-scheme: dark) {
+    --colour-link: var(--colour-white);
+    @include invert-colours();
   }
 
-  @include media-breakpoint-up(md) {
+  // The menu is always white unless in dark mode
+  @media screen and (prefers-color-scheme: light) {
     
-    .nav__menu,
-    .nav__account-btn {
-      display: block!important;
-    }
+    background-color: var(--colour-white);
+    @include reset-colours();
   }
 
-  #showMenu:checked ~ .nav__menu--account {
-    height: 100vh;
-    overflow: visible;
-    overflow-x: auto;
-    left: 0;
-    pointer-events: none;
-    background: transparent;
+  @media (forced-colors: active) {
+    
+    outline: 1px solid white;
+  }
 
+  &:before {
+    display: block ;
+    width: 100%;
+    border-top: 2px solid var(--colour-border);
+    z-index: 1;
+    padding-block: rem(24);
+    margin: 0;
+    font-family: $headings-font-family;
+    font-style: $headings-font-style;
+    font-weight: $headings-font-weight;
+    color: $headings-color;
+    clear: both;
+    font-size: rem(map-get($heading-sizes,"h3_fs"));
+    line-height: rem(map-get($heading-sizes,"h3_lh"));
+    max-width: var(--content-max-width);
+  
     @include media-breakpoint-up(sm) {
-    
-      width: rem(375);
-      left: calc(100% - #{rem(375)});
+  
+      font-size: rem(map-get($heading-sizes,"h3_fs_sm"));
+      line-height: rem(map-get($heading-sizes,"h3_lh_sm"));
     }
+  }
 
-    > .container:first-child {
-      opacity: 0;
-    }
-    > .container:not(:first-child) {
-      pointer-events: all;
-    }
+  &:before {
+    content: attr(data-title);
   }
+
+  @include media-breakpoint-up(md) {
+
+
+    height: calc(100vh - var(--nav-height));
+    top: 100%;
+  }
+}
+
+::slotted(.nav--menu.open) {
+  left: calc(100% - (#{rem(375)} - var(--scrollbar-width)) );
+  -webkit-box-shadow: 0 6px 12px 0px rgba(0,0,0,0.2);
+  box-shadow: 0 6px 12px 0px rgba(0,0,0,0.2);
+  pointer-events: all;
 }
 
+@media screen and (max-width: 62em) {
+  :host(.open) .menu__outer {
+    
+    background: rgba(0,0,0,0.2);
+    backdrop-filter: blur(2px);
+  }
+}
 // #endregion