@swisspost/internet-header 1.9.1 → 1.11.0

package/dist/collection/components/post-main-navigation/post-main-navigation.css

@@ -1,637 +1 @@
-/**
- * Colors used by the post style guide
- */
-/**
- * Maps. Allow maps to have custom colors from the project
- * by always merging into a default empty map
- */
-/**
- * Colors used by the post style guide
- */
-/**
- * Maps. Allow maps to have custom colors from the project
- * by always merging into a default empty map
- */
-/**
- * Override the necessary bootstrap
- * colors and maps using colors from
- * the post style guide only.
- *
- * Other bootstrap colors
- * will be available as sass-variables
- * but should not be used.
-*/
-/*!
- * Copyright 2021 by Swiss Post, Information Technology
- */
-/**
- * Generate responsive size properties for things like height, width, margin, padding, etc.
- * @param $curve-size One of the curve sizes predefined at https://www.experience-hub.ch/document/2307#/grundlagen-web/abstaende
- * @param $property Property key (height, width, padding, margin, top, etc.)
- * @param $template Value template string used for shorthand declarations like padding ("$value auto" = padding: 1rem auto)
- */
-.flyout-nav, .flyout-column h3 {
-  font-size: 0.9375rem;
-}
-@media (min-width: 600px) {
-  .flyout-nav, .flyout-column h3 {
-    font-size: 1rem;
-  }
-}
-@media (min-width: 1024px) {
-  .flyout-nav, .flyout-column h3 {
-    font-size: 1.0625rem;
-  }
-}
-
-.flyout-title {
-  font-size: 1.0625rem;
-}
-@media (min-width: 600px) {
-  .flyout-title {
-    font-size: 1.25rem;
-  }
-}
-@media (min-width: 1024px) {
-  .flyout-title {
-    font-size: 1.5rem;
-  }
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 700;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 700;
-  font-style: italic;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 400;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 400;
-  font-style: italic;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 300;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 300;
-  font-style: italic;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff") format("woff");
-}
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
-.btn-blank {
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-}
-
-.nav-link, .main-link, .flyout-close-button, .flyout-link {
-  outline: none;
-  outline-offset: 2px;
-  /* Compatibility with button-group */
-  text-decoration: none;
-  color: rgba(0, 0, 0, 0.8);
-  transition: color 200ms;
-  background-color: transparent;
-  box-shadow: none;
-  border: 0;
-  margin: 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.nav-link:is(:focus-visible, :focus-within, .pretend-focus), .main-link:is(:focus-visible, :focus-within, .pretend-focus), .flyout-close-button:is(:focus-visible, :focus-within, .pretend-focus), .flyout-link:is(:focus-visible, :focus-within, .pretend-focus) {
-  outline: 2px solid var(--post-contrast-color);
-}
-.nav-link:hover, .main-link:hover, .flyout-close-button:hover, .flyout-link:hover, .nav-link:focus, .main-link:focus, .flyout-close-button:focus, .flyout-link:focus {
-  color: black;
-}
-.nav-link:focus-visible, .main-link:focus-visible, .flyout-close-button:focus-visible, .flyout-link:focus-visible {
-  z-index: 1;
-  position: relative;
-}
-.nav-link > svg, .main-link > svg, .flyout-close-button > svg, .flyout-link > svg {
-  width: 1.4em;
-  height: 1.4em;
-  flex-shrink: 0;
-}
-.nav-link > span, .main-link > span, .flyout-close-button > span, .flyout-link > span {
-  flex-shrink: 1;
-}
-
-.no-list, .main-container, .flyout-linklist {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-
-button {
-  font: inherit;
-  padding: 0;
-}
-
-a,
-button {
-  border-radius: 4px;
-  outline: none;
-  outline-offset: 2px;
-  /* Compatibility with button-group */
-}
-a:is(:focus-visible, :focus-within, .pretend-focus),
-button:is(:focus-visible, :focus-within, .pretend-focus) {
-  outline: 2px solid var(--post-contrast-color);
-  border-radius: 4px;
-}
-
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-
-.box > *:first-child {
-  margin-top: 0;
-}
-.box > *:last-child {
-  margin-bottom: 0;
-}
-
-.mirrored {
-  transform: scaleX(-1);
-}
-
-.rotate-270 {
-  transform: rotate(270deg);
-}
-
-.bold {
-  font-weight: 700;
-}
-
-.light {
-  font-weight: 300;
-}
-
-.d-flex {
-  display: flex;
-}
-
-.d-inline-flex {
-  display: inline-flex;
-}
-
-.align-items-center {
-  align-items: center;
-}
-
-@media (min-width: 1441px) {
-  .wide-container {
-    margin: 0 auto;
-    max-width: 1440px;
-  }
-}
-
-@media (max-width: 599.98px) {
-  .container {
-    padding-right: 16px;
-    padding-left: 16px;
-  }
-}
-@media (min-width: 600px) and (max-width: 1023.98px) {
-  .container {
-    padding-right: 32px;
-    padding-left: 32px;
-  }
-}
-@media (min-width: 1024px) {
-  .container {
-    padding-right: 40px;
-    padding-left: 40px;
-  }
-}
-
-@media (max-width: -0.02px) {
-  .hidden-xs {
-    display: none;
-  }
-}
-
-@media (max-width: 399.98px) {
-  .hidden-sm {
-    display: none;
-  }
-}
-
-@media (max-width: 599.98px) {
-  .hidden-rg {
-    display: none;
-  }
-}
-
-@media (max-width: 779.98px) {
-  .hidden-md {
-    display: none;
-  }
-}
-
-@media (max-width: 1023.98px) {
-  .hidden-lg {
-    display: none;
-  }
-}
-
-@media (max-width: 1279.98px) {
-  .hidden-xl {
-    display: none;
-  }
-}
-
-@media (max-width: 1440.98px) {
-  .hidden-xxl {
-    display: none;
-  }
-}
-
-:host {
-  --host-window-height: var(--window-height, 100vh);
-  --calculated-header-height: calc(var(--header-height) + 1px);
-  display: block;
-  min-width: 0;
-  height: var(--header-height);
-}
-
-:host(.no-animation) * {
-  animation: none !important;
-  transition: none !important;
-}
-
-@media (min-width: 1024px) {
-  .main-navigation,
-  .main-container,
-  .main-container li,
-  .main-link {
-    height: 100%;
-  }
-}
-
-.main-navigation {
-  font-size: 1.125rem;
-}
-@media (min-width: 1024px) {
-  .main-navigation {
-    font-size: 1rem;
-    margin: 0 0.75rem;
-  }
-}
-@media (min-width: 1280px) {
-  .main-navigation {
-    font-size: 1.125rem;
-  }
-}
-@media (min-width: 1441px) {
-  .main-navigation {
-    font-size: 1.25rem;
-  }
-}
-@media (max-width: 1023.98px) {
-  .main-navigation {
-    position: absolute;
-    top: var(--calculated-header-height);
-    left: 0;
-    background: white;
-    height: calc(var(--host-window-height) - var(--calculated-header-height));
-    width: 100%;
-    margin: 0;
-    overflow: hidden scroll;
-    -webkit-overflow-scrolling: touch;
-    overscroll-behavior: contain;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    z-index: -1;
-    visibility: hidden;
-    transform: translateY(-100%);
-    transition: transform 0.35s, visibility 0.35s;
-  }
-}
-@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
-  .main-navigation {
-    transition: none;
-  }
-}
-@media (max-width: 1023.98px) {
-  .main-navigation.open {
-    transform: translateY(0);
-    visibility: visible;
-  }
-}
-
-.main-container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-@media (max-width: 1023.98px) {
-  .main-container {
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
-    padding-top: 2.5rem;
-    padding-bottom: 2.5rem;
-  }
-  .main-container > li + li {
-    border-top: 1px solid hsl(0, 0%, 90%);
-  }
-}
-@media (min-width: 1024px) {
-  .main-container {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-.main-container > li {
-  flex: 0 1 auto;
-  min-width: 0;
-}
-
-.main-link {
-  display: flex;
-  align-items: center;
-  padding-right: 0.75rem;
-  padding-left: 0.75rem;
-  text-align: left;
-  cursor: pointer;
-  width: 100%;
-}
-@media (min-width: 1024px) {
-  .main-link svg {
-    display: none;
-  }
-}
-@media (max-width: 1023.98px) {
-  .main-link {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 300;
-    padding: 0.625rem 0;
-    width: 100%;
-    text-align: left;
-  }
-  .main-link svg {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-}
-.main-link span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.main-link,
-.flyout-link {
-  position: relative;
-  color: black;
-}
-.main-link::after,
-.flyout-link::after {
-  content: "";
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  width: 100%;
-  height: 4px;
-  background-color: transparent;
-  opacity: 0;
-  transform: scaleX(0.8);
-  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-@media (prefers-reduced-motion: reduce) {
-  .main-link::after,
-  .flyout-link::after {
-    transition: none;
-  }
-}
-.main-link:hover::after, .main-link.focus::after,
-.flyout-link:hover::after,
-.flyout-link.focus::after {
-  background-color: hsl(0, 0%, 80%);
-  opacity: 1;
-  transform: scale(1);
-  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.main-link.active,
-.flyout-link.active {
-  font-weight: 700;
-}
-.main-link.active::after,
-.flyout-link.active::after {
-  background-color: #fc0;
-  opacity: 1;
-  transform: scale(1);
-}
-
-.flyout {
-  left: 0;
-  width: 100%;
-  background: white;
-  padding-bottom: 3rem;
-  overflow: auto;
-  overscroll-behavior: contain;
-  visibility: hidden;
-}
-@media (min-width: 1024px) {
-  .flyout {
-    position: absolute;
-    top: 100%;
-    max-height: calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);
-    z-index: -1;
-    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4);
-    transform: translateY(-100%);
-  }
-  .flyout.open {
-    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
-    transform: translateY(0);
-  }
-}
-@media (max-width: 1023.98px) {
-  .flyout {
-    position: fixed;
-    top: 0;
-    height: 100%;
-    z-index: 1;
-    transform: translateX(100%);
-  }
-  .flyout.open {
-    transform: translateX(0);
-  }
-}
-.flyout.open {
-  visibility: visible;
-}
-.flyout.animate {
-  transition: transform 0.35s, visibility 0.35s, box-shadow 0.35s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .flyout.animate {
-    transition: none;
-  }
-}
-
-.flyout-nav {
-  display: flex;
-  justify-content: space-between;
-  min-height: 3.5rem;
-  box-sizing: content-box;
-}
-
-.flyout-row {
-  display: flex;
-  gap: 1.5rem;
-}
-@media (max-width: 1023.98px) {
-  .flyout-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-}
-@media (max-width: 599.98px) {
-  .flyout-row {
-    grid-template-columns: 1fr;
-  }
-}
-
-.flyout-column {
-  flex: 1;
-  max-width: 25%;
-}
-@media (max-width: 1023.98px) {
-  .flyout-column {
-    max-width: none;
-  }
-}
-.flyout-column h3 {
-  margin-top: 0;
-}
-
-.flyout-back-button {
-  display: flex;
-  align-items: center;
-  font-size: 1rem;
-  font-weight: 400;
-  cursor: pointer;
-}
-@media (max-width: 599.98px) {
-  .flyout-back-button {
-    padding-right: 16px;
-    padding-left: 16px;
-  }
-}
-@media (min-width: 600px) and (max-width: 1023.98px) {
-  .flyout-back-button {
-    padding-right: 32px;
-    padding-left: 32px;
-  }
-}
-@media (min-width: 1024px) {
-  .flyout-back-button {
-    padding-right: 40px;
-    padding-left: 40px;
-  }
-}
-.flyout-back-button svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-@media (min-width: 1024px) {
-  .flyout-back-button {
-    display: none;
-  }
-}
-
-.flyout-close-button {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  padding: 0 1.5rem;
-  cursor: pointer;
-}
-.flyout-close-button svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-@media (max-width: 1023.98px) {
-  .flyout-close-button {
-    display: none;
-  }
-}
-
-.flyout-linklist li {
-  border-top: 1px solid hsl(0, 0%, 90%);
-}
-.flyout-linklist:first-child > li {
-  border-top-color: transparent;
-}
-
-.flyout-link {
-  display: block;
-  padding: 0.75rem 0;
-}
-
-.flyout-title {
-  margin: 2.5rem 0 1.5rem 0;
-}
-@media (min-width: 1024px) {
-  .flyout-title {
-    display: none;
-  }
-}
+.flyout-nav,.flyout-column h3{font-size:.9375rem}@media(min-width: 600px){.flyout-nav,.flyout-column h3{font-size:1rem}}@media(min-width: 1024px){.flyout-nav,.flyout-column h3{font-size:1.0625rem}}.flyout-title{font-size:1.0625rem}@media(min-width: 600px){.flyout-title{font-size:1.25rem}}@media(min-width: 1024px){.flyout-title{font-size:1.5rem}}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:700;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:700;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff") format("woff")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link,.main-link,.flyout-close-button,.flyout-link{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);transition:color 200ms;background-color:rgba(0,0,0,0);box-shadow:none;border:0;margin:0;cursor:pointer;display:flex;align-items:center;gap:.5rem}.nav-link:is(:focus-visible,:focus-within,.pretend-focus),.main-link:is(:focus-visible,:focus-within,.pretend-focus),.flyout-close-button:is(:focus-visible,:focus-within,.pretend-focus),.flyout-link:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.main-link:hover,.flyout-close-button:hover,.flyout-link:hover,.nav-link:focus,.main-link:focus,.flyout-close-button:focus,.flyout-link:focus{color:#000}.nav-link:is(:focus-visible,:focus-within,.pretend-focus),.main-link:is(:focus-visible,:focus-within,.pretend-focus),.flyout-close-button:is(:focus-visible,:focus-within,.pretend-focus),.flyout-link:is(:focus-visible,:focus-within,.pretend-focus){z-index:1;position:relative}.nav-link>svg,.main-link>svg,.flyout-close-button>svg,.flyout-link>svg{width:1.4em;height:1.4em;flex-shrink:0}.nav-link>span,.main-link>span,.flyout-close-button>span,.flyout-link>span{flex-shrink:1}.no-list,.main-container,.flyout-linklist{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{box-sizing:border-box}:host{font-family:"Frutiger Neue For Post",system-ui,sans-serif}button{font:inherit;padding:0}a,button{border-radius:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media(forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{transform:scaleX(-1)}.rotate-270{transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.align-items-center{align-items:center}@media(min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media(max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media(min-width: 600px)and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media(min-width: 1024px){.container{padding-right:40px;padding-left:40px}}@media(max-width: -0.02px){.hidden-xs{display:none}}@media(max-width: 399.98px){.hidden-sm{display:none}}@media(max-width: 599.98px){.hidden-rg{display:none}}@media(max-width: 779.98px){.hidden-md{display:none}}@media(max-width: 1023.98px){.hidden-lg{display:none}}@media(max-width: 1279.98px){.hidden-xl{display:none}}@media(max-width: 1440.98px){.hidden-xxl{display:none}}:host{--host-window-height: var(--window-height, 100vh);--calculated-header-height: calc(var(--header-height) + 1px);display:block;min-width:0;height:var(--header-height)}:host(.no-animation) *{animation:none !important;transition:none !important}@media(min-width: 1024px){.main-navigation,.main-container,.main-container li,.main-link{height:100%}}.main-navigation{font-size:1.125rem}@media(min-width: 1024px){.main-navigation{font-size:1rem;margin:0 .75rem}}@media(min-width: 1280px){.main-navigation{font-size:1.125rem}}@media(min-width: 1441px){.main-navigation{font-size:1.25rem}}@media(max-width: 1023.98px){.main-navigation{position:absolute;top:var(--calculated-header-height);left:0;background:#fff;height:calc(var(--host-window-height) - var(--calculated-header-height));width:100%;margin:0;overflow:hidden scroll;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:space-between;z-index:-1;visibility:hidden;transform:translateY(-100%);transition:transform .35s,visibility .35s}}@media(max-width: 1023.98px)and (prefers-reduced-motion: reduce){.main-navigation{transition:none}}@media(max-width: 1023.98px){.main-navigation.open{transform:translateY(0);visibility:visible}}.main-container{display:flex;align-items:center;justify-content:flex-start}@media(max-width: 1023.98px){.main-container{flex-direction:column;align-items:stretch;justify-content:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}.main-container>li+li{border-top:1px solid #e6e6e6}}@media(min-width: 1024px){.main-container{padding-right:0;padding-left:0}}.main-container>li{flex:0 1 auto;min-width:0}.main-link{display:flex;align-items:center;padding-right:.75rem;padding-left:.75rem;text-align:left;cursor:pointer;width:100%}@media(min-width: 1024px){.main-link svg{display:none}}@media(max-width: 1023.98px){.main-link{display:flex;justify-content:space-between;align-items:center;font-weight:300;padding:.625rem 0;width:100%;text-align:left}.main-link svg{width:1.5rem;height:1.5rem}}.main-link span{overflow:hidden;text-overflow:ellipsis}.main-link,.flyout-link{position:relative;color:#000}.main-link::after,.flyout-link::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:4px;background-color:rgba(0,0,0,0);opacity:0;transform:scaleX(0.8);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1),transform .25s cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){.main-link::after,.flyout-link::after{transition:none}}.main-link:hover::after,.main-link.focus::after,.flyout-link:hover::after,.flyout-link.focus::after{background-color:#ccc;opacity:1;transform:scale(1);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1),transform .25s cubic-bezier(0.4, 0, 0.2, 1)}.main-link.active,.flyout-link.active{font-weight:700}.main-link.active::after,.flyout-link.active::after{background-color:#fc0;opacity:1;transform:scale(1)}.flyout{left:0;width:100%;background:#fff;padding-bottom:3rem;overflow:auto;overscroll-behavior:contain;visibility:hidden}@media(min-width: 1024px){.flyout{position:absolute;top:100%;max-height:calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);z-index:-1;box-shadow:0 0 1px 0 rgba(0,0,0,.4);transform:translateY(-100%)}.flyout.open{box-shadow:0 0 8px 0 rgba(0,0,0,.4);transform:translateY(0)}}@media(max-width: 1023.98px){.flyout{position:fixed;top:0;height:100%;z-index:1;transform:translateX(100%)}.flyout.open{transform:translateX(0)}}.flyout.open{visibility:visible}.flyout.animate{transition:transform .35s,visibility .35s,box-shadow .35s}@media(prefers-reduced-motion: reduce){.flyout.animate{transition:none}}.flyout-nav{display:flex;justify-content:space-between;min-height:3.5rem;box-sizing:content-box}.flyout-row{display:flex;gap:1.5rem}@media(max-width: 1023.98px){.flyout-row{display:grid;grid-template-columns:1fr 1fr}}@media(max-width: 599.98px){.flyout-row{grid-template-columns:1fr}}.flyout-column{flex:1;max-width:25%}@media(max-width: 1023.98px){.flyout-column{max-width:none}}.flyout-column h3{margin-top:0}.flyout-back-button{display:flex;align-items:center;font-size:1rem;font-weight:400;cursor:pointer}@media(max-width: 599.98px){.flyout-back-button{padding-right:16px;padding-left:16px}}@media(min-width: 600px)and (max-width: 1023.98px){.flyout-back-button{padding-right:32px;padding-left:32px}}@media(min-width: 1024px){.flyout-back-button{padding-right:40px;padding-left:40px}}.flyout-back-button svg{width:1.5rem;height:1.5rem}@media(min-width: 1024px){.flyout-back-button{display:none}}.flyout-close-button{display:flex;align-items:center;margin-left:auto;padding:0 1.5rem;cursor:pointer}.flyout-close-button svg{width:1.5rem;height:1.5rem}@media(max-width: 1023.98px){.flyout-close-button{display:none}}.flyout-linklist li{border-top:1px solid #e6e6e6}.flyout-linklist:first-child>li{border-top-color:rgba(0,0,0,0)}.flyout-link{display:block;padding:.75rem 0}.flyout-title{margin:2.5rem 0 1.5rem 0}@media(min-width: 1024px){.flyout-title{display:none}}

package/dist/collection/components/post-main-navigation/post-main-navigation.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { throttle } from 'throttle-debounce';
 import { state } from '../../data/store';
 import { userPrefersReducedMotion } from '../../services/ui.service';