@iamproperty/components 7.7.1--beta6 → 7.7.1--beta7

package/assets/sass/components/nav.component.scss

@@ -1,718 +1,718 @@
-@use 'sass:map';
-
-@use '../_func' as *;
-
-@use '../bs_grid' as *;
-
-@use '../elements/forms' as *;
-@use '../elements/buttons' as *;
-
-@use '../elements/brand.css';
-
-@use '../elements/dialog' as *;
-@use '../elements/modal' as *;
-@use '../elements/container' as *;
-
-
-@use '../utilities/colours' as *;
-@use '../utilities/margins' as *;
-@use '../utilities/paddings' as *;
-@use '../utilities/sizes' as *;
-@use '../utilities/display' as *;
-
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
-
-
-
-
-:host {
-  display: flex !important;
-  flex-direction: row !important;
-  flex-wrap: wrap !important;
-  align-items: center !important;
-}
-
-
-/* #region Fix colours  */
-
-:host(.bg-primary) .container {
-
-  /* color-scheme: dark; */
-
-  .menu {
-    
-    /* color-scheme: light; */
-  }
-}
-
-/* #endregion */
-
-.btn-menu {
-  padding: 0;
-  margin: 0 0 0 2rem;
-  text-align: center;
-  height: 3rem;
-  padding-block: 0.75rem;
-  line-height: 1.5rem;
-  overflow: hidden;
-  position: relative;
-  background: none;
-  border: none;
-  width: 1.5rem;
-  text-indent: -1000%;
-  color: var(--menu-btn-colour);
-
-  i {
-    font-size: 1.5rem;
-    line-height: 1.5rem;
-    position: absolute;
-    text-indent: 0px;
-
-    width: 1.5rem;
-    text-align: center;
-    top: 0.75rem;
-    right: 0;
-    margin: 0 !important;
-    transition: none !important;
-  }
-
-  i + i {
-    display: none;
-  }
-
-  &[aria-expanded] {
-    i {
-      display: none;
-    }
-
-    i + i {
-      display: inline;
-    }
-  }
-
-  @media screen and (max-width: 62em) {
-    > .btn {
-      display: contents;
-
-      display: contents;
-      color: inherit !important;
-      padding: 0 !important;
-      margin: 0;
-      font-weight: normal !important;
-      line-height: inherit;
-      font-size: inherit;
-      transition: none !important;
-    }
-  }
-
-  @media screen and (min-width: 36em) {
-    margin: 0 0 0 3rem;
-    width: auto;
-    padding-right: 1.875rem; /* 24 + 6 */
-    text-indent: 0;
-
-    &[aria-expanded] {
-      text-indent: -1000%;
-    }
-  }
-
-  @media screen and (min-width: 62em) {
-    width: fit-content;
-    height: auto;
-    margin: 0 0 0 3rem;
-    padding: 0 !important;
-    text-indent: 0;
-    padding-right: 0 !important;
-
-    &[aria-expanded] {
-      text-indent: 0;
-    }
-
-    .btn {
-      
-      margin: 0 !important;
-      display: flex;
-
-      span {
-        order: 2;
-      }
-
-      i[class*='fa-'] {
-        position: relative;
-        position: static;
-        vertical-align: bottom;
-        display: inline-block;
-        font-size: 1.2rem;
-        margin-right: 1rem !important;
-      }
-
-      i[class*='fa-'] + i[class*='fa-'] {
-        display: none;
-      }
-    }
-  }
-}
-
-:host(.bg-primary) .btn {
-  &:is(:hover, :focus) {
-    color: var(--colour-inverted);
-  }
-}
-
-/* #region mobile and tablet menu */
-@media screen and (max-width: 62em) {
-  :host > .container {
-    display: contents;
-  }
-
-  .menu__outer {
-    position: absolute;
-    top: 6rem; /* 96 */
-    left: 0;
-    width: 100%;
-    height: calc(100vh - 6rem);
-    overflow: hidden;
-    pointer-events: none;
-    transition: background 0.5s;
-
-    &:has(.menu.open) {
-      background: rgba(0, 0, 0, 0.2);
-      backdrop-filter: blur(2px);
-    }
-  }
-
-  .menu::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  .menu::-webkit-scrollbar-track {
-    border: 0 !important;
-  }
-
-  .menu::-webkit-scrollbar-thumb {
-    border: 0 !important;
-  }
-
-  .menu {
-
-    
-    overscroll-behavior: contain;
-    width: calc(23.4375rem - var(--scrollbar-width));
-    background-color: var(--colour-canvas-2);
-    position: absolute;
-    height: calc(100vh - 6rem);
-    left: 100%;
-    top: 0;
-    padding: 0 1.5rem 0 1.5rem;
-    z-index: var(--index-menu);
-    overflow: auto;
-    transition: all 1s ease-out;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-
-    > * {
-      flex-shrink: 0;
-      
-      color-scheme: light;
-    }
-
-
-    /*  The menu is always white unless in dark mode */
-    
-      background-color: var(--colour-canvas-2);
-      
-
-    @media (forced-colors: active) {
-      outline: 1px solid white;
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      display: block;
-      top: 0;
-      left: 0;
-      width: 100%;
-      border-top: 2px solid var(--colour-border);
-      z-index: 1;
-    }
-
-    &.open {
-      left: calc(100% - (23.4375rem - 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;
-    }
-
-    &.closed * {
-      display: none !important;
-    }
-  }
-
-  .menu__secondary {
-    display: none;
-  }
-
-  .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;
-
-
-    .container {
-      display: contents;
-    }
-  }
-
-  ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary)) {
-    display: block !important;
-    line-height: 1.25rem !important;
-    padding: 1.5rem 0 !important;
-    margin: 0 !important;
-    flex-shrink: 0;
-    font-size: 1rem !important;
-    font-weight: normal !important;
-
-    &:after {
-      content: '';
-      display: block;
-      height: 2px;
-      width: 100% !important;
-      background-color: var(--colour-border) !important;
-      top: calc(100% - 2px) !important;
-    }
-  }
-
-  *:is(.has-search, .has-actions) .menu__primary {
-    display: block;
-    padding-bottom: 3rem;
-  }
-
-  .menu:not(.has-secondary) .menu__primary {
-    display: block;
-    padding-bottom: 3rem;
-  }
-
-  ::slotted(.btn:not(.btn-compact):not(.btn-primary)) {
-    display: block !important;
-    margin: 0 0 1.5rem 0 !important;
-    width: 100% !important;
-    max-width: 100% !important;
-    text-align: center !important;
-    flex-shrink: 0;
-  }
-
-  .has-actions slot[name='actions'] {
-    display: block;
-    padding-bottom: 1.5rem;
-  }
-
-  slot[name='actions']::slotted(.btn) {
-    margin-top: 0 !important;
-  }
-
-  /*  Search */
-  .dialog__wrapper {
-    width: 100%;
-    margin: 0 0 3rem 0 !important;
-    flex-shrink: 0;
-
-    > .btn {
-      margin: 0 !important;
-    }
-  }
-  .dialog__wrapper > .btn {
-    display: none;
-  }
-  .dialog__wrapper dialog {
-    display: contents;
-  }
-}
-/* #endregion */
-
-/* #region tablet tweaks */
-@media screen and (max-width: 62em) and (min-width: 36em) {
-  .menu {
-    padding-right: 2.5rem !important;
-  }
-
-  .has-secondary .menu__secondary {
-    margin-right: -2.5rem !important;
-    padding-right: 2.5rem !important;
-
-    &:before {
-      width: calc(100% - 4rem) !important;
-    }
-  }
-  ::slotted(.btn) {
-    width: auto !important;
-  }
-}
-/* #endregion */
-
-/* #region desktop */
-@media screen and (min-width: 62em) {
-  :host {
-    /* max-width: 100%!important; */
-    padding-block: 0 !important;
-  }
-
-  :host > .container {
-    padding-block: 1.5rem !important;
-    padding-inline: 0 !important;
-    max-width: 100%;
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-
-    &:has(.has-secondary) {
-      padding-top: 4rem !important; /* 24 + 40 */
-    }
-
-    > * {
-      margin-bottom: 0 !important;
-    }
-  }
-
-  .btn-menu {
-    display: none;
-  }
-
-  .buttons-holder {
-    display: contents;
-  }
-  .buttons-holder .btn-menu {
-    display: inline-block;
-    order: 2;
-  }
-
-  .menu,
-  .menu__outer,
-  .menu__primary {
-    display: contents;
-  }
-
-  .menu__secondary {
-    display: none;
-  }
-
-  .has-secondary .menu__secondary {
-    background-color: var(--colour-canvas-2);
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-
-
-    .container {
-      margin-left: auto;
-      margin-right: auto;
-      padding: var(--container-padding) !important;
-      padding-top: 0.5rem !important;
-      padding-bottom: 0.5rem !important;
-      text-align: right;
-    }
-  }
-
-  ::slotted(a[slot='secondary']) {
-    font-size: 0.875rem !important;
-
-    &:after {
-      top: calc(100% - 0.25em) !important;
-    }
-  }
-
-  ::slotted(a:not([slot='logo'])),
-  ::slotted(.btn) {
-    margin-bottom: 0 !important;
-    margin-right: 0 !important;
-  }
-
-  ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary)) {
-    font-size: 1rem !important;
-    font-weight: normal !important;
-
-    &:after {
-      display: none;
-    }
-  }
-
-  ::slotted(a:not([slot='logo']):not([slot='dual'])) {
-    margin-left: 2rem !important;
-  }
-
-  ::slotted(.btn-primary) {
-    margin-left: 3rem !important;
-  }
-
-  .has-actions slot[name='actions'] {
-    display: block;
-    padding-left: 3rem;
-  }
-
-  /*  Search bar */
-  slot[name='actions']::slotted(.btn) {
-    margin-left: 0.75rem !important;
-  }
-
-  :host([data-search]) slot[name='actions'] {
-    padding-left: 0 !important;
-  }
-
-  #search-wrapper {
-    margin-left: 1.5rem !important;
-    position: static;
-  }
-
-  #search-close,
-  #search-button {
-    margin: 0;
-  }
-
-  #search-dialog[open] {
-    position: absolute;
-    top: auto;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding-block: 1.5rem;
-    padding-inline: 0;
-    background-color: transparent;
-
-    text-align: right;
-    border-radius: 0;
-    box-shadow: none;
-
-    .container {
-      padding: var(--container-padding);
-      padding-bottom: 0;
-    }
-  }
-
-  :host(.search-open) {
-    background: #e6eaec !important;
-
-    @container style(--theme: dark) {
-      background: var(--colour-canvas-2) !important;
-    }
-
-    .buttons-holder,
-    #search-button {
-      display: none;
-    }
-  }
-
-  :host(.search-open.bg-primary) {
-    background: var(--colour-primary) !important;
-
-    .suffix,
-    #search {
-      border: 2px solid #b3c1c5;
-      color: white;
-    }
-    #search {
-      border-right: 0;
-    }
-  }
-
-  /*  backdrop */
-  .backdrop {
-    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 Menus */
-::slotted(.nav--menu) {
-  pointer-events: all;
-  overscroll-behavior: contain;
-  width: calc(23.4375rem - var(--scrollbar-width));
-  background-color: var(--colour-canvas-2);
-  position: absolute;
-  height: calc(100vh - 6rem);
-  left: 100%;
-  top: 0;
-  padding: 0 1.5rem 0 1.5rem;
-  z-index: var(--index-menu);
-  overflow: auto;
-  transition: all 1s ease-out;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-
-  > * {
-    flex-shrink: 0;
-  }
-
-
-  /*  The menu is always white unless in dark mode */
-
-
-  @media (forced-colors: active) {
-    outline: 1px solid white;
-  }
-
-  &:before {
-    display: block;
-    width: calc(100% + 3rem);
-    border-top: 2px solid var(--colour-border);
-    z-index: 1;
-    padding: 1.5rem 1.5rem;
-    margin: 0 -1.5rem;
-    font-family: var(--font-heading);
-    font-style: normal;
-    font-weight: var(--heading-weight);
-    color: var(--colour-heading);
-    clear: both;
-    font-size: var(--h3-fs);
-    line-height: var(--heading-lh);
-    max-width: var(--content-max-width);
-
-    @media screen and (min-width: 36em) {
-      margin-right: -2.5rem;
-      padding-right: 2.5rem;
-      width: calc(100% + 4rem);
-    }
-  }
-
-  @media screen and (min-width: 36em) {
-    padding-right: 2.5rem !important;
-  }
-
-  @media screen and (min-width: 62em) {
-    height: calc(100vh - var(--nav-height));
-    top: calc(var(--nav-height) + 4px);
-  }
-}
-
-slot[name='menus'] {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: block;
-  height: 100vh;
-  overflow: hidden;
-  pointer-events: none;
-  width: calc(23.4375rem - var(--scrollbar-width));
-}
-
-::slotted(.nav--menu[data-open-title]) {
-  &:before {
-    content: attr(data-open-title);
-  }
-}
-
-::slotted(.nav--menu.open) {
-  width: calc(23.4375rem - var(--modifier, 0px));
-  left: calc(100% - (23.4375rem - var(--scrollbar-width, 0px) - var(--modifier, 0px)));
-  -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 */
-
-/* #region compressed nav */
-@media screen and (min-width: 62em) {
-  :host(.nav--md-compressed) .buttons-holder button {
-    margin-left: 1.5rem !important;
-  }
-
-  :host(.nav--md-compressed) .btn-menu .btn i[class*='fa-'] {
-    margin-right: 0.5rem !important;
-    margin-left: -0.5rem !important;
-  }
-
-  :host(.nav--md-compressed) .btn-menu .btn {
-    --btn-padding-inline: 2.5rem;
-  }
-
-  :host(.nav--md-compressed) ::slotted(a:not([slot='logo']):not([slot='secondary'])) {
-    margin-left: 1.5rem !important;
-  }
-}
-/* #endregion */
-
-/* #region Compact button */
-@media screen and (min-width: 62em) {
-  :host(.nav--btn-compact:not(.nav--large)) {
-    .btn-menu .btn {
-      padding: 0.5rem !important;
-
-      i {
-        margin-right: 0 !important;
-      }
-      span {
-        display: none;
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 62em) and (max-width: 90em) {
-  :host(.nav--btn-compact.nav--large) {
-    .btn-menu .btn {
-      padding: 0.5rem !important;
-
-      i {
-        margin-right: 0 !important;
-      }
-      span {
-        display: none;
-      }
-    }
-  }
-}
-/* #endregion */
-
-/* #region Dual with buttons */
-@media screen and (max-width: 62em) {
-  :host(.nav--dual-buttons) {
-    slot[name='dual'] {
-      padding-block: 1.5rem;
-      display: block;
-    }
-  }
-}
-
-@media screen and (min-width: 62em) {
-  :host(.nav--dual-buttons) {
-    slot[name='dual'] {
-      display: flex;
-      margin-left: auto;
-      flex-direction: row-reverse;
-    }
-  }
-}
-/* #endregion */
+@use 'sass:map';
+
+@use '../_func' as *;
+
+@use '../bs_grid' as *;
+
+@use '../elements/forms' as *;
+@use '../elements/buttons' as *;
+
+@use '../elements/brand.css';
+
+@use '../elements/dialog' as *;
+@use '../elements/modal' as *;
+@use '../elements/container' as *;
+
+
+@use '../utilities/colours' as *;
+@use '../utilities/margins' as *;
+@use '../utilities/paddings' as *;
+@use '../utilities/sizes' as *;
+@use '../utilities/display' as *;
+
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+
+
+
+
+:host {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  align-items: center !important;
+}
+
+
+/* #region Fix colours  */
+
+:host(.bg-primary) .container {
+
+  /* color-scheme: dark; */
+
+  .menu {
+    
+    /* color-scheme: light; */
+  }
+}
+
+/* #endregion */
+
+.btn-menu {
+  padding: 0;
+  margin: 0 0 0 2rem;
+  text-align: center;
+  height: 3rem;
+  padding-block: 0.75rem;
+  line-height: 1.5rem;
+  overflow: hidden;
+  position: relative;
+  background: none;
+  border: none;
+  width: 1.5rem;
+  text-indent: -1000%;
+  color: var(--menu-btn-colour);
+
+  i {
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+    position: absolute;
+    text-indent: 0px;
+
+    width: 1.5rem;
+    text-align: center;
+    top: 0.75rem;
+    right: 0;
+    margin: 0 !important;
+    transition: none !important;
+  }
+
+  i + i {
+    display: none;
+  }
+
+  &[aria-expanded] {
+    i {
+      display: none;
+    }
+
+    i + i {
+      display: inline;
+    }
+  }
+
+  @media screen and (max-width: 62em) {
+    > .btn {
+      display: contents;
+
+      display: contents;
+      color: inherit !important;
+      padding: 0 !important;
+      margin: 0;
+      font-weight: normal !important;
+      line-height: inherit;
+      font-size: inherit;
+      transition: none !important;
+    }
+  }
+
+  @media screen and (min-width: 36em) {
+    margin: 0 0 0 3rem;
+    width: auto;
+    padding-right: 1.875rem; /* 24 + 6 */
+    text-indent: 0;
+
+    &[aria-expanded] {
+      text-indent: -1000%;
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+    width: fit-content;
+    height: auto;
+    margin: 0 0 0 3rem;
+    padding: 0 !important;
+    text-indent: 0;
+    padding-right: 0 !important;
+
+    &[aria-expanded] {
+      text-indent: 0;
+    }
+
+    .btn {
+      
+      margin: 0 !important;
+      display: flex;
+
+      span {
+        order: 2;
+      }
+
+      i[class*='fa-'] {
+        position: relative;
+        position: static;
+        vertical-align: bottom;
+        display: inline-block;
+        font-size: 1.2rem;
+        margin-right: 1rem !important;
+      }
+
+      i[class*='fa-'] + i[class*='fa-'] {
+        display: none;
+      }
+    }
+  }
+}
+
+:host(.bg-primary) .btn {
+  &:is(:hover, :focus) {
+    color: var(--colour-inverted);
+  }
+}
+
+/* #region mobile and tablet menu */
+@media screen and (max-width: 62em) {
+  :host > .container {
+    display: contents;
+  }
+
+  .menu__outer {
+    position: absolute;
+    top: 6rem; /* 96 */
+    left: 0;
+    width: 100%;
+    height: calc(100vh - 6rem);
+    overflow: hidden;
+    pointer-events: none;
+    transition: background 0.5s;
+
+    &:has(.menu.open) {
+      background: rgba(0, 0, 0, 0.2);
+      backdrop-filter: blur(2px);
+    }
+  }
+
+  .menu::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .menu::-webkit-scrollbar-track {
+    border: 0 !important;
+  }
+
+  .menu::-webkit-scrollbar-thumb {
+    border: 0 !important;
+  }
+
+  .menu {
+
+    
+    overscroll-behavior: contain;
+    width: calc(23.4375rem - var(--scrollbar-width));
+    background-color: var(--colour-canvas-2);
+    position: absolute;
+    height: calc(100vh - 6rem);
+    left: 100%;
+    top: 0;
+    padding: 0 1.5rem 0 1.5rem;
+    z-index: var(--index-menu);
+    overflow: auto;
+    transition: all 1s ease-out;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    > * {
+      flex-shrink: 0;
+      
+      color-scheme: light;
+    }
+
+
+    /*  The menu is always white unless in dark mode */
+    
+      background-color: var(--colour-canvas-2);
+      
+
+    @media (forced-colors: active) {
+      outline: 1px solid white;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 0;
+      width: 100%;
+      border-top: 2px solid var(--colour-border);
+      z-index: 1;
+    }
+
+    &.open {
+      left: calc(100% - (23.4375rem - 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;
+    }
+
+    &.closed * {
+      display: none !important;
+    }
+  }
+
+  .menu__secondary {
+    display: none;
+  }
+
+  .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;
+
+
+    .container {
+      display: contents;
+    }
+  }
+
+  ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary)) {
+    display: block !important;
+    line-height: 1.25rem !important;
+    padding: 1.5rem 0 !important;
+    margin: 0 !important;
+    flex-shrink: 0;
+    font-size: 1rem !important;
+    font-weight: normal !important;
+
+    &:after {
+      content: '';
+      display: block;
+      height: 2px;
+      width: 100% !important;
+      background-color: var(--colour-border) !important;
+      top: calc(100% - 2px) !important;
+    }
+  }
+
+  *:is(.has-search, .has-actions) .menu__primary {
+    display: block;
+    padding-bottom: 3rem;
+  }
+
+  .menu:not(.has-secondary) .menu__primary {
+    display: block;
+    padding-bottom: 3rem;
+  }
+
+  ::slotted(.btn:not(.btn-compact):not(.btn-primary)) {
+    display: block !important;
+    margin: 0 0 1.5rem 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    text-align: center !important;
+    flex-shrink: 0;
+  }
+
+  .has-actions slot[name='actions'] {
+    display: block;
+    padding-bottom: 1.5rem;
+  }
+
+  slot[name='actions']::slotted(.btn) {
+    margin-top: 0 !important;
+  }
+
+  /*  Search */
+  .dialog__wrapper {
+    width: 100%;
+    margin: 0 0 3rem 0 !important;
+    flex-shrink: 0;
+
+    > .btn {
+      margin: 0 !important;
+    }
+  }
+  .dialog__wrapper > .btn {
+    display: none;
+  }
+  .dialog__wrapper dialog {
+    display: contents;
+  }
+}
+/* #endregion */
+
+/* #region tablet tweaks */
+@media screen and (max-width: 62em) and (min-width: 36em) {
+  .menu {
+    padding-right: 2.5rem !important;
+  }
+
+  .has-secondary .menu__secondary {
+    margin-right: -2.5rem !important;
+    padding-right: 2.5rem !important;
+
+    &:before {
+      width: calc(100% - 4rem) !important;
+    }
+  }
+  ::slotted(.btn) {
+    width: auto !important;
+  }
+}
+/* #endregion */
+
+/* #region desktop */
+@media screen and (min-width: 62em) {
+  :host {
+    /* max-width: 100%!important; */
+    padding-block: 0 !important;
+  }
+
+  :host > .container {
+    padding-block: 1.5rem !important;
+    padding-inline: 0 !important;
+    max-width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    &:has(.has-secondary) {
+      padding-top: 4rem !important; /* 24 + 40 */
+    }
+
+    > * {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .btn-menu {
+    display: none;
+  }
+
+  .buttons-holder {
+    display: contents;
+  }
+  .buttons-holder .btn-menu {
+    display: inline-block;
+    order: 2;
+  }
+
+  .menu,
+  .menu__outer,
+  .menu__primary {
+    display: contents;
+  }
+
+  .menu__secondary {
+    display: none;
+  }
+
+  .has-secondary .menu__secondary {
+    background-color: var(--colour-canvas-2);
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+
+    .container {
+      margin-left: auto;
+      margin-right: auto;
+      padding: var(--container-padding) !important;
+      padding-top: 0.5rem !important;
+      padding-bottom: 0.5rem !important;
+      text-align: right;
+    }
+  }
+
+  ::slotted(a[slot='secondary']) {
+    font-size: 0.875rem !important;
+
+    &:after {
+      top: calc(100% - 0.25em) !important;
+    }
+  }
+
+  ::slotted(a:not([slot='logo'])),
+  ::slotted(.btn) {
+    margin-bottom: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary)) {
+    font-size: 1rem !important;
+    font-weight: normal !important;
+
+    &:after {
+      display: none;
+    }
+  }
+
+  ::slotted(a:not([slot='logo']):not([slot='dual'])) {
+    margin-left: 2rem !important;
+  }
+
+  ::slotted(.btn-primary) {
+    margin-left: 3rem !important;
+  }
+
+  .has-actions slot[name='actions'] {
+    display: block;
+    padding-left: 3rem;
+  }
+
+  /*  Search bar */
+  slot[name='actions']::slotted(.btn) {
+    margin-left: 0.75rem !important;
+  }
+
+  :host([data-search]) slot[name='actions'] {
+    padding-left: 0 !important;
+  }
+
+  #search-wrapper {
+    margin-left: 1.5rem !important;
+    position: static;
+  }
+
+  #search-close,
+  #search-button {
+    margin: 0;
+  }
+
+  #search-dialog[open] {
+    position: absolute;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding-block: 1.5rem;
+    padding-inline: 0;
+    background-color: transparent;
+
+    text-align: right;
+    border-radius: 0;
+    box-shadow: none;
+
+    .container {
+      padding: var(--container-padding);
+      padding-bottom: 0;
+    }
+  }
+
+  :host(.search-open) {
+    background: #e6eaec !important;
+
+    @container style(--theme: dark) {
+      background: var(--colour-canvas-2) !important;
+    }
+
+    .buttons-holder,
+    #search-button {
+      display: none;
+    }
+  }
+
+  :host(.search-open.bg-primary) {
+    background: var(--colour-primary) !important;
+
+    .suffix,
+    #search {
+      border: 2px solid #b3c1c5;
+      color: white;
+    }
+    #search {
+      border-right: 0;
+    }
+  }
+
+  /*  backdrop */
+  .backdrop {
+    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 Menus */
+::slotted(.nav--menu) {
+  pointer-events: all;
+  overscroll-behavior: contain;
+  width: calc(23.4375rem - var(--scrollbar-width));
+  background-color: var(--colour-canvas-2);
+  position: absolute;
+  height: calc(100vh - 6rem);
+  left: 100%;
+  top: 0;
+  padding: 0 1.5rem 0 1.5rem;
+  z-index: var(--index-menu);
+  overflow: auto;
+  transition: all 1s ease-out;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+
+  > * {
+    flex-shrink: 0;
+  }
+
+
+  /*  The menu is always white unless in dark mode */
+
+
+  @media (forced-colors: active) {
+    outline: 1px solid white;
+  }
+
+  &:before {
+    display: block;
+    width: calc(100% + 3rem);
+    border-top: 2px solid var(--colour-border);
+    z-index: 1;
+    padding: 1.5rem 1.5rem;
+    margin: 0 -1.5rem;
+    font-family: var(--font-heading);
+    font-style: normal;
+    font-weight: var(--heading-weight);
+    color: var(--colour-heading);
+    clear: both;
+    font-size: var(--h3-fs);
+    line-height: var(--heading-lh);
+    max-width: var(--content-max-width);
+
+    @media screen and (min-width: 36em) {
+      margin-right: -2.5rem;
+      padding-right: 2.5rem;
+      width: calc(100% + 4rem);
+    }
+  }
+
+  @media screen and (min-width: 36em) {
+    padding-right: 2.5rem !important;
+  }
+
+  @media screen and (min-width: 62em) {
+    height: calc(100vh - var(--nav-height));
+    top: calc(var(--nav-height) + 4px);
+  }
+}
+
+slot[name='menus'] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  height: 100vh;
+  overflow: hidden;
+  pointer-events: none;
+  width: calc(23.4375rem - var(--scrollbar-width));
+}
+
+::slotted(.nav--menu[data-open-title]) {
+  &:before {
+    content: attr(data-open-title);
+  }
+}
+
+::slotted(.nav--menu.open) {
+  width: calc(23.4375rem - var(--modifier, 0px));
+  left: calc(100% - (23.4375rem - var(--scrollbar-width, 0px) - var(--modifier, 0px)));
+  -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 */
+
+/* #region compressed nav */
+@media screen and (min-width: 62em) {
+  :host(.nav--md-compressed) .buttons-holder button {
+    margin-left: 1.5rem !important;
+  }
+
+  :host(.nav--md-compressed) .btn-menu .btn i[class*='fa-'] {
+    margin-right: 0.5rem !important;
+    margin-left: -0.5rem !important;
+  }
+
+  :host(.nav--md-compressed) .btn-menu .btn {
+    --btn-padding-inline: 2.5rem;
+  }
+
+  :host(.nav--md-compressed) ::slotted(a:not([slot='logo']):not([slot='secondary'])) {
+    margin-left: 1.5rem !important;
+  }
+}
+/* #endregion */
+
+/* #region Compact button */
+@media screen and (min-width: 62em) {
+  :host(.nav--btn-compact:not(.nav--large)) {
+    .btn-menu .btn {
+      padding: 0.5rem !important;
+
+      i {
+        margin-right: 0 !important;
+      }
+      span {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 62em) and (max-width: 90em) {
+  :host(.nav--btn-compact.nav--large) {
+    .btn-menu .btn {
+      padding: 0.5rem !important;
+
+      i {
+        margin-right: 0 !important;
+      }
+      span {
+        display: none;
+      }
+    }
+  }
+}
+/* #endregion */
+
+/* #region Dual with buttons */
+@media screen and (max-width: 62em) {
+  :host(.nav--dual-buttons) {
+    slot[name='dual'] {
+      padding-block: 1.5rem;
+      display: block;
+    }
+  }
+}
+
+@media screen and (min-width: 62em) {
+  :host(.nav--dual-buttons) {
+    slot[name='dual'] {
+      display: flex;
+      margin-left: auto;
+      flex-direction: row-reverse;
+    }
+  }
+}
+/* #endregion */