@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/collection/components/global-nav/style/global-nav.css

@@ -1,893 +0,0 @@
-:host {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-[hidden] {
-  display: none !important;
-}
-:host {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-[hidden] {
-  display: none !important;
-}
-.global-nav {
-  font-family: inherit;
-  font-size: inherit;
-  font-stretch: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-overflow: inherit;
-  text-transform: inherit;
-  text-align: inherit;
-  white-space: inherit;
-  color: inherit;
-}
-.global-nav button {
-  background: none;
-  color: inherit;
-  border: none;
-}
-.global-nav .icon-btn {
-  position: relative;
-  background: none;
-  color: inherit;
-  border: none;
-  align-self: normal;
-  padding: 9px 7px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-.global-nav .icon-btn .nano-icon {
-  inline-size: 18px;
-  block-size: 18px;
-}
-.global-nav ::slotted(.nano-nav-item[slot=icon]) {
-  --padding-top: 9px;
-  --padding-bottom: 9px;
-  --padding-start: 7px;
-  --padding-end: 7px;
-  --display: flex;
-  font-size: 18px;
-}
-.global-nav a {
-  color: inherit;
-  text-decoration: none;
-  white-space: nowrap;
-}
-.global-nav .nav-links_title {
-  margin: 8px 0 3px;
-}
-.global-nav .nav-links ul {
-  margin: 0;
-  padding: 0;
-}
-.global-nav .nav-links li {
-  list-style: none;
-}
-.global-nav .login-btn {
-  display: flex;
-  align-items: center;
-}
-.global-nav .menu-btn {
-  padding: 9px var(--bar-item-spacing) 9px var(--bar-item-spacing);
-}
-
-.site-content {
-  display: flex;
-  transition: min-height 0.2s ease;
-  position: relative;
-  z-index: auto;
-  align-items: stretch;
-  flex: 1;
-}
-
-.bars {
-  color: var(--bar-text-color);
-  z-index: var(--nano-layer-index-menubar, 10);
-  position: relative;
-  max-inline-size: 100%;
-  min-inline-size: 100%;
-  box-shadow: none;
-  transition: 0.2s ease box-shadow;
-  display: flex;
-  flex-wrap: wrap;
-}
-[stuck] .bars {
-  box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);
-}
-.bars::before {
-  content: "";
-  inline-size: 100%;
-  block-size: 100%;
-  z-index: -1;
-  background: var(--bar-background);
-  position: absolute;
-}
-
-.main-bar {
-  flex: 1 1 100%;
-  inline-size: fit-content;
-  padding-inline: 0 var(--bar-item-spacing);
-  padding-block: var(--bar-vertical-padding);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  overflow-x: hidden;
-}
-.main-bar:focus {
-  outline: none;
-}
-:host(.ready) .main-bar {
-  overflow-x: visible;
-}
-.main-bar > *,
-.main-bar ::slotted(*) {
-  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 > * {
-  flex: 0 0 auto;
-}
-.main-bar > * ::slotted(.nano-nav-item[slot=icon]) {
-  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);
-  --padding-top: 7px;
-  --padding-bottom: 7px;
-  --padding-end: 2px;
-  --padding-start: 2px;
-  text-decoration: none !important;
-}
-.main-bar .icon-btn {
-  margin-block: 0;
-  margin-inline-start: 6px;
-}
-:host(.threshold-2) .main-bar .icon-btn {
-  margin-block: 0;
-  margin-inline-start: 11px;
-}
-.main-bar .menu-btn.icon-btn {
-  margin: 0 !important;
-  border-inline-end: 1.5px solid var(--bar-color-shade);
-}
-.main-bar .logo {
-  block-size: 40px;
-  inline-size: 173px;
-  min-inline-size: 173px;
-}
-:host(:not(.threshold-1)) .main-bar .logo {
-  block-size: 30px;
-  inline-size: 130px;
-  min-inline-size: 130px;
-}
-.main-bar .logo-link {
-  margin-inline: 0;
-  padding-inline: var(--bar-item-spacing);
-  display: flex;
-  align-items: center;
-  border: none;
-}
-.main-bar .nav-links {
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: space-around;
-}
-.main-bar .nav-links ul {
-  display: flex;
-  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 {
-  justify-content: flex-start;
-  letter-spacing: 1.5px;
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 1.065em;
-  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);
-  margin-inline-start: 6px;
-  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-inline-size: 1px;
-  display: block;
-  margin: 0;
-  padding: 0;
-}
-
-.gn-menu {
-  position: fixed;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  z-index: -1;
-  display: none;
-  transition: z-index 0.01s ease 0.2s;
-  block-size: 100vh;
-  inline-size: 100vw;
-  overflow-y: auto;
-}
-:host(.threshold-4) .gn-menu {
-  position: absolute;
-  inline-size: calc(100vw - 20px);
-}
-.gn-menu.menu-full-screen {
-  inline-size: 100vw !important;
-}
-.gn-menu_wrap {
-  max-inline-size: 92vw;
-  inline-size: 335px;
-  background: var(--menu-background);
-  color: var(--menu-text-color);
-  padding: calc(var(--bar-vertical-padding) + 1px) 0 0;
-  box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.8);
-  position: relative;
-  pointer-events: all;
-  margin-block-end: 36px;
-  opacity: 0;
-  outline: none;
-  transition: transform 0.2s ease, opacity 0.2s ease;
-  overflow: hidden;
-}
-.gn-menu_wrap.has-promotion {
-  padding: var(--menu-padding) 0 0;
-}
-.gn-menu.open {
-  z-index: var(--nano-layer-index-dropdown, 300);
-  transition: z-index 0.01s ease;
-}
-.gn-menu.open .gn-menu_wrap {
-  opacity: 1;
-  transform: translate3d(0, 0, 0) !important;
-  transition: transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;
-}
-.gn-menu_actions {
-  padding-inline-end: calc(var(--menu-padding) / 2);
-  display: flex;
-  justify-content: space-between;
-}
-.gn-menu_actions-counter {
-  background: #d0021b;
-  color: var(--menu-text-color);
-  position: absolute;
-  inset-block-end: 4px;
-  inset-inline: auto 0;
-  font-size: 9px;
-  block-size: 14px;
-  line-height: 14px;
-  inline-size: auto;
-  min-inline-size: 14px;
-  border-radius: 50%;
-  box-sizing: border-box;
-  text-align: center;
-  text-indent: 0;
-}
-.gn-menu .content-wrap {
-  position: relative;
-  transition: 0.2s ease min-height;
-  min-block-size: 190px;
-}
-.gn-menu .content--sub {
-  padding: var(--menu-padding) 0 var(--menu-padding) 7px;
-}
-.gn-menu .menu-btn {
-  margin-inline-end: auto;
-}
-.gn-menu .nav-links {
-  display: flex;
-  flex-wrap: wrap;
-}
-.gn-menu .nav-links ::slotted(.nano-nav-item),
-.gn-menu .nav-links .nano-nav-item {
-  --icon-size: 14px;
-  --display: inline-block;
-  --secondary-bg-color: #001a21;
-  --padding-top: 10px;
-  --padding-bottom: 10px;
-  --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;
-  inline-size: 100%;
-}
-.gn-menu .nav-links .user-nav {
-  --bg-color: var(--menu-user-panel-bg);
-  --padding-top: 9px;
-  --padding-bottom: 9px;
-  font-weight: bold;
-  margin: 5px 0 0;
-}
-.gn-menu .nav-links .user-nav ::slotted(.nano-nav-item),
-.gn-menu .nav-links .user-nav .nano-nav-item {
-  font-weight: 400;
-  --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 {
-  padding-inline-start: var(--menu-padding);
-}
-.gn-menu .nav-links_title {
-  margin: 0 var(--menu-padding) 4px;
-  border-block-end: 1px solid var(--menu-hint-color);
-  padding-block-end: 8px;
-  text-transform: uppercase;
-  color: var(--menu-title-text);
-  letter-spacing: 1px;
-  font-weight: 600;
-}
-.gn-menu .nav-links_title--sites {
-  border-block-end: none;
-}
-.gn-menu .nav-links-wrap {
-  margin: 18px 0;
-}
-.gn-menu .nav-links-wrap:last-child {
-  margin-block-end: 0;
-}
-.gn-menu .nav-links .back-btn {
-  border-block-start: 1px solid var(--menu-hint-color);
-  border-block-end: 1px solid var(--menu-hint-color);
-  display: flex;
-  align-items: center;
-  padding: 10px 11px 10px 0;
-  inline-size: 100%;
-  font-size: 12px;
-  text-transform: uppercase;
-  color: var(--menu-title-text);
-  letter-spacing: 1px;
-  font-weight: 600;
-  cursor: pointer;
-}
-.gn-menu .nav-links .back-btn:hover {
-  color: var(--menu-text-color);
-}
-.gn-menu .nav-links .back-btn .nano-icon {
-  margin-inline-end: 10px;
-  font-size: 12px;
-  color: var(--menu-icon-color);
-}
-.gn-menu .nav-links--sub {
-  display: flex;
-  flex-wrap: wrap;
-}
-.gn-menu .nav-links--sub ::slotted(.nano-nav-item),
-.gn-menu .nav-links--sub .nano-nav-item {
-  --border-bottom: none;
-  --padding-end: var(--menu-padding);
-  --padding-start: var(--menu-padding);
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  margin: 0;
-  inline-size: 50%;
-  line-height: 1.8;
-}
-.gn-menu .nav-links--sites ::slotted(.nano-nav-item),
-.gn-menu .nav-links--sites .nano-nav-item {
-  inline-size: 100%;
-}
-.gn-menu .nav-links .content {
-  padding: 8px var(--menu-padding);
-}
-.gn-menu .login-btn {
-  padding-inline: 7px var(--menu-padding);
-  padding-block: var(--menu-padding);
-}
-.gn-menu .login-btn .nano-icon {
-  margin-inline-start: 10px;
-}
-.gn-menu .logout-btn {
-  justify-content: flex-end;
-}
-.gn-menu .logout-btn a {
-  padding: 0 5px;
-}
-
-.mask {
-  opacity: 0;
-  background: rgba(0, 0, 0, 0.3);
-  position: fixed;
-  inset-inline: 0;
-  inset-block-start: 0;
-  block-size: 100vh;
-  z-index: -1;
-  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;
-  visibility: hidden;
-}
-.mask.open {
-  opacity: 1;
-  transition: z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;
-  z-index: var(--nano-layer-index-mask, 10);
-  visibility: visible;
-}
-
-.search-btn::before {
-  content: "";
-  background-color: rgb(12, 90, 113);
-  block-size: 9px;
-  inset-inline: 0 5px;
-  inset-block-end: -20px;
-  position: absolute;
-  transform: translateZ(0) scaleX(0);
-  transform-origin: 0;
-  transition: 0.2s ease transform;
-}
-.search-btn--open::before {
-  transform: translateZ(0) scaleX(1);
-  opacity: 0.7;
-}
-
-.search-bar {
-  block-size: 0;
-  overflow: hidden;
-  transition: 0.2s ease height;
-  padding: 0 var(--bar-item-spacing);
-  outline: none;
-  max-inline-size: 45em;
-  margin-inline-start: auto;
-  flex: 1;
-  /** Overrides for when search is displayed underneath, in it's own bar */
-}
-.search-bar .search-widget {
-  margin: 0;
-  overflow: inherit;
-  max-inline-size: none;
-  max-block-size: none;
-  min-inline-size: auto;
-  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;
-  --input-bg-color: #f3f3f3;
-  --nano-input-border-color: transparent;
-  --nano-input-border-color--focus: var(--bar-search-focus);
-  font-size: 1.1875em;
-}
-.search-bar .search-widget .nano-select.search-input {
-  --input-border-width: 2px 3px 0 0;
-  --input-bg-color: var(--bar-search-focus);
-  --input-bg-color--focus: #f3f3f3;
-  color: #f3f3f3;
-}
-.search-bar .search-widget .nano-select.search-input.has-focus {
-  color: var(--bar-search-focus);
-}
-.search-bar .search-widget .select-input__arrow {
-  font-size: 0.75em;
-}
-.search-bar .search-widget .select__mask.sc-nano-select {
-  line-height: 2.35em;
-  min-block-size: 2.35em;
-  padding-block-start: 2px;
-}
-.search-bar .search-inputs {
-  padding: 0;
-  margin: 0;
-}
-.search-bar .search-autocomplete {
-  inset-block-start: 100%;
-  inline-size: 100%;
-}
-
-.search-widget {
-  padding-inline-end: var(--bar-item-spacing);
-  margin-inline: var(--bar-item-spacing) auto;
-  position: relative;
-  flex: 1 1 auto;
-  max-inline-size: 500px;
-  min-inline-size: 350px;
-  max-block-size: 36px;
-  inset-block-start: -1px;
-}
-.search-inputs {
-  display: flex;
-  margin: 0;
-}
-.search-inputs input[type=submit] {
-  display: none;
-}
-.search-autocomplete {
-  position: absolute;
-  inset-block-start: calc(100% + 15px);
-  inline-size: 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;
-  padding-block: calc(var(--bar-vertical-padding) / 2) 1px;
-  padding-inline: 0;
-  z-index: 1;
-}
-.search-autocomplete-hit {
-  padding-block: calc(var(--bar-vertical-padding) / 4);
-  padding-inline: var(--bar-item-spacing);
-  inline-size: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  text-align: start;
-  line-height: 1.5;
-  cursor: pointer;
-}
-.search-autocomplete-hit-scope {
-  color: rgb(167, 176, 179);
-  font-weight: 600;
-}
-.search-autocomplete-hit:hover, .search-autocomplete-hit:focus-visible {
-  background-color: #e4e6e8;
-}
-.search-autocomplete-hit:focus-visible {
-  box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
-}
-.search-autocomplete-hit:focus {
-  outline: none;
-}
-.search-autocomplete-hit .search__highlight,
-.search-autocomplete-hit em {
-  font-weight: bold;
-  font-style: normal;
-}
-.search-autocomplete-hit--no-result:hover, .search-autocomplete-hit--no-result:focus {
-  background: none !important;
-}
-.search-autocomplete-foot {
-  margin: 7px 0 0;
-}
-.search-autocomplete-submit {
-  background: none;
-  border: none;
-  align-self: normal;
-  padding: 9px var(--bar-item-spacing) !important;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  color: #007495;
-  justify-content: flex-end;
-  inline-size: 100%;
-  text-decoration: underline;
-  border-block-start: 1px solid rgb(232, 234, 234);
-}
-.search-autocomplete-submit:hover, .search-autocomplete-submit:focus {
-  background-color: #e4e6e8;
-}
-
-.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-weight: 600;
-  letter-spacing: 1.5px;
-  font-size: 1.2em;
-  flex: 0 1 auto;
-  inline-size: auto;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  position: relative;
-  inset-inline-start: 1px;
-  text-transform: uppercase;
-}
-:host(:not(.ready)) .nano-select.search-input {
-  overflow: hidden;
-  max-block-size: 1em;
-}
-.nano-select.search-input .down-arrow {
-  font-size: 0.65em;
-}
-
-.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;
-  inline-size: 206px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  flex: 1;
-}
-:host(:dir(rtl)) .nano-input.search-input {
-  --input-border-radius: 5px 0 0 5px;
-}
-
-:host-context([dir=rtl]) .nano-input.search-input {
-  --input-border-radius: 5px 0 0 5px;
-}
-
-:host(:not(.ready)) .nano-input.search-input {
-  overflow: hidden;
-  max-block-size: 1em;
-}
-.nano-input.search-input .search-icon {
-  background: none;
-  padding: 0 8px;
-  display: none;
-  font-size: 0.9em;
-}
-.nano-input.search-input .search-icon--show {
-  display: flex !important;
-}
-.nano-input.search-input .search-icon--loader {
-  animation: spin 1s linear infinite;
-}
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.nano-input.search-input .search-icon .nano-icon {
-  block-size: 1.4em;
-}
-
-.user-profile {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 2em;
-  background-color: var(--menu-user-profile-bg);
-}
-.user-profile .left {
-  display: flex;
-  align-items: center;
-}
-.user-profile .avatar-container {
-  position: relative;
-}
-.user-profile .avatar-container img.avatar {
-  border-radius: 50px;
-}
-.user-profile .avatar-container img.logo-small {
-  position: absolute;
-  block-size: 30px;
-  inline-size: 30px;
-  inset-block-end: 0;
-  inset-inline-end: 0;
-  background-color: #27586e;
-  border-radius: 10px;
-  padding: 5px;
-}
-.user-profile .user-details {
-  display: flex;
-  flex-direction: column;
-  margin: 0 1.25em;
-  color: white;
-}
-.user-profile .user-details .name {
-  font-size: 1.25em;
-}
-.user-profile .user-details .bio {
-  margin: 0.5em 0;
-}
-.user-profile .user-details .kudos span {
-  background-color: #81c7eb;
-  color: #415958;
-  padding: 0.25em;
-  border-radius: 0.5em;
-  font-weight: bold;
-}
-.user-profile .chevron-right {
-  font-size: 1.5em;
-  color: white;
-}
-
-.user-links {
-  position: relative;
-}
-.user-links .icon-btn {
-  padding-inline-end: 0;
-  font-weight: 400;
-  padding: 7px;
-}
-.user-links .icon-btn .nano-icon {
-  margin-inline-start: 5px;
-  inline-size: 16px;
-  block-size: 16px;
-  transform-origin: center;
-  transition: transform 0.2s ease, color 0.2s ease;
-}
-.user-links .icon-btn.open .nano-icon {
-  transform: rotate(180deg);
-  color: #007495;
-}
-.user-links-panel {
-  display: none;
-  position: absolute;
-  border-radius: 4px 0 4px 4px;
-  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
-  background-color: #568c9d;
-  opacity: 0;
-  transform: translate3d(0, 30px, 0);
-  transition: transform 0.2s ease, opacity 0.2s ease;
-  inset-inline-end: 0;
-  min-inline-size: 318px;
-  z-index: 2;
-}
-.user-links-panel:focus {
-  outline: none;
-}
-.user-links-panel.show {
-  opacity: 1;
-  transform: translate3d(0, calc(var(--padding) + 1px), 0);
-}
-.user-links-panel-content {
-  padding: 0 18px;
-  display: flex;
-  flex-direction: column;
-  color: white;
-}
-.user-links-panel-content a {
-  padding: 11px 0;
-  border-block-end: #669dac 1px solid;
-}
-.user-links-panel-content a:hover, .user-links-panel-content a:focus {
-  color: #455556;
-}
-.user-links-panel-content a:last-child {
-  border-block-end: none;
-}
-.user-links-panel-foot {
-  background-color: #aac5cd;
-  border-radius: 0 0 4px 4px;
-  padding: var(--padding);
-  color: #455556;
-  display: flex;
-  align-items: center;
-  font-weight: 400;
-  justify-content: space-between;
-}
-.user-links-panel-foot a:hover {
-  text-decoration: underline;
-}
-.user-links-panel .user-profile {
-  background-color: var(--bar-user-panel-bg);
-}
-
-: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 #4a4a4a;
-   * @prop --bar-color-shade: Defaults to #d8d8d8;
-   * @prop --bar-color-tint: Defaults to rgb(19 89 111);
-   * @prop --bar-color-focus: Defaults to #007fa9;
-   * @prop --bar-user-panel-bg: Defaults to #016d86;
-   * @prop --bar-dropdown-bg: Defaults to #196c82;
-   * @prop --bar-dropdown-text: Defaults to white;
-   * @prop --bar-search-focus: Defaults to #007FA9;
-
-   * @prop --menu-background: Defaults to #001a21;
-   * @prop --menu-text-color: 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;
-
-   * @prop --login-button-bg: Defaults to #17bb75;
-   * @prop --login-button-text: Defaults to white;
-   */
-  --bar-vertical-padding: 19px;
-  --bar-item-spacing: 13px;
-  --bar-background: white;
-  --bar-text-color: #4a4a4a;
-  --bar-color-shade: #d8d8d8;
-  --bar-color-tint: rgb(19 89 111);
-  --bar-color-focus: #007fa9;
-  --bar-user-panel-bg: #016d86;
-  --bar-dropdown-bg: #196c82;
-  --bar-dropdown-text: white;
-  --bar-search-focus: #007FA9;
-  --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: #007fa9;
-  --login-button-text: white;
-  --padding: 12px;
-  --padding-top: var(--padding);
-  --padding-end: var(--padding);
-  --padding-bottom: var(--padding);
-  --padding-start: var(--padding);
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  line-height: 1.5;
-  block-size: 100%;
-  font-size: 0.9375em;
-  font-size: clamp(0.77rem, 1vw, 0.9rem);
-}
-:host input,
-:host select,
-:host button {
-  font-family: inherit;
-  appearance: none;
-  font-size: inherit;
-}
-:host a:focus,
-:host button:focus {
-  outline: none;
-}
-:host a:focus-visible,
-:host button:focus-visible {
-  box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
-}