@nanoporetech-digital/components 3.2.0 → 3.3.0

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

@@ -35,17 +35,11 @@
   background: none;
   color: inherit;
   border: none;
-  -ms-flex-item-align: normal;
-      -ms-grid-row-align: normal;
-      align-self: normal;
+  align-self: normal;
   padding: 9px 7px;
   cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .global-nav .icon-btn nano-icon {
   width: 18px;
@@ -75,29 +69,20 @@
   list-style: none;
 }
 .global-nav .login-btn {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .global-nav .menu-btn {
   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;
+  align-items: stretch;
 }
 
 .mask {
@@ -108,18 +93,12 @@
   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;
 }
@@ -130,14 +109,11 @@
   position: relative;
   max-width: 100%;
   min-width: 100%;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  -webkit-transition: 0.2s ease box-shadow;
+  box-shadow: none;
   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);
+  box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);
 }
 .bars::before {
   content: "";
@@ -152,15 +128,9 @@
   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;
+  align-items: center;
+  justify-content: space-between;
   overflow-x: hidden;
 }
 .main-bar:focus {
@@ -171,7 +141,6 @@
 }
 .main-bar > *,
 .main-bar ::slotted(*) {
-  -webkit-transition: opacity 0.2s ease;
   transition: opacity 0.2s ease;
 }
 :host(:not(.ready)) .main-bar > *,
@@ -187,13 +156,10 @@
   opacity: 0 !important;
 }
 .main-bar > * {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 .main-bar > * ::slotted(nano-nav-item[slot=icon]) {
-  -webkit-margin-start: 11px;
-          margin-inline-start: 11px;
+  margin-inline-start: 11px;
 }
 .main-bar > * ::slotted(nano-nav-item),
 .main-bar > * nano-nav-item {
@@ -204,25 +170,18 @@
   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;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  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;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  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);
+  border-inline-end: 1.5px solid var(--bar-color-shade);
 }
 .main-bar .logo {
   height: 36px;
@@ -233,35 +192,21 @@
   height: 30px;
 }
 .main-bar .logo-link {
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-start: 0;
-          margin-inline-start: 0;
+  margin-inline-end: 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;
+  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;
+  flex: 0 0 auto;
   display: flex;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
+  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;
+  justify-content: space-around;
 }
 .main-bar .nav-links ::slotted(nano-nav-item),
 .main-bar .nav-links nano-nav-item {
@@ -272,16 +217,13 @@
   --margin: 0 var(--bar-item-spacing);
 }
 .main-bar .nav-links--main {
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
   letter-spacing: 0.5px;
   font-weight: 600;
   font-stretch: expanded;
   text-transform: uppercase;
   font-size: 1.065em;
-  -webkit-margin-end: auto;
-          margin-inline-end: auto;
+  margin-inline-end: auto;
 }
 .main-bar .nav-links--main ::slotted(nano-nav-item) {
   --color: var(--bar-text-color);
@@ -290,11 +232,8 @@
 }
 .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;
+  margin-inline-start: 6px;
+  justify-content: flex-end;
 }
 .main-bar .login-btn {
   display: inline-block;
@@ -330,12 +269,10 @@
   inset-inline-start: 0;
   z-index: -1;
   display: none;
-  -webkit-transition: z-index 0.01s ease 0.2s;
   transition: z-index 0.01s ease 0.2s;
   height: 100vh;
   width: 100vw;
   overflow-y: auto;
-  padding-block: 4px;
 }
 :host(.threshold-4) .gn-menu {
   position: absolute;
@@ -349,46 +286,31 @@
   width: 335px;
   background: var(--menu-background);
   color: var(--menu-text-color);
-  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);
+  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;
-  -webkit-margin-after: 36px;
-          margin-block-end: 36px;
+  margin-block-end: 36px;
   opacity: 0;
   outline: none;
-  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
-  transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
   transition: transform 0.2s ease, opacity 0.2s ease;
