@nanoporetech-digital/components 3.0.0 → 3.1.0

package/dist/collection/components/global-nav/{global-nav.css → style/global-nav.css}

@@ -10,48 +10,6 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  /**
-   * @prop --padding: padding used for many elements. Defaults to '12px 0'.
-   * @prop --padding-top: top padding used for many elements. Defaults to --padding.
-   * @prop --padding-bottom: bottom padding used for many elements. Defaults to --padding.
-   * @prop --padding-end: end (left on l2r / right on r2l) padding used for many elements. Defaulst to --padding.
-   * @prop --padding-start: start (right on l2r / left on r2l) padding used for many elements. Defaults to --padding.
-   * @prop --bar-background: Background of the bar element. Defaults to rgb(17, 85, 113).
-   * @prop --bar-text-color: Text color within the bar element. Defaults to white.
-   * @prop --bar-color-shade: Color variant used within the bar element. Defaults to rgb(40, 110, 133).
-   * @prop --bar-color-tint: Color variant used within the bar element. Defaults to rgb(88, 140, 161).
-   * @prop --bar-color-focus: Focus color of the form element within search. Defaults to #90c6e7;
-   * @prop --bar-color-focus: Focus color of the form element within search. Defaults to #90c6e7;
-   * @prop --menu-background: Background 'burger', menu element. Defaults to #001a21;
-   * @prop --menu-text-color: Text color 'burger', menu element. Defaults to white;
-   */
-  --padding: 12px;
-  --padding-top: var(--padding);
-  --padding-end: var(--padding);
-  --padding-bottom: var(--padding);
-  --padding-start: var(--padding);
-  --bar-background: #005c75;
-  --bar-text-color: white;
-  --bar-color-shade: rgb(19, 89, 111);
-  --bar-color-tint: rgb(19, 89, 111);
-  --bar-color-focus: #90c6e7;
-  --menu-background: #001a21;
-  --menu-text-color: white;
-  --menu-dropdown-bg: #196c82;
-  --menu-dropdown-color: white;
-  --menu-user-bg: #016d86;
-  --menu-user-bg-mobile: #001a21;
-  display: block;
-  position: relative;
-  line-height: 1.5;
-  height: 100%;
-}
-:host * {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-}
-
 .global-nav {
   font-family: inherit;
   font-size: inherit;
@@ -64,14 +22,12 @@
   text-align: inherit;
   white-space: inherit;
   color: inherit;
-  font-size: 0.88em;
   z-index: var(--nano-layer-index-menubar, 10);
 }
 .global-nav button {
   background: none;
   color: inherit;
   border: none;
-  padding: 0;
 }
 .global-nav .icon-btn {
   position: relative;
@@ -124,10 +80,243 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  font-size: 0.94em;
 }
 .global-nav .menu-btn {
-  padding: 9px var(--padding) 9px var(--padding);
+  padding: 9px var(--bar-item-spacing) 9px var(--bar-item-spacing);
+}
+
+.site-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-transition: min-height 0.2s ease;
+  transition: min-height 0.2s ease;
+  min-height: calc(100% - 61px);
+  position: relative;
+  z-index: auto;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+}
+
+.mask {
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.3);
+  position: fixed;
+  inset-inline: 0;
+  inset-block-start: 0;
+  height: 100vh;
+  z-index: -1;
+  -webkit-transition: opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;
+  transition: opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;
+  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;
+  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;
+  visibility: hidden;
+}
+.mask.open {
+  opacity: 1;
+  -webkit-transition: z-index 0.01s ease, visibility 0.01s ease, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;
+  transition: z-index 0.01s ease, visibility 0.01s ease, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;
+  transition: z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;
+  transition: z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;
+  z-index: 3;
+  visibility: visible;
+}
+
+.bars {
+  color: var(--bar-text-color);
+  z-index: var(--nano-layer-index-menubar, 10);
+  position: relative;
+  max-width: 100%;
+  min-width: 100%;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-transition: 0.2s ease box-shadow;
+  transition: 0.2s ease box-shadow;
+}
+[stuck] .bars {
+  -webkit-box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);
+}
+.bars::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background: var(--bar-background);
+  position: absolute;
+}
+
+.main-bar {
+  width: 100%;
+  padding-inline: 0 var(--bar-item-spacing);
+  padding-block: var(--bar-vertical-padding);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  overflow-x: hidden;
+}
+.main-bar:focus {
+  outline: none;
+}
+:host(.ready) .main-bar {
+  overflow-x: visible;
+}
+.main-bar > *,
+.main-bar ::slotted(*) {
+  -webkit-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
+}
+:host(:not(.ready)) .main-bar > *,
+:host(:not(.ready)) .main-bar ::slotted(*) {
+  opacity: 0 !important;
+}
+:host(.ready) .main-bar > *,
+:host(.ready) .main-bar ::slotted(*) {
+  opacity: 1;
+}
+:host(.resizing) .main-bar > *,
+:host(.resizing) .main-bar ::slotted(*) {
+  opacity: 0 !important;
+}
+.main-bar > * {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+}
+.main-bar > * ::slotted(nano-nav-item[slot=icon]) {
+  -webkit-margin-start: 11px;
+          margin-inline-start: 11px;
+}
+.main-bar > * ::slotted(nano-nav-item),
+.main-bar > * nano-nav-item {
+  --color-hover: var(--bar-color-focus);
+  --secondary-bg-color: var(--bar-dropdown-bg);
+  --secondary-color: var(--bar-dropdown-text);
+  --bg-color-open: var(--bar-background);
+  text-decoration: none !important;
+}
+.main-bar .icon-btn {
+  -webkit-margin-before: 0;
+          margin-block-start: 0;
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
+  -webkit-margin-start: 6px;
+          margin-inline-start: 6px;
+}
+:host(.threshold-2) .main-bar .icon-btn {
+  -webkit-margin-before: 0;
+          margin-block-start: 0;
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
+  -webkit-margin-start: 11px;
+          margin-inline-start: 11px;
+}
+.main-bar .menu-btn.icon-btn {
+  margin: 0 !important;
+  -webkit-border-end: 1.5px solid var(--bar-color-shade);
+          border-inline-end: 1.5px solid var(--bar-color-shade);
+}
+.main-bar .logo {
+  height: 36px;
+  width: 200px;
+  min-width: 200px;
+}
+:host(:not(.threshold-1)) .main-bar .logo {
+  height: 30px;
+}
+.main-bar .logo-link {
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  padding-inline: var(--bar-item-spacing);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border: none;
+}
+.main-bar .nav-links {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}
+.main-bar .nav-links ul {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}
+.main-bar .nav-links ::slotted(nano-nav-item),
+.main-bar .nav-links nano-nav-item {
+  --padding-top: 7px;
+  --padding-bottom: 7px;
+  --padding-end: 2px;
+  --padding-start: 2px;
+  --margin: 0 var(--bar-item-spacing);
+}
+.main-bar .nav-links--main {
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  letter-spacing: 0.36px;
+  font-weight: 500;
+  font-stretch: expanded;
+  text-transform: uppercase;
+  font-size: 1.065em;
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
+}
+.main-bar .nav-links--main ::slotted(nano-nav-item) {
+  --color: var(--bar-text-color);
+  --padding-end: 3px;
+  --padding-start: 0;
+}
+.main-bar .nav-links--sub {
+  --color: var(--color, #e2e2e2);
+  -webkit-margin-start: 6px;
+          margin-inline-start: 6px;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+.main-bar .login-btn {
+  display: inline-block;
+  border-radius: 4px;
+  background-color: var(--login-button-bg);
+  color: var(--login-button-text);
+  padding: 3px 10px;
+  position: relative;
+  inset-inline-start: auto;
+  inset-block-end: auto;
+  margin-inline: 11px 0;
+}
+.main-bar .measure-ele {
+  min-width: 1px;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+.sticker-trigger {
+  background: var(--bar-background);
+  width: 100%;
+  z-index: calc(var(--nano-layer-index-menubar, 10) + 1);
 }
 
 .gn-menu {
@@ -141,6 +330,7 @@
   height: 100vh;
   width: 100vw;
   overflow-y: auto;
+  padding-block: 4px;
 }
 :host(.threshold-4) .gn-menu {
   position: absolute;
@@ -154,7 +344,7 @@
   width: 335px;
   background: var(--menu-background);
   color: var(--menu-text-color);
-  padding: var(--padding) 0;
+  padding: var(--bar-vertical-padding) 0 0;
   -webkit-box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.8);
           box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.8);
   position: relative;
@@ -169,7 +359,7 @@
   transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
 }
 .gn-menu_wrap.has-promotion {
-  padding: var(--padding) 0 0;
+  padding: var(--menu-padding) 0 0;
 }
 .gn-menu.open {
   z-index: var(--nano-layer-index-dropdown, 300);
@@ -186,8 +376,8 @@
   transition: transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;
 }
 .gn-menu_actions {
-  -webkit-padding-end: calc(var(--padding) / 2);
-          padding-inline-end: calc(var(--padding) / 2);
+  -webkit-padding-end: calc(var(--menu-padding) / 2);
+          padding-inline-end: calc(var(--menu-padding) / 2);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -197,7 +387,7 @@
 }
 .gn-menu_actions-counter {
   background: #d0021b;
-  color: #fff;
+  color: var(--menu-text-color);
   position: absolute;
   inset-block-end: 4px;
   inset-inline: auto 0;
@@ -220,7 +410,7 @@
   min-height: 190px;
 }
 .gn-menu .content--sub {
-  padding: var(--padding) 0 var(--padding) 7px;
+  padding: var(--menu-padding) 0 var(--menu-padding) 7px;
 }
 .gn-menu .menu-btn {
   -webkit-margin-end: auto;
@@ -240,18 +430,17 @@
   --secondary-bg-color: #001a21;
   --padding-top: 10px;
   --padding-bottom: 10px;
-  --padding-end: calc(var(--padding) * 2);
-  --padding-start: calc(var(--padding) + 3px);
-  --color: white;
-  --color-hover: #90c6e7;
+  --padding-end: calc(var(--menu-padding) * 2);
+  --padding-start: calc(var(--menu-padding) + 3px);
+  --color: var(--menu-text-color);
+  --color-hover: var(--menu-title-text);
   --bg-color-hover: transparent;
   --bg-color-focus: #002530;
   --focus-outline: none;
-  font-size: 0.99em;
   width: 100%;
 }
 .gn-menu .nav-links .user-nav {
-  --bg-color: #193037;
+  --bg-color: var(--menu-user-panel-bg);
   --padding-top: 9px;
   --padding-bottom: 9px;
   font-weight: bold;
@@ -262,15 +451,25 @@
   font-weight: 500;
   --bg-color: transparent;
 }
+.gn-menu .nav-links .user-nav .content {
+  padding: 0;
+  background-color: var(--menu-user-panel-bg);
+}
+.gn-menu .nav-links .user-nav .content--sub {
+  padding-inline: var(--menu-padding);
+}
+.gn-menu .nav-links .user-nav .back-btn {
+  -webkit-padding-start: var(--menu-padding);
+          padding-inline-start: var(--menu-padding);
+}
 .gn-menu .nav-links_title {
-  margin: 0 var(--padding) 4px;
-  -webkit-border-after: 1px solid #33484d;
-          border-block-end: 1px solid #33484d;
+  margin: 0 var(--menu-padding) 4px;
+  -webkit-border-after: 1px solid var(--menu-hint-color);
+          border-block-end: 1px solid var(--menu-hint-color);
   -webkit-padding-after: 8px;
           padding-block-end: 8px;
-  font-size: 0.86em;
   text-transform: uppercase;
-  color: #90c6e7;
+  color: var(--menu-title-text);
   letter-spacing: 1px;
   font-weight: 700;
 }
@@ -282,10 +481,10 @@
           margin-block-end: 0;
 }
 .gn-menu .nav-links .back-btn {
-  -webkit-border-before: 1px solid #33484d;
-          border-block-start: 1px solid #33484d;
-  -webkit-border-after: 1px solid #33484d;
-          border-block-end: 1px solid #33484d;
+  -webkit-border-before: 1px solid var(--menu-hint-color);
+          border-block-start: 1px solid var(--menu-hint-color);
+  -webkit-border-after: 1px solid var(--menu-hint-color);
+          border-block-end: 1px solid var(--menu-hint-color);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -296,7 +495,7 @@
   width: 100%;
   font-size: 12px;
   text-transform: uppercase;
-  color: #90c6e7;
+  color: var(--menu-title-text);
   letter-spacing: 1px;
   font-weight: 700;
 }
