:root {
  --navigation-space-around: 0px;
  --navigation-grid-padding: 0px;
  --navigation-height: 110px;
  --navigation-panel-shadow: var(--shadow-10);
  --navigation-panel-border-color: var(--color-static-background-light-neutral);
  --navigation-border-radius: var(--number-corner-0);
  --navigation-label-gap: var(--number-space-0);
  --navigation-search-wrapper-offset-right: 2.5rem;
  --navigation-search-wrapper-w: 14rem;
  --navigation-search-form-font-size: var(--font-size-small);
  --navigation-search-form-line-height: var(--text-line-height-variant-30);
}

.navigation-wrapper {
  transition: var(--transition-default) all;
}
.navigation-wrapper + section,
.navigation-wrapper + .section {
  padding-top: calc(var(--navigation-height) + var(--navigation-space-around) * 2 + var(--number-space-2));
}

.navigation {
  transition: var(--transition-default) all;
}
.navigation .navigation-label-wrapper .navigation-label.has-panel:hover .panel {
  clip-path: polygon(-30px -20px, 112.5% -20px, 112.5% 110%, -15% 110%);
}
.navigation .navigation-label-wrapper .navigation-label.has-panel::after {
  display: inline-block;
  position: absolute;
  top: 1.5rem;
  right: 1.25rem;
  margin-left: var(--number-space-1);
  padding: 4px;
  transform: translateY(-0.5rem) rotateZ(45deg);
  border-width: 0 2px 2px 0;
  content: "";
}
.navigation .search-wrapper {
  width: var(--navigation-search-wrapper-offset-right);
  min-width: unset;
  max-width: unset;
  height: unset;
}
.navigation .search-wrapper input {
  min-width: var(--navigation-search-wrapper-w);
  transform: translateX(calc(-100% + var(--navigation-search-wrapper-offset-right)));
}
@media (min-width: 576px) {
  .navigation .navigation-label-wrapper .navigation-label.has-panel::after {
    transform: translateY(-0.5rem) rotateZ(45deg);
  }
}
@media (min-width: 992px) {
  .navigation .search-wrapper {
    width: var(--navigation-search-wrapper-w);
  }
  .navigation .search-wrapper input {
    min-width: var(--navigation-search-wrapper-w);
    transform: unset;
  }
}
@media (min-width: 1400px) {
  .navigation {
    letter-spacing: -0.015em;
  }
  .navigation .navigation-label-wrapper .navigation-label.has-panel::after {
    position: relative;
    top: 4px;
    right: 0;
  }
  .navigation .navigation-label-wrapper .navigation-label.has-panel:hover::after {
    transform: translateY(-0.25rem) rotateZ(225deg);
  }
  .navigation .navigation-label-wrapper .navigation-label.has-panel .panel {
    top: calc((var(--navigation-height) + var(--navigation-label-font-size)) * 0.25);
  }
}

body::after {
  background: var(--color-static-background-light-primary);
  transition: none;
}
body.scroll-up, body.scroll-down {
  --navigation-wrapper-border-color: var(--color-static-background-light-variant-10);
  --navigation-height: 80px;
}
body.navigation-open::after {
  transition: unset;
}
body.navigation-open .navigation ul.navigation-label-wrapper .navigation-label.has-panel.open::after {
  transform: translateY(1.25rem) rotateZ(-135deg);
}
body.navigation-open .navigation ul.navigation-label-wrapper .navigation-label.has-panel.open .panel {
  max-height: 100%;
}
@media (min-width: 576px) {
  body.navigation-open .navigation ul.navigation-label-wrapper .navigation-label.has-panel.open::after {
    transform: translateY(1.25rem) rotateZ(-135deg);
  }
}