-  transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
 }
 .gn-menu_wrap.has-promotion {
   padding: var(--menu-padding) 0 0;
 }
 .gn-menu.open {
   z-index: var(--nano-layer-index-dropdown, 300);
-  -webkit-transition: z-index 0.01s ease;
   transition: z-index 0.01s ease;
 }
 .gn-menu.open .gn-menu_wrap {
   opacity: 1;
-  -webkit-transform: translate3d(0, 0, 0) !important;
-          transform: translate3d(0, 0, 0) !important;
-  -webkit-transition: opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;
-  transition: opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;
+  transform: translate3d(0, 0, 0) !important;
   transition: transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;
-  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(--menu-padding) / 2);
-          padding-inline-end: calc(var(--menu-padding) / 2);
-  display: -webkit-box;
-  display: -ms-flexbox;
+  padding-inline-end: calc(var(--menu-padding) / 2);
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
 }
 .gn-menu_actions-counter {
   background: #d0021b;
@@ -402,7 +324,6 @@
   width: auto;
   min-width: 14px;
   border-radius: 50%;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   text-align: center;
   text-indent: 0;
@@ -410,7 +331,6 @@
 .gn-menu .content-wrap {
   position: relative;
   overflow: hidden;
-  -webkit-transition: 0.2s ease min-height;
   transition: 0.2s ease min-height;
   min-height: 190px;
 }
@@ -418,15 +338,11 @@
   padding: var(--menu-padding) 0 var(--menu-padding) 7px;
 }
 .gn-menu .menu-btn {
-  -webkit-margin-end: auto;
-          margin-inline-end: auto;
+  margin-inline-end: auto;
 }
 .gn-menu .nav-links {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 .gn-menu .nav-links ::slotted(nano-nav-item),
 .gn-menu .nav-links nano-nav-item {
@@ -464,38 +380,31 @@
   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);
+  padding-inline-start: var(--menu-padding);
 }
 .gn-menu .nav-links_title {
   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;
+  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: 700;
 }
+.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 {
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
+  margin-block-end: 0;
 }
 .gn-menu .nav-links .back-btn {
-  -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;
+  border-block-start: 1px solid var(--menu-hint-color);
+  border-block-end: 1px solid var(--menu-hint-color);
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   padding: 10px 11px 10px 0;
   width: 100%;
   font-size: 12px;
@@ -503,19 +412,20 @@
   color: var(--menu-title-text);
   letter-spacing: 1px;
   font-weight: 700;
+  cursor: pointer;
+  font-stretch: expanded;
+}
+.gn-menu .nav-links .back-btn:hover {
+  color: var(--menu-text-color);
 }
 .gn-menu .nav-links .back-btn nano-icon {
-  -webkit-margin-end: 10px;
-          margin-inline-end: 10px;
+  margin-inline-end: 10px;
   font-size: 12px;
   color: var(--menu-icon-color);
 }
 .gn-menu .nav-links--sub {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 .gn-menu .nav-links--sub ::slotted(nano-nav-item),
 .gn-menu .nav-links--sub nano-nav-item {
@@ -528,6 +438,10 @@
   width: 50%;
   line-height: 1.8;
 }
+.gn-menu .nav-links--sites ::slotted(nano-nav-item),
+.gn-menu .nav-links--sites nano-nav-item {
+  width: 100%;
+}
 .gn-menu .nav-links .content {
   padding: 8px var(--menu-padding);
 }
@@ -536,13 +450,10 @@
   padding-block: var(--menu-padding);
 }
 .gn-menu .login-btn nano-icon {
-  -webkit-margin-start: 10px;
-          margin-inline-start: 10px;
+  margin-inline-start: 10px;
 }
 .gn-menu .logout-btn {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 .gn-menu .logout-btn a {
   padding: 0 5px;
@@ -555,29 +466,23 @@
   inset-inline: 0 5px;
   inset-block-end: -20px;
   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;
+  transform: translateZ(0) scaleX(0);
+  transform-origin: 0;
   transition: 0.2s ease transform;
 }
 .search-btn--open::before {
-  -webkit-transform: translateZ(0) scaleX(1);
-          transform: translateZ(0) scaleX(1);
+  transform: translateZ(0) scaleX(1);
   opacity: 0.7;
 }
 
 .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;
+  margin-inline-start: auto;
   /** Overrides for when search is displayed underneath, in it's own bar */
 }
 .search-bar .search-widget {
@@ -586,14 +491,34 @@
   max-width: none;
   max-height: none;
   min-width: auto;
-  -webkit-padding-end: 0;
-          padding-inline-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;
+  --input-border-width: 2px 0 0 0;
+  --input-bg-color: #f3f3f3;
+  --nano-input-border-color: transparent;
+  --nano-input-border-color--focus: var(--bar-color-shade);
+  font-size: 1.1875em;
+}
+.search-bar .search-widget nano-select.search-input {
+  --input-border-width: 2px 3px 0 0;
+  --input-bg-color: var(--bar-color-shade);
+  --input-bg-color--focus: #f3f3f3;
+  color: #f3f3f3;
+}
+.search-bar .search-widget nano-select.search-input.has-focus {
+  color: var(--bar-color-shade);
+}
+.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-height: 2.35em;
+  padding-block-start: 2px;
 }
 .search-bar .search-inputs {
   padding: 0 0;
@@ -605,24 +530,17 @@
 }
 
 .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;