@@ -304,7 +503,7 @@
   -webkit-margin-end: 10px;
           margin-inline-end: 10px;
   font-size: 12px;
-  color: white;
+  color: var(--menu-icon-color);
 }
 .gn-menu .nav-links--sub {
   display: -webkit-box;
@@ -316,8 +515,8 @@
 .gn-menu .nav-links--sub ::slotted(nano-nav-item),
 .gn-menu .nav-links--sub nano-nav-item {
   --border-bottom: none;
-  --padding-end: var(--padding);
-  --padding-start: var(--padding);
+  --padding-end: var(--menu-padding);
+  --padding-start: var(--menu-padding);
   --padding-top: 8px;
   --padding-bottom: 8px;
   margin: 0;
@@ -325,11 +524,11 @@
   line-height: 1.8;
 }
 .gn-menu .nav-links .content {
-  padding: 8px var(--padding);
+  padding: 8px var(--menu-padding);
 }
 .gn-menu .login-btn {
-  padding-inline: 7px var(--padding);
-  padding-block: 9px;
+  padding-inline: 7px var(--menu-padding);
+  padding-block: var(--menu-padding);
 }
 .gn-menu .login-btn nano-icon {
   -webkit-margin-start: 10px;
@@ -344,69 +543,97 @@
   padding: 0 5px;
 }
 
-.sticker-trigger {
-  background: var(--bar-background);
-  width: 100%;
-  z-index: calc(var(--nano-layer-index-menubar, 10) + 1);
+.search-btn::before {
+  content: "";
+  background-color: #0c5a71;
+  height: 9px;
+  inset-inline: 0 5px;
+  inset-block-end: -18px;
+  position: absolute;
+  -webkit-transform: translateZ(0) scaleX(0);
+          transform: translateZ(0) scaleX(0);
+  -webkit-transform-origin: 0;
+          transform-origin: 0;
+  -webkit-transition: 0.2s ease transform;
+  transition: 0.2s ease transform;
+}
+.search-btn--open::before {
+  -webkit-transform: translateZ(0) scaleX(1);
+          transform: translateZ(0) scaleX(1);
+  opacity: 0.7;
 }
 
-.bars {
-  color: var(--bar-text-color);
-  z-index: var(--nano-layer-index-menubar, 10);
-  position: relative;
-  max-width: 100%;
-  min-width: 100%;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  -webkit-transition: 0.2s ease box-shadow;
-  transition: 0.2s ease box-shadow;
+.search-bar {
+  height: 0;
+  overflow: hidden;
+  -webkit-transition: 0.2s ease height;
+  transition: 0.2s ease height;
+  padding: 0 var(--bar-item-spacing);
+  outline: none;
+  max-width: 45em;
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
+  /** Overrides for when search is displayed underneath, in it's own bar */
+}
+.search-bar .search-widget {
+  margin: 0;
+  overflow: inherit;
+  max-width: none;
+  max-height: none;
+  -webkit-padding-end: 0;
+          padding-inline-end: 0;
+}
+.search-bar .search-widget .search-icon--search {
+  display: none;
+}
+.search-bar .search-widget .search-input {
+  --input-border-width: 2px 0 0 0 !important;
 }
-[stuck] .bars {
-  -webkit-box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);
-          box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);
+.search-bar .search-inputs {
+  padding: 0 0;
+  margin: 0 0;
 }
-.bars::before {
-  content: "";
+.search-bar .search-autocomplete {
+  inset-block-start: 100%;
   width: 100%;
-  height: 100%;
-  z-index: -1;
-  background: var(--bar-background);
-  position: absolute;
 }
-.bars .search-widget {
-  -webkit-margin-start: 11px;
-          margin-inline-start: 11px;
+
+.search-widget {
+  -webkit-padding-end: var(--bar-item-spacing);
+          padding-inline-end: var(--bar-item-spacing);
+  -webkit-margin-start: var(--bar-item-spacing);
+          margin-inline-start: var(--bar-item-spacing);
   -webkit-margin-end: auto;
           margin-inline-end: auto;
   position: relative;
   -webkit-box-flex: 1;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
-  max-width: 45vw;
+  max-width: 450px;
   min-width: 269px;
   max-height: 36px;
+  inset-block-start: -3px;
 }
-.bars .search-inputs {
+.search-inputs {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   margin: 0;
 }
-.bars .search-inputs input[type=submit] {
+.search-inputs input[type=submit] {
   display: none;
 }
-.bars .search-autocomplete {
+.search-autocomplete {
   position: absolute;
-  inset-block-start: 100%;
-  width: 100%;
+  inset-block-start: calc(100% + 15px);
+  width: calc(100% - var(--bar-item-spacing));
   inset-inline-start: 0;
   background: white;
   border: 2px solid var(--bar-color-tint);
   border-radius: 0 0 5px 5px;
   color: #4a4a4a;
-  font-size: 0.85em;
-  -webkit-padding-before: calc(var(--padding) / 2);
-          padding-block-start: calc(var(--padding) / 2);
+  -webkit-padding-before: calc(var(--bar-vertical-padding) / 2);
+          padding-block-start: calc(var(--bar-vertical-padding) / 2);
   -webkit-padding-end: 0;
           padding-inline-end: 0;
   -webkit-padding-after: 1px;
@@ -415,15 +642,9 @@
           padding-inline-start: 0;
   z-index: 1;
 }
-.bars .search-autocomplete-hit {
-  -webkit-padding-before: calc(var(--padding) / 4);
-          padding-block-start: calc(var(--padding) / 4);
-  -webkit-padding-after: calc(var(--padding) / 4);
-          padding-block-end: calc(var(--padding) / 4);
-  -webkit-padding-start: var(--padding);
-          padding-inline-start: var(--padding);
-  -webkit-padding-end: var(--padding);
-          padding-inline-end: var(--padding);
+.search-autocomplete-hit {
+  padding-block: calc(var(--bar-vertical-padding) / 4);
+  padding-inline: var(--bar-item-spacing);
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -433,32 +654,31 @@
   line-height: 1.5;
   cursor: pointer;
 }
-.bars .search-autocomplete-hit-scope {
-  font-size: 0.76em;
+.search-autocomplete-hit-scope {
   color: #a7b0b3;
   font-weight: 600;
 }
-.bars .search-autocomplete-hit:hover, .bars .search-autocomplete-hit:focus {
+.search-autocomplete-hit:hover, .search-autocomplete-hit:focus {
   background-color: #e4e6e8;
 }
-.bars .search-autocomplete-hit .search__highlight,
-.bars .search-autocomplete-hit em {
+.search-autocomplete-hit .search__highlight,
+.search-autocomplete-hit em {
   font-weight: bold;
   font-style: normal;
 }
-.bars .search-autocomplete-hit--no-result:hover, .bars .search-autocomplete-hit--no-result:focus {
+.search-autocomplete-hit--no-result:hover, .search-autocomplete-hit--no-result:focus {
   background: none !important;
 }
-.bars .search-autocomplete-foot {
+.search-autocomplete-foot {
   margin: 7px 0 0;
 }
-.bars .search-autocomplete-submit {
+.search-autocomplete-submit {
   background: none;
   border: none;
   -ms-flex-item-align: normal;
       -ms-grid-row-align: normal;
       align-self: normal;
-  padding: 9px var(--padding);
+  padding: 9px var(--bar-item-spacing) !important;
   cursor: pointer;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -475,19 +695,18 @@
   -webkit-border-before: 1px solid #e8eaea;
           border-block-start: 1px solid #e8eaea;
 }
-.bars .search-autocomplete-submit:hover, .bars .search-autocomplete-submit:focus {
+.search-autocomplete-submit:hover, .search-autocomplete-submit:focus {
   background-color: #e4e6e8;
 }
-.bars .search-input {
-  --input-border-style: solid 1px rgb(85, 140, 157);
-  --input-border-style--focus: solid 1px var(--bar-color-focus, #90c6e7);
-  --input-border-width: 1px;
-  font-size: 0.9em;
-}
-.bars nano-select.search-input {
-  --input-bg-color: var(--bar-color-tint, rgb(88, 140, 161));
-  --input-text-color: inherit;
-  --input-border-radius: 5px 0 0 5px;
+
+nano-select.search-input {
+  --input-border-width: 0 0 2px 0;
+  --input-text-color: var(--bar-text-color);
+  --nano-input-border-color: rgb(103, 138, 154);
+  --padding-end: var(--bar-item-spacing);
+  --nano-input-border-color--focus: black;
+  font-stretch: expanded;
+  font-size: 1.2em;
   -webkit-box-flex: 0;
       -ms-flex: 0 1 auto;
           flex: 0 1 auto;
@@ -504,24 +723,34 @@
           flex-direction: column;
   position: relative;
   inset-inline-start: 1px;
+  text-transform: uppercase;
 }
-:host([dir=rtl]) .bars nano-select.search-input {
-  --input-border-radius: 0 5px 5px 0;
+nano-select.search-input::after {
+  content: "";
+  inset-inline-end: 0;
+  inset-block: 6px 6px;
+  width: 2px;
+  background: #678a9a;
+  position: absolute;
+  z-index: 1;
 }
-
-:host(:not(.ready)) .bars nano-select.search-input {
+:host(:not(.ready)) nano-select.search-input {
   overflow: hidden;
   max-height: 1em;
 }
-.bars nano-select.search-input .down-arrow {
+nano-select.search-input .down-arrow {
   font-size: 0.65em;
 }
-.bars nano-input.search-input {
-  --input-text-color: inherit;
-  --input-bg-color: var(--bar-color-shade, rgb(40, 110, 133));
-  --clear-btn-color: #4a4a4a;
-  --input-border-radius: 0 5px 5px 0;
-  --placeholder-color: white;
+
+nano-input.search-input {
+  --clear-btn-color: var(--bar-text-color);
+  --nano-input-border-color: rgb(103, 138, 154);
+  --input-border-width: 0 0 2px 0;
+  --placeholder-color: var(--bar-text-color);
+  --input-text-color: var(--bar-text-color);
+  --padding-start: 21px;
+  --nano-input-border-color--focus: black;
+  font-size: 1.2em;
   width: 206px;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -537,33 +766,26 @@
       -ms-flex: 1;
           flex: 1;
 }
-:host([dir=rtl]) .bars nano-input.search-input {
+:host([dir=rtl]) nano-input.search-input {
   --input-border-radius: 5px 0 0 5px;
 }
 
-:host(:not(.ready)) .bars nano-input.search-input {
+:host(:not(.ready)) nano-input.search-input {
   overflow: hidden;
   max-height: 1em;
 }
-.bars nano-input.search-input.has-value {
-  --input-bg-color: #fff;
-  --input-text-color: #4a4a4a;
-}
-.bars nano-input.search-input.has-value .search-icon {
-  color: #4a4a4a;
-}
-.bars nano-input.search-input .search-icon {
+nano-input.search-input .search-icon {
   background: none;
-  color: white;
   padding: 0 8px;
   display: none;
+  font-size: 0.9em;
 }
-.bars nano-input.search-input .search-icon--show {
+nano-input.search-input .search-icon--show {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.bars nano-input.search-input .search-icon--loader {
+nano-input.search-input .search-icon--loader {
   -webkit-animation: spin 1s linear infinite;
           animation: spin 1s linear infinite;
 }
@@ -579,7 +801,7 @@
             transform: rotate(360deg);
   }
 }
-.bars nano-input.search-input .search-icon nano-icon {
+nano-input.search-input .search-icon nano-icon {
   height: 1.4em;
 }
 
@@ -594,7 +816,7 @@
       -ms-flex-align: center;
           align-items: center;
   padding: 2em;
-  background-color: var(--menu-user-bg-mobile);
+  background-color: var(--menu-user-profile-bg);
 }
 .user-profile .left {
   display: -webkit-box;
@@ -649,92 +871,15 @@
   color: white;
 }
 
-.main-bar {
-  width: 100%;
-  padding-inline: 0 var(--padding);
-  padding-block: var(--padding);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  overflow-x: hidden;
-}
-.main-bar:focus {
-  outline: none;
-}
-:host(.ready) .main-bar {
-  overflow-x: visible;
-}
-.main-bar > *,
-.main-bar ::slotted(*) {
-  -webkit-transition: opacity 0.2s ease;
-  transition: opacity 0.2s ease;
-}
-:host(:not(.ready)) .main-bar > *,
-:host(:not(.ready)) .main-bar ::slotted(*) {
-  opacity: 0 !important;
-}
-:host(.ready) .main-bar > *,
-:host(.ready) .main-bar ::slotted(*) {
-  opacity: 1;
-}
-:host(.resizing) .main-bar > *,
-:host(.resizing) .main-bar ::slotted(*) {
-  opacity: 0 !important;
-}
-.main-bar > * {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-}
-.main-bar > * ::slotted(nano-nav-item[slot=icon]) {
-  -webkit-margin-start: 11px;
-          margin-inline-start: 11px;
-}
-.main-bar > * ::slotted(nano-nav-item),
-.main-bar > * nano-nav-item {
-  --color-hover: #e4e6e8;
-  --secondary-bg-color: var(--menu-dropdown-bg);
-  --secondary-color: var(--menu-dropdown-color);
-  --bg-color-open: var(--bar-background);
-  text-decoration: none !important;
-}
-.main-bar .icon-btn {
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
-  -webkit-margin-start: 6px;
-          margin-inline-start: 6px;
-}
-:host(.threshold-2) .main-bar .icon-btn {
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
-  -webkit-margin-start: 11px;
-          margin-inline-start: 11px;
-}
-.main-bar .menu-btn.icon-btn {
-  margin: 0 !important;
-  -webkit-border-end: 1.5px solid var(--bar-color-shade);
-          border-inline-end: 1.5px solid var(--bar-color-shade);
-}
-.main-bar .user-links {
+.user-links {
   position: relative;
 }
-.main-bar .user-links .icon-btn {
+.user-links .icon-btn {
   -webkit-padding-end: 0;
           padding-inline-end: 0;
-  font-size: 0.93em;
   font-weight: 500;
 }
-.main-bar .user-links .icon-btn nano-icon {
+.user-links .icon-btn nano-icon {
   -webkit-margin-start: 5px;
           margin-inline-start: 5px;
   width: 16px;
@@ -746,12 +891,12 @@
   transition: transform 0.2s ease, color 0.2s ease;
   transition: transform 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease;
 }
-.main-bar .user-links .icon-btn.open nano-icon {
+.user-links .icon-btn.open nano-icon {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
   color: #007495;
 }
-.main-bar .user-links-panel {
+.user-links-panel {
   display: none;
   position: absolute;
   border-radius: 4px 0 4px 4px;
@@ -766,19 +911,18 @@
   transition: transform 0.2s ease, opacity 0.2s ease;
   transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
   inset-inline-end: 0;
-  font-size: 0.85em;
   min-width: 318px;
   z-index: 2;
 }
-.main-bar .user-links-panel:focus {
+.user-links-panel:focus {
   outline: none;
 }
-.main-bar .user-links-panel.show {
+.user-links-panel.show {
   opacity: 1;
   -webkit-transform: translate3d(0, calc(var(--padding) + 1px), 0);
           transform: translate3d(0, calc(var(--padding) + 1px), 0);
 }
-.main-bar .user-links-panel-content {
+.user-links-panel-content {
   padding: 0 18px;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -789,19 +933,19 @@
           flex-direction: column;
   color: white;
 }
-.main-bar .user-links-panel-content a {
+.user-links-panel-content a {
   padding: 11px 0;
   -webkit-border-after: #669dac 1px solid;
           border-block-end: #669dac 1px solid;
 }
-.main-bar .user-links-panel-content a:hover, .main-bar .user-links-panel-content a:focus {
+.user-links-panel-content a:hover, .user-links-panel-content a:focus {
   color: #455556;
 }
-.main-bar .user-links-panel-content a:last-child {
+.user-links-panel-content a:last-child {
   -webkit-border-after: none;
           border-block-end: none;
 }
-.main-bar .user-links-panel-foot {
+.user-links-panel-foot {
   background-color: #aac5cd;
   border-radius: 0 0 4px 4px;
   padding: var(--padding);
@@ -817,161 +961,75 @@
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.main-bar .user-links-panel-foot a:hover {
+.user-links-panel-foot a:hover {
   text-decoration: underline;
 }
-.main-bar .user-links-panel .user-profile {
-  background-color: var(--menu-user-bg);
-}
-.main-bar .logo {
-  height: 34px;
-  width: auto;
-  min-width: 196px;
-}
-:host(:not(.threshold-1)) .main-bar .logo {
-  height: 30px;
-}
-.main-bar .logo-link {
-  -webkit-margin-end: auto;
-          margin-inline-end: auto;
-  -webkit-margin-start: 0;
-          margin-inline-start: 0;
-  padding-inline: 11px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  border: none;
-}
-.main-bar .nav-links {
-  font-size: 0.75rem;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
-}
-.main-bar .nav-links ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
-}
-.main-bar .nav-links ::slotted(nano-nav-item),
-.main-bar .nav-links nano-nav-item {
-  --padding-top: 7px;
-  --padding-bottom: 7px;
-  --padding-end: 2px;
-  --padding-start: 2px;
-  --margin: 0 8px;
-}
-.main-bar .nav-links--main {
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  letter-spacing: 0.33px;
-  font-weight: 600;
-  font-stretch: expanded;
-  font-size: 0.8125rem;
-}
-.main-bar .nav-links--main ::slotted(nano-nav-item) {
-  --color: #fff;
-  --padding-end: 3px;
-  --padding-start: 0;
-}
-.main-bar .nav-links--sub {
-  --color: var(--color, #e2e2e2);
-  opacity: 0.9 !important;
-  -webkit-margin-start: 6px;
-          margin-inline-start: 6px;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-}
-.main-bar .login-btn {
-  display: inline-block;
-  border-radius: 4px;
-  background-color: #17bb75;
-  color: #fff;
-  padding: 3px 10px;
-  position: relative;
-  inset-inline-start: auto;
-  inset-block-end: auto;
-  margin-inline: 11px 0;
-}
-.main-bar .measure-ele {
-  min-width: 1px;
-  display: block;
-  margin: 0;
-  padding: 0;
+.user-links-panel .user-profile {
+  background-color: var(--bar-user-panel-bg);
 }
 
-.search-bar {
-  height: 0;
-  overflow: hidden;
-  -webkit-transition: 0.2s ease height;
-  transition: 0.2s ease height;
-  padding: 0 var(--padding);
-  outline: none;
-  max-width: 45em;
-  -webkit-margin-start: auto;
-          margin-inline-start: auto;
-}
-.search-bar .search-widget {
-  margin: 0;
-  overflow: inherit;
-  max-width: none;
-  max-height: none;
-  padding: 0 0 var(--padding);
-}
-.search-bar .search-inputs {
-  padding: 0 0;
-  margin: 0 0;
-}
-.search-bar .search-autocomplete {
-  inset-block-start: calc(100% - (var(--padding) + 1px));
-}
+:host {
+  /**
+   * @prop --bar-vertical-padding. Defaults to 21px;
+   * @prop --bar-item-spacing. Defaults to 16px;
+   * @prop --bar-background. Defaults to white;
+   * @prop --bar-text-color. Defaults to #196c82;
+   * @prop --bar-color-shade. Defaults to rgb(19, 89, 111);
+   * @prop --bar-color-tint. Defaults to rgb(19, 89, 111);
+   * @prop --bar-color-focus. Defaults to #001a21;
+   * @prop --bar-user-panel-bg. Defaults to #016d86;
 
-.site-content {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-transition: min-height 0.2s ease;
-  transition: min-height 0.2s ease;
-  min-height: calc(100% - 61px);
-  position: relative;
-  z-index: auto;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-}
+   * @prop --menu-background. Defaults to #001a21;
+   * @prop --menu-text-color. Defaults to white;
+   * @prop --bar-dropdown-bg. Defaults to #196c82;
+   * @prop --bar-dropdown-text. Defaults to white;
+   * @prop --menu-user-profile-bg. Defaults to #001a21;
+   * @prop --menu-user-panel-bg. Defaults to #193037;
+   * @prop --menu-padding. Defaults to 12px;
+   * @prop --menu-hint-color. Defaults to #33484d;
+   * @prop --menu-title-text. Defaults to #90c6e7;
+   * @prop --menu-icon-color. Defaults to white;
 
-.mask {
-  opacity: 0;
-  background: rgba(0, 0, 0, 0.3);
-  position: fixed;
-  inset-inline: 0;
-  inset-block-start: 0;
-  height: 100vh;
-  z-index: -1;
-  -webkit-transition: opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;
-  transition: opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;
-  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;
-  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s, -webkit-transform 0.2s ease;
-  visibility: hidden;
+   * @prop --login-button-bg. Defaults to #17bb75;
+   * @prop --login-button-text. Defaults to white;
+   */
+  --bar-vertical-padding: 21px;
+  --bar-item-spacing: 16px;
+  --bar-background: white;
+  --bar-text-color: #196c82;
+  --bar-color-shade: rgb(19, 89, 111);
+  --bar-color-tint: rgb(19, 89, 111);
+  --bar-color-focus: #001a21;
+  --bar-user-panel-bg: #016d86;
+  --bar-dropdown-bg: #196c82;
+  --bar-dropdown-text: white;
+  --menu-background: #001a21;
+  --menu-text-color: white;
+  --menu-user-profile-bg: #001a21;
+  --menu-user-panel-bg: #193037;
+  --menu-padding: 12px;
+  --menu-hint-color: #33484d;
+  --menu-title-text: #90c6e7;
+  --menu-icon-color: white;
+  --login-button-bg: #17bb75;
+  --login-button-text: white;
+  --padding: 12px;
+  --padding-top: var(--padding);
+  --padding-end: var(--padding);
+  --padding-bottom: var(--padding);
+  --padding-start: var(--padding);
+  display: block;
+  position: relative;
+  line-height: 1.5;
+  height: 100%;
+  font-size: 0.9375em;
 }
-.mask.open {
-  opacity: 1;
-  -webkit-transition: z-index 0.01s ease, visibility 0.01s ease, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;
-  transition: z-index 0.01s ease, visibility 0.01s ease, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;
-  transition: z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;
-  transition: z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;
-  z-index: 3;
-  visibility: visible;
+:host input,
+:host select,
+:host button {
+  font-family: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  font-size: inherit;
 }