@import 'settings';

$lightness-threshold: 70;
$navigation-logo-tag-width: 1.375rem; // 22px when 1rem is 16px
$navigation-logo-tag-height: 2.375rem; // 38px when 1rem is 16px
$navigation-logo-banner-height: 3.5rem; // legacy logo height (on large screens)
$navigation-logo-size: 1rem;
$navigation-logo-padding: calc(1.5rem + 0.1rem); // ~25.6px to align better with logos as originally designed in SVG
$sph-navigation-link: 0.3rem;
$spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
$navigation-height: calc(map-get($settings-text-p, line-height) + 2 * $spv--large); // navigation bar height based on line height and paddings

@mixin vf-p-navigation {
  // placeholders
  %navigation-link-responsive-padding-vertical {
    padding-bottom: $spv--medium;
    padding-top: $spv--medium;

    @media (min-width: $breakpoint-navigation-threshold) {
      padding-bottom: $spv--large;
      padding-top: $spv--large;
    }
  }

  %navigation-link-responsive-padding-left {
    // follows grid padding to ensure nav items on small breakpoints align with grid padding
    padding-left: map-get($grid-margin-widths, small);

    @media (min-width: $threshold-4-6-col) {
      padding-left: map-get($grid-margin-widths, default);
    }

    @media (min-width: $breakpoint-navigation-threshold) {
      padding-left: $sph--large;
    }
  }

  %navigation-link-responsive-padding-right {
    // follows grid padding to ensure nav items on small breakpoints align with grid padding
    padding-right: map-get($grid-margin-widths, small);

    @media (min-width: $threshold-4-6-col) {
      padding-right: map-get($grid-margin-widths, default);
    }

    @media (min-width: $breakpoint-navigation-threshold) {
      padding-right: $sph--large;
    }
  }

  %navigation-link-responsive-padding-horizontal {
    @extend %navigation-link-responsive-padding-left;
    @extend %navigation-link-responsive-padding-right;
  }

  %navigation-link-text {
    color: $colors--theme--text-default;
    text-decoration: none;

    &:link,
    &:visited,
    &:focus,
    &:hover {
      color: $colors--theme--text-default;
      text-decoration: none;
    }

    &:hover {
      background-color: $colors--theme--background-hover;
    }

    &[aria-pressed='true'],
    &:active {
      background-color: $colors--theme--background-active;
    }
  }

  %navigation-link {
    $properties:
      #{background-color,
      color,
      opacity};
    @extend %navigation-link-responsive-padding-horizontal;
    @extend %navigation-link-responsive-padding-vertical;
    @extend %navigation-link-text;
    @extend %vf-navigation-separator;
    @include vf-transition($properties, snap);
    @include vf-focus-themed;

    // override button styles
    background-color: transparent;
    border: none;
    border-radius: 0;

    display: block;
    font-weight: $font-weight-regular-text;
    line-height: map-get($settings-text-default, line-height);
    margin: 0;
    overflow: hidden;
    padding-left: calc(map-get($grid-margin-widths, small) + $navigation-logo-padding); // allow navigation align with tag logo text on small screens
    position: relative;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;

    @media (min-width: $threshold-4-6-col) {
      padding-left: calc(map-get($grid-margin-widths, default) + $navigation-logo-padding);
    }

    @media (min-width: $breakpoint-navigation-threshold) {
      padding-left: $sph--large;
    }
  }

  %vf-reset-horizontal-padding {
    padding-left: 0;
    padding-right: 0;
  }

  %vf-navigation-separator {
    &::before {
      background: $colors--theme--border-low-contrast;
      content: '';
      height: 1px;
      left: calc(#{map-get($grid-margin-widths, small)} + #{$sph--x-large});
      position: absolute;
      right: 0;
      top: 0;

      @media (min-width: $threshold-4-6-col) {
        left: calc(#{map-get($grid-margin-widths, default)} + #{$sph--x-large});
      }

      @media (min-width: $breakpoint-navigation-threshold) {
        content: none;
      }
    }
  }

  .p-navigation,
  .p-navigation--sliding,
  .p-navigation--reduced {
    background-color: $colors--theme--background-default;
    color: $colors--theme--text-default;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    z-index: 10;

    @media (min-width: $breakpoint-navigation-threshold) {
      flex-direction: row;
    }

    // p-search-box overrides
    .p-search-box {
      background-color: $colors--theme--background-default;
      flex: 1 0 auto;
      margin-left: map-get($grid-margin-widths, small);
      margin-right: map-get($grid-margin-widths, small);
      margin-top: -1px;
      min-width: 10em;
      order: -1;

      @media (min-width: $threshold-4-6-col) {
        margin-left: map-get($grid-margin-widths, default);
        margin-right: map-get($grid-margin-widths, default);
      }

      @media (min-width: $breakpoint-navigation-threshold) {
        // align baselines of menu items and input text
        $input-gap-top: $spv--large - $spv-nudge;

        display: flex;
        flex: 1 1 auto;
        margin: $input-gap-top 0 auto auto;
        max-width: 20rem;
        min-width: initial;
        order: 1;
      }
    }

    .u-image-position .u-image-position--right {
      order: 2; // ensure it is to the right of search
      // XXX: patch - override utility, as it positions absolutely, which leads to overlap on smaller screens.
      // Should use flex instead; But that will require changing the markup
      position: relative;
      right: initial;
    }
  }

  // navigation row
  .p-navigation__row,
  .p-navigation__row--full-width {
    display: flex;
    flex-direction: column;

    @media (min-width: $breakpoint-navigation-threshold) {
      flex-direction: row;
    }
  }

  .p-navigation__row {
    @extend %fixed-width-container;
    @extend %vf-reset-horizontal-padding;
  }

  .p-navigation__row--full-width {
    width: 100%;
  }

  .p-navigation__row--25-75 {
    // ideally we'd like to extend row only on large screens,
    // but that's not possible to use @extend inside media query
    // TODO implement with new 4/4/8 grid (`%vf-grid-row`)
    @extend %vf-row;

    // when mobile navigation is displayed, remove default row padding
    @media (width < $breakpoint-navigation-threshold) {
      padding: 0;
    }

    // when large screen navigation is displayed, use 25/75 grid split
    @media (min-width: $breakpoint-navigation-threshold) {
      // remove padding from logo banner (the grid has its own padding)
      .p-navigation__banner {
        padding-left: 0;
      }

      // shift navigation items by the size of grid margin to align with grid
      .p-navigation__items:first-child {
        margin-left: calc(-1 * $sph--large);
      }

      // if there is only one navigation items list, extend it to the full width (taking into account margin shift)
      .p-navigation__items:first-child:not(:has(+ .p-navigation__items)) {
        width: calc(100% + $sph--large);
      }

      // on medium screen sizes (6 columns) use 2/4 column split
      @media (min-width: $threshold-4-6-col) {
        > .p-navigation__banner {
          grid-column-end: span 2;
        }

        > .p-navigation__nav {
          grid-column-end: span 4;
        }
      }

      // on large screen sizes (12 columns) use 3/9 column split
      @media (min-width: $threshold-6-12-col) {
        > .p-navigation__banner {
          grid-column-end: span 3;
        }

        > .p-navigation__nav {
          grid-column-end: span 9;
        }
      }
    }
  }

  .p-navigation__item,
  .p-navigation__item--dropdown-toggle {
    @media (min-width: $breakpoint-navigation-threshold) {
      $nav-link-max-width: 20em !default;

      max-width: $nav-link-max-width;
    }

    &.is-right-shifted {
      margin-left: auto;
    }
  }

  .p-navigation__link {
    @extend %navigation-link;
  }

  .p-navigation__link--menu-toggle {
    @extend %navigation-link;

    &::after {
      @extend %icon;
      @include vf-icon-chevron-themed;
      content: '';
      display: inline-block;
      height: 1rem;
      width: 1rem;
    }

    .has-menu-open &::after {
      transform: rotate(180deg);
    }
  }

  // navigation logo
  .p-navigation__banner {
    @extend %navigation-link-responsive-padding-left;

    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    padding-right: 0;

    .p-navigation__link,
    .p-navigation__link--menu-toggle {
      // reset padding for navigation links in the navigation banner
      @extend %navigation-link-responsive-padding-horizontal;
      padding-bottom: $spv--large;
      padding-top: $spv--large;

      // remove navigation separator for navigation links in the navigation banner
      &::before {
        content: none;
      }
    }

    @media (min-width: $threshold-4-6-col) {
      padding-left: map-get($grid-margin-widths, default);
      padding-right: 0;
    }
  }

  // Styles for old navigation logo
  .p-navigation__logo {
    display: flex;
    flex: 0 0 auto;
    height: $navigation-logo-banner-height;
    margin: 0 $sph--large 0 0;

    .p-navigation__item {
      @include vf-focus-themed;

      display: flex;
    }
  }

  .p-navigation__tagged-logo {
    display: flex; // to prevent logo link from expanding full width
    margin-right: 0;

    @media (min-width: $breakpoint-navigation-threshold) {
      min-width: 13rem;
    }

    .p-navigation__logo-tag {
      align-items: flex-end;
      background-color: $color-ubuntu;
      display: flex;
      height: $navigation-logo-tag-height;
      justify-content: center;
      left: 0;
      padding-bottom: $spv-navigation-logo-bottom-position;
      position: absolute;
      top: 0;
      width: $navigation-logo-tag-width;
    }

    .p-navigation__logo-icon {
      height: $navigation-logo-size;
      width: $navigation-logo-size;
    }

    .p-navigation__logo-title {
      color: $colors--theme--text-default;
      // font sizing adjusted to match logo
      font-size: 1.3rem;
      font-weight: 300;
      line-height: $navigation-logo-size;
    }

    .p-navigation__link {
      @extend %navigation-link;

      // within logo we don't need a regular item padding
      @extend %vf-reset-horizontal-padding;
      padding-left: $navigation-logo-padding;

      &:hover {
        background-color: transparent !important;
      }

      &::before {
        content: none;
      }
    }
  }

  .p-navigation__image {
    align-self: center;
    max-height: 2rem;
    min-height: 1.5rem;
  }

  // navigation items
  .p-navigation__items {
    @extend %vf-navigation-separator;

    display: none; // hidden by default on mobile (expands is a dropdown)
    list-style: none;
    margin: -1px 0 0 0;
    padding: 0;
    position: relative;

    // remove navigation separator for the first navigation items list
    &:first-child::before {
      content: none;
    }

    @media (min-width: $breakpoint-navigation-threshold) {
      display: flex;
      flex-wrap: wrap;
      margin-top: 0; // prevents bottom border of nav from moving 1px
      position: static;
    }
  }

  .p-navigation__nav {
    display: none;
    flex-direction: column;

    @media (min-width: $breakpoint-navigation-threshold) {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-right: map-get($grid-margin-widths, default);
      width: 100%;

      // in documentation layout navigation items need to be aligned with the grid of the content
      // so we substract the navigation item padding from the grid margin
      .l-docs__main & {
        margin-left: calc(map-get($grid-margin-widths, default) - $sph--large);
      }
    }
  }

  // items inside the logo banner (for mobile menu)
  .p-navigation__banner .p-navigation__items {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0; // prevents bottom border of nav from moving 1px

    // remove separtion for navigation items in the navigation banner
    &::before {
      content: none;
    }

    @media (min-width: $breakpoint-navigation-threshold) {
      display: none;
    }
  }

  [class*='p-navigation__item'].is-selected > .p-navigation__link {
    background-color: $colors--theme--background-hover;

    @include vf-highlight-bar($colors--theme--text-default, left, true);

    @media (min-width: $breakpoint-navigation-threshold) {
      @include vf-highlight-bar($colors--theme--text-default, bottom, false);
    }
  }

  // small screen navigation toggles
  .p-navigation__toggle--close {
    display: none;
  }

  .p-navigation__toggle--open,
  .p-navigation__toggle--search {
    display: block;

    @media (min-width: $breakpoint-navigation-threshold) {
      display: none;
    }
  }

  .p-navigation__toggle--open,
  .p-navigation__toggle--close,
  .p-navigation__toggle--search {
    @extend %navigation-link-responsive-padding-horizontal;
    @extend %navigation-link-responsive-padding-vertical;
    @extend %navigation-link-text;
    @include vf-focus-themed;

    margin: 0 0 auto 0;
  }

  .p-navigation:target {
    &::after {
      display: none;
    }

    .p-navigation__nav {
      display: flex;
    }

    .p-navigation__items {
      display: block;

      @media (min-width: $breakpoint-navigation-threshold) {
        display: flex;
      }
    }

    .p-navigation__toggle--open {
      display: none;
    }

    .p-navigation__toggle--close {
      display: block;

      @media (min-width: $breakpoint-navigation-threshold) {
        display: none;
      }
    }
  }

  // STICKY NAVIGATION
  .p-navigation.is-sticky,
  // cover both --sticky and --reduced navigation
  [class^='p-navigation--'].is-sticky {
    position: sticky;
    top: 0;
    z-index: 98; // show it above all other content, but below modal/overlays and reduced navigation
  }

  // SEARCH

  // on mobile screens search box is visible inside of the mobile navigation dropdown
  .p-navigation__search {
    display: none;
    padding-top: $spv--large;

    // allow search box to take full width
    .p-search-box {
      max-width: none;
    }
  }

  .p-navigation__link--search-toggle {
    @extend %navigation-link;

    display: block;
    height: 100%; // keep the height of the navigation when 'Search' label is hidden

    padding-left: 0; // on small screens label is hidden, so we remove left padding as well
    padding-right: calc(2 * $sph--small + map-get($icon-sizes, default)); // TODO: 2x sp small, or just large?
    position: relative;

    // hide "search" label on small screens (only show the icon)
    .p-navigation__search-label {
      display: none;
    }

    // show both label and icon on large screens
    @media (min-width: $breakpoint-large) {
      .p-navigation__search-label {
        display: initial;
        padding-left: $sph--large;
      }
    }

    &::after {
      @include vf-icon-search-themed;

      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      content: '';
      display: block;
      height: $spv--large;
      pointer-events: none;
      position: absolute;
      right: calc($sph--large / 2);
      text-indent: calc(100% + 10rem);
      top: calc($spv--large + map-get($settings-text-x-small, nudge));
      width: map-get($icon-sizes, default);
    }
  }

  .p-navigation__nav .p-navigation__link--search-toggle {
    display: none;

    @media (min-width: $breakpoint-navigation-threshold) {
      display: block;
    }
  }

  // the expanding search box is only visible on large screens in navigation bar
  @media (min-width: $breakpoint-navigation-threshold) {
    .p-navigation__search {
      align-items: center;
      display: none;
      flex-grow: 1;
      padding: 0;
    }

    .p-navigation__search-overlay {
      @include vf-transition(opacity, snap);

      background-color: $colors--theme--background-overlay;
      display: block;
      height: 100%;
      left: 0;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      right: 0;
      top: 0;
      width: 100%;
      z-index: 59;
    }
  }

  // when navigation search is expanded
  .p-navigation.has-search-open,
  .p-navigation--sliding.has-search-open,
  .p-navigation--reduced.has-search-open {
    // make sure search in navigation renders on top of the overlay
    .p-navigation__nav {
      display: flex;
      position: relative;
      z-index: 60;
    }

    // hide all navigation items (including search toggle)
    .p-navigation__nav .p-navigation__items {
      display: none;
    }

    // show expanded search box
    .p-navigation__search {
      background-color: $colors--theme--background-default;
      display: flex;
      position: absolute;
      width: 100%;

      @media (min-width: $breakpoint-navigation-threshold) {
        background-color: transparent;
      }
    }

    // fade in search overlay
    .p-navigation__search-overlay {
      opacity: 0.5;
      pointer-events: all;
    }

    // change search toggle icon to close icon
    .p-navigation__link--search-toggle::after {
      @include vf-icon-close-themed;
    }
  }

  .p-navigation.has-menu-open {
    // hide all navigation items (including search toggle)
    .p-navigation__nav {
      display: flex;
    }

    .p-navigation__nav .p-navigation__items {
      display: block;

      @media (min-width: $breakpoint-navigation-threshold) {
        display: flex;
      }
    }

    // show expanded search box
    .p-navigation__search {
      display: none;
    }
  }

  // DROPDOWNS
  .p-navigation__dropdown,
  .p-navigation__dropdown--right {
    @extend %vf-has-box-shadow;

    background-color: $colors--theme--background-default;
    display: none;
    margin: 0;
    min-width: 100%;
    padding: 0;
    z-index: 5;

    @media (min-width: $breakpoint-navigation-threshold) {
      position: absolute;
      // padding applied to .p-navigation__link + line-heigh of the anchor text inside
      top: $spv--large * 2 + map-get($settings-text-default, line-height);
    }

    @media (width < $breakpoint-navigation-threshold) {
      box-shadow: none;
    }
  }

  .p-navigation__dropdown--right {
    right: 0;
  }

  .p-navigation__item--dropdown-toggle {
    position: relative;

    &::after {
      @include vf-icon-chevron-themed;

      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      content: '';
      display: block;
      height: $spv--large;
      pointer-events: none;
      position: absolute;
      right: map-get($grid-margin-widths, small);
      text-indent: calc(100% + 10rem);
      top: $spv--large;
      transform: rotate(-90deg);
      width: map-get($icon-sizes, default);

      @media (min-width: $threshold-4-6-col) {
        right: map-get($grid-margin-widths, default);
      }

      @media (min-width: $breakpoint-navigation-threshold) {
        right: calc($sph--large / 2); // position by the center of grid margin
        top: calc($spv--large + map-get($settings-text-x-small, nudge));
        transform: rotate(0deg);
      }
    }

    &.is-active {
      background: $colors--theme--background-active;

      &::after {
        transform: rotate(0deg);

        @media (min-width: $breakpoint-navigation-threshold) {
          transform: rotate(180deg);
        }
      }

      > .p-navigation__dropdown,
      > .p-navigation__dropdown--right {
        display: block;
      }
    }

    .p-navigation__link {
      // increase padding to accommodate chevron icon
      padding-right: calc(2 * $sph--small + map-get($icon-sizes, default));
    }
  }

  .p-navigation--reduced .p-navigation__dropdown.is-full-width,
  .p-navigation--sliding .p-navigation__dropdown.is-full-width {
    .p-navigation__dropdown-content--full-width {
      @extend %vf-has-box-shadow;
      @include vf-transition(transform, snap);
      background-color: $colors--theme--background-default;
      border-top: 1px solid $colors--theme--border-default;
      display: none; // hide on small screens
    }

    // on desktop display full width meganav dropdowns
    @media (min-width: $breakpoint-navigation-threshold) {
      background-color: $color-transparent;
      box-shadow: none;
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;

      // hide mobile sliding menu on full width view
      .p-navigation__dropdown-content--sliding {
        display: none;
      }

      .p-navigation__dropdown-content--full-width {
        display: block;
        transform: translateY(0);
      }
    }

    // collapsed dropdowns are animated off-screen
    &.is-collapsed .p-navigation__dropdown-content--full-width {
      transform: translateY(-101%);
    }

    // rows think they are nested (because they are inside of navigation row)
    // we need to reset them back to original state
    // TODO add support for new 4/4/8 grid (.grid-row)
    .row,
    [class*='row--'] {
      @extend %fixed-width-container--common-properties;
    }
  }

  .p-navigation__dropdown-container {
    display: none;

    .p-navigation__item--dropdown-toggle.is-active & {
      display: block;
    }
  }

  .p-navigation__dropdown-item {
    @extend %navigation-link-responsive-padding-horizontal;
    @extend %navigation-link-responsive-padding-vertical;
    @extend %navigation-link-text;
    @extend %vf-navigation-separator;

    display: block;
    padding-left: calc(#{map-get($grid-margin-widths, small)} + #{$sph--x-large}); // make dropdown items align with the tag logo text
    position: relative;
    white-space: nowrap;

    @media (min-width: $threshold-4-6-col) {
      padding-left: calc(#{map-get($grid-margin-widths, default)} + #{$sph--x-large});
    }

    @media (min-width: $breakpoint-navigation-threshold) {
      padding-bottom: $spv--medium;
      padding-left: $sph--large;
      padding-top: $spv--medium;
    }
  }

  @keyframes vf-nav-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }

  $sliding-nav-animation-settings: map-get($animation-duration, brisk) ease;

  .p-navigation--sliding.has-menu-open,
  .p-navigation--reduced.has-menu-open {
    box-shadow: $colors--theme--background-overlay 0px 0px 0px 100dvh;
    height: 100dvh;
    overflow-y: hidden;
    position: fixed;
    width: 100vw;

    @media (min-width: $breakpoint-navigation-threshold) {
      height: auto;
      overflow-y: visible;
      position: relative;
      width: auto;
    }

    .p-navigation__banner .p-navigation__items {
      display: flex;
      flex-wrap: nowrap;

      @media (min-width: $breakpoint-navigation-threshold) {
        display: none;
      }
    }
    .p-navigation__nav {
      display: block;
      height: calc(100dvh - $navigation-height);
      overflow-x: hidden;

      .p-navigation__items {
        display: block;
      }

      @media (min-width: $breakpoint-navigation-threshold) {
        display: flex;
        height: auto;
        overflow-x: visible;

        .p-navigation__items {
          display: flex;
        }
      }
    }

    .p-navigation__items:not(:first-child)::before {
      content: none;
    }
  }

  /* stylelint-disable max-nesting-depth -- allow deep nesting for sliding navigation */
  .p-navigation--sliding .p-navigation__dropdown,
  .p-navigation--reduced .p-navigation__dropdown {
    display: block;
    height: calc(100dvh - $navigation-height);
    left: 100vw;
    position: absolute;
    top: 0;
    transition: transform $sliding-nav-animation-settings;

    // set background of child elements to properly cover parent dropdown levels when scrolling
    & > * {
      background: $colors--theme--background-default;
    }

    @media (min-width: $breakpoint-navigation-threshold) {
      display: none;
      height: auto;
      left: auto;
      min-width: unset;
      top: unset;
    }

    // overlay to create fade out effect on parent level
    &::before {
      box-shadow: -100vw 0 0 0 $colors--light-theme--background-overlay;
      content: '';
      height: 100%;
      opacity: 0;
      position: absolute;
      transition: opacity $sliding-nav-animation-settings;
      width: 100%;

      @media (min-width: $breakpoint-navigation-threshold) {
        content: none;
      }
    }

    &[aria-hidden='true'] {
      overflow: hidden; // prevent scrolling when dropdown is off screen
    }

    &[aria-hidden='false'],
    &:not([aria-hidden]) {
      &::before {
        opacity: 1;
      }

      display: block;
      transform: translateX(-75vw);

      @media (min-width: $breakpoint-navigation-threshold) {
        transform: none;

        .p-navigation__item--dropdown-close {
          @media (min-width: $breakpoint-navigation-threshold) {
            display: none;
          }
        }
      }

      &.is-active {
        transform: translateX(-100vw);
      }
    }
  }

  .p-navigation--sliding .p-navigation__items,
  .p-navigation--reduced .p-navigation__items {
    transition: transform $sliding-nav-animation-settings;

    &.is-active {
      transform: translateX(-25vw);
      @media (min-width: $breakpoint-navigation-threshold) {
        transform: none;
      }
      .p-navigation__dropdown {
        transform: translateX(25vw);
        @media (min-width: $breakpoint-navigation-threshold) {
          transform: none;
        }
        &[aria-hidden='false'],
        &:not([aria-hidden]) {
          transform: translateX(-75vw);
          @media (min-width: $breakpoint-navigation-threshold) {
            transform: none;
          }
          &.is-active {
            transform: translateX(-100vw);
            @media (min-width: $breakpoint-navigation-threshold) {
              transform: none;
            }
          }
        }
      }
    }
  }
  /* stylelint-enable max-nesting-depth */

  .p-navigation--sliding,
  .p-navigation--reduced {
    // FIXME
    // We want to add some additional spacing on the bottom of the sliding dropdowns
    // so that the last item is not directly at the bottom of the screen when scrolling,
    // but because of the way it's currently implemented, the only way to achieve this
    // is to add padding to the last item in the dropdown.
    // This is a temporary solution until we can find a better way to implement this, but
    // it may require bigger restructuring of the sliding navigation.

    // top (1st) level navigation dropdown
    .p-navigation__nav .p-navigation__items,
    // 2nd level navigation dropdown (that has separate mobile and desktop versions)
    .p-navigation__dropdown-content--sliding,
    // further nested levels
    // (because of some weird style combination we have to select last child instead of adding padding on dropdown container itself)
    .p-navigation__dropdown > :last-child {
      // should be enough to make some space at the bottom
      // and workaround the issues of 100vh not taking address toolbar into account
      // this workaround might not be needed since we moved from 100vh to 100dvh
      padding-bottom: 3rem;

      @media (min-width: $breakpoint-navigation-threshold) {
        padding-bottom: 0;
      }
    }

    // Default positioning for nested dropdown buttons. Overridden by subsequent styles.
    .p-navigation__item--dropdown-toggle {
      position: initial;

      &::after {
        content: none;
      }

      .p-navigation__link::after {
        @include vf-icon-chevron-themed;

        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        display: block;
        height: $spv--large;
        pointer-events: none;
        position: absolute;
        right: map-get($grid-margin-widths, small);
        text-indent: calc(100% + 10rem);
        top: 1rem;
        transform: rotate(-90deg);
        width: map-get($icon-sizes, default);

        @media (min-width: $breakpoint-navigation-threshold) {
          right: 0.5rem;
          top: 1.2rem;
          transform: none;
        }
      }

      &.is-active > .p-navigation__link::after {
        @media (min-width: $breakpoint-navigation-threshold) {
          transform: rotate(180deg);
        }
      }
    }

    // Style for the "go back" button that closes the current level of the sidenav dropdown. Overrides base style from above
    .p-navigation__item--dropdown-close {
      .p-navigation__link::after {
        left: 1rem;
        transform: rotate(90deg);
      }
      @media (min-width: $breakpoint-navigation-threshold) {
        display: none;
      }
    }
  }
}