+  padding-inline-end: var(--bar-item-spacing);
+  margin-inline-start: var(--bar-item-spacing);
+  margin-inline-end: auto;
   position: relative;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   max-width: 500px;
   min-width: 350px;
   max-height: 36px;
   inset-block-start: -1px;
 }
 .search-inputs {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   margin: 0;
 }
@@ -638,14 +556,10 @@
   border: 2px solid var(--bar-color-tint);
   border-radius: 0 0 5px 5px;
   color: #4a4a4a;
-  -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;
-          padding-block-end: 1px;
-  -webkit-padding-start: 0;
-          padding-inline-start: 0;
+  padding-block-start: calc(var(--bar-vertical-padding) / 2);
+  padding-inline-end: 0;
+  padding-block-end: 1px;
+  padding-inline-start: 0;
   z-index: 1;
 }
 .search-autocomplete-hit {
@@ -664,9 +578,15 @@
   color: #a7b0b3;
   font-weight: 600;
 }
-.search-autocomplete-hit:hover, .search-autocomplete-hit:focus {
+.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;
@@ -681,25 +601,16 @@
 .search-autocomplete-submit {
   background: none;
   border: none;
-  -ms-flex-item-align: normal;
-      -ms-grid-row-align: normal;
-      align-self: normal;
+  align-self: normal;
   padding: 9px var(--bar-item-spacing) !important;
   cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   color: #007495;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
   width: 100%;
   text-decoration: underline;
-  -webkit-border-before: 1px solid #e8eaea;
-          border-block-start: 1px solid #e8eaea;
+  border-block-start: 1px solid #e8eaea;
 }
 .search-autocomplete-submit:hover, .search-autocomplete-submit:focus {
   background-color: #e4e6e8;
@@ -713,33 +624,15 @@ nano-select.search-input {
   --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;
+  flex: 0 1 auto;
   width: auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  align-items: center;
+  flex-direction: column;
   position: relative;
   inset-inline-start: 1px;
   text-transform: uppercase;
 }
-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)) nano-select.search-input {
   overflow: hidden;
   max-height: 1em;
@@ -758,19 +651,10 @@ nano-input.search-input {
   --nano-input-border-color--focus: black;
   font-size: 1.2em;
   width: 206px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  align-items: center;
+  flex-direction: column;
+  flex: 1;
 }
 :host([dir=rtl]) nano-input.search-input {
   --input-border-radius: 5px 0 0 5px;
@@ -787,24 +671,14 @@ nano-input.search-input .search-icon {
   font-size: 0.9em;
 }
 nano-input.search-input .search-icon--show {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 nano-input.search-input .search-icon--loader {
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
-}
-@-webkit-keyframes spin {
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  animation: spin 1s linear infinite;
 }
 @keyframes spin {
   100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 nano-input.search-input .search-icon nano-icon {
@@ -812,25 +686,15 @@ nano-input.search-input .search-icon nano-icon {
 }
 
 .user-profile {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  justify-content: space-between;
+  align-items: center;
   padding: 2em;
   background-color: var(--menu-user-profile-bg);
 }
 .user-profile .left {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .user-profile .avatar-container {
   position: relative;
@@ -849,13 +713,8 @@ nano-input.search-input .search-icon nano-icon {
   padding: 5px;
 }
 .user-profile .user-details {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   margin: 0 1.25em;
   color: white;
 }
@@ -881,41 +740,29 @@ nano-input.search-input .search-icon nano-icon {
   position: relative;
 }
 .user-links .icon-btn {
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
+  padding-inline-end: 0;
   font-weight: 500;
 }
 .user-links .icon-btn nano-icon {
-  -webkit-margin-start: 5px;
-          margin-inline-start: 5px;
+  margin-inline-start: 5px;
   width: 16px;
   height: 16px;
-  -webkit-transform-origin: center;
-          transform-origin: center;
-  -webkit-transition: color 0.2s ease, -webkit-transform 0.2s ease;
-  transition: color 0.2s ease, -webkit-transform 0.2s ease;
+  transform-origin: center;
   transition: transform 0.2s ease, color 0.2s ease;
-  transition: transform 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease;
 }
 .user-links .icon-btn.open nano-icon {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
+  transform: rotate(180deg);
   color: #007495;
 }
 .user-links-panel {
   display: none;
   position: absolute;
   border-radius: 4px 0 4px 4px;
-  -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
-          box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
   background-color: #568c9d;
   opacity: 0;
-  -webkit-transform: translate3d(0, 30px, 0);
-          transform: translate3d(0, 30px, 0);
-  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
-  transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
+  transform: translate3d(0, 30px, 0);
   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;
   min-width: 318px;
   z-index: 2;
@@ -925,47 +772,33 @@ nano-input.search-input .search-icon nano-icon {
 }
 .user-links-panel.show {
   opacity: 1;
-  -webkit-transform: translate3d(0, calc(var(--padding) + 1px), 0);
-          transform: translate3d(0, calc(var(--padding) + 1px), 0);
+  transform: translate3d(0, calc(var(--padding) + 1px), 0);
 }
 .user-links-panel-content {
   padding: 0 18px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   color: white;
 }
 .user-links-panel-content a {
   padding: 11px 0;
-  -webkit-border-after: #669dac 1px solid;
-          border-block-end: #669dac 1px solid;
+  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 {
-  -webkit-border-after: none;
-          border-block-end: none;
+  border-block-end: none;
 }
 .user-links-panel-foot {
   background-color: #aac5cd;
   border-radius: 0 0 4px 4px;
   padding: var(--padding);
   color: #455556;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   font-weight: 500;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
 }
 .user-links-panel-foot a:hover {
   text-decoration: underline;
@@ -1003,9 +836,9 @@ nano-input.search-input .search-icon nano-icon {
   --bar-item-spacing: 13px;
   --bar-background: white;
   --bar-text-color: #196c82;
-  --bar-color-shade: rgb(19, 89, 111);
+  --bar-color-shade: rgb(12, 90, 113);
   --bar-color-tint: rgb(19, 89, 111);
-  --bar-color-focus: #001a21;
+  --bar-color-focus: #99a3a6;
   --bar-user-panel-bg: #016d86;
   --bar-dropdown-bg: #196c82;
   --bar-dropdown-text: white;
@@ -1036,7 +869,14 @@ nano-input.search-input .search-icon nano-icon {
 :host button {
   font-family: inherit;
   -webkit-appearance: none;
-     -moz-appearance: none;
           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)));
 }