.navigation {
  background: $color-brand--white;

  .logo {
    display: inline-block;
    flex-shrink: 0;
    width: 150px;

    svg {
      height: $baseline * 3; // provide SVG height to fix IE issues
    }
  }

  &__top {
    align-items: center;
    // border-bottom: 1px solid $color-alpha--two-30;
    display: flex;
    height: $baseline * 7;
  }

  &--only-top {
    // modifyer to hide all but top-menu items
    .navigation__menu--sub,
    .breadcrumb,
    .navigation__bottom {
      display: none;
    }
  }

  // service menu
  &__service {
    align-items: center;
    display: flex;
    margin-left: auto;
    z-index: 3;

    &-item {
      line-height: $icon-size;
      margin-left: $spacing--s;
    }
  }

  span.favorites__counter {
    display: block;
    margin-left: $spacing--xs;
  }

  //breadcrumb
  .breadcrumb__link {
    color: $color-brand--six;
    transition: none;

    &:hover {
      color: $color-brand--one;
      text-decoration: none;
    }
  }
}

// viewport s - m
@include viewport--l('inversed') {
  .modal--navigation {
    transition: visibility;
    visibility: hidden;
    z-index: 3;

    & .bg-brand--light {
      opacity: 0;
      transition: all $transition-duration--fast $transition-duration;
    }

    .modal__dialog {
      &::before {
        opacity: 0;
      }
    }

    .modal__header {
      border-bottom: 1px solid transparent;
      height: $baseline * 7;
      opacity: 1;
      transform: translateY(0);
      transition-duration: 0.4s; // 0.4s is the menu duration

      &--divider-out {
        transition: border $transition-duration--fast;
      }

      &--divider-in {
        transition: border $transition-duration--fast;
      }
    }

    .modal__main {
      padding-left: 25px;
      padding-right: 25px;
      transition: all $transition-duration--fast ease-in;
    }

    .modal__footer {
      transition: all $transition-duration--fast ease-in;
    }

    // Active
    &.modal--active {
      transition: all;
      visibility: visible;
      z-index: 2;

      .bg-brand--light {
        opacity: 1;
        transition: all $transition-duration;
      }

      .modal__main {
        padding-top: $spacing--xs;
        transform: translateY(0px);
        transition: transform $transition-duration ease-out 0.15s,
          opacity $transition-duration ease-out 0.15s;
      }

      .modal__footer {
        transition: transform $transition-duration--fast ease-out 0.25s;
      }
    }
  }

  .navigation {
    .logo {
      position: relative;
      z-index: 7;

      svg {
        transition: fill 0.25s 0.15s;
      }
    }

    &__service {
      margin-top: $baseline * 0.2;

      &-link {
        align-items: center;
        display: flex;
      }
    }

    //hamburger
    .button--hamburger {
      .icon--hamburger,
      .icon--hamburger::before,
      .icon--hamburger::after {
        background: $color-brand--black;
      }
    }

    //breadcrumb
    .breadcrumb__link::before {
      top: 9px;
      background-color: $color-brand--six;
    }

    &__bottom {
      display: flex;
      padding-bottom: $spacing--s;
      border-top: 1px solid $color-alpha--two-30; // replaces border-bottom on main nav.

      & .breadcrumb,
      & .language__dropdown {
        @include font-style('body--m');
        height: $baseline * 2.5;
        margin-top: $spacing--xs;
      }
    }

    // accordion
    &-accordion {
      &__sub {
        margin-bottom: $spacing--m;
        margin-top: $baseline * 0.3;

        a {
          @include font-style('body--m');
          color: $color-brand--six;
          text-decoration: none;
        }

        a:hover,
        a:active {
          color: $color-brand--one;
          text-decoration: none;
        }

        li + li {
          margin-top: $spacing--xs;
        }
      }

      .link-list__link a {
        @include font-style('title--xs-slim');
        color: $color-brand--black;
        text-decoration: none;
      }

      .collapsible__button {
        cursor: pointer;
      }

      .collapsible__trigger,
      .link-list__link {
        @include font-style('title--xs-slim');
        cursor: auto;
      }
    }
  }
}

.header .navigation-accordion .collapsible__button {
  &::before,
  &::after {
    background: $color-brand--one; //overrule accordion with color background
  }
}

// viewport s - m : styling changes when nav modal opens
@include viewport--l('inversed') {
  .modal-nav-open {
    .navigation {
      // remove element from stacking context
      position: static;
    }

    .modal--navigation .modal__header--divider {
      border-bottom: 1px solid $color-alpha--two-30;
    }

    .logo {
      position: relative;
      z-index: 7;

      svg {
        fill: $color-brand--one;
        transition: fill ease-in 0.25s 0.15s;
      }
    }
  }
}

// M included because navigation adapts to tablet view showing only initials and no full name.
@include viewport--m {
  .navigation__top {
    padding-top: 0;
  }

  // align modal with logo and hamburger.
  // no padding bottom because that is a general modal css rule.
  .modal--navigation {
    .modal__main,
    .modal__footer {
      padding-left: 50px;
      padding-right: 50px;
    }
  }
}

// viewport l
@include viewport--l {
  .navigation {
    // min-height: $baseline * 16.6; // make navigation 166px tall even if sub nav is not available
    padding-bottom: 20px;
    position: relative;
    z-index: 2;

    &--spacing {
      padding-bottom: $spacing--s;
    }

    &.navigation--only-top {
      padding-bottom: $spacing--xs;
    }

    &__menu-item,
    &__menu-item a {
      @include font-style('title--xxs');
    }

    &__menu a {
      color: $color-brand--six;
      transition: color $transition-duration--fast;
      text-decoration: none;
    }

    &__menu a:hover,
    &__menu-item--active a {
      color: $color-brand--one;
      text-decoration: none;
    }

    //service menu
    &__service-link {
      color: $color-brand--one;
      transition: color $transition-duration--fast;
      text-decoration: none;

      &:hover {
        color: $color--one-130;
        text-decoration: none;
      }

      &--active {
        color: $color--one-130;
      }
    }

    &__link-bar a {
      color: $color-brand--six;
      transition: color $transition-duration--fast;
      text-decoration: none;

      &:hover {
        color: $color-brand--one;
        text-decoration: none;
      }
    }

    // wrapper
    &__wrapper {
      position: relative;
    }

    // top
    &__top {
      height: $baseline * 12.1;
      align-items: flex-end;
      position: relative;
    }

    .logo {
      left: 0;
      position: absolute;
      top: $spacing--s;
      width: 150px;

      svg {
        height: $baseline * 3; // provide SVG height to fix IE issues
      }
    }

    &__menu--sub {
      border-top: 1px solid $color-alpha--two-30; // if submenu is present put border on submenu
    }

    &__bottom {
      border-top: 1px solid $color-alpha--two-30; // replaces border-bottom __top if no submenu is available
    }

    &__menu--sub + .navigation__bottom  // accounts for different setup FFW navigation, where __bottom and .breadcrumb are separated. In Orbit these are nested.
    {
      border-top: unset;
    }

    // menu
    &__menu {
      @include font-style('body--m');
      align-items: flex-end;
      display: flex;

      &-item {
        position: relative;
      }

      li + li {
        margin-left: 25px;
      }
    }

    &__menu-item--active {
      color: $navigation-menu-active;
    }

    // main
    &__menu--main {
      margin-bottom: -1px; // make border of active items align with divider
      overflow: hidden;

      .navigation__menu-item {
        min-height: $baseline * 4.5;
        max-height: $baseline * 5.9; // allow for only two lines of text
        padding-bottom: $spacing--xs;
      }

      .navigation__menu-item--active::after {
        background: currentColor;
        bottom: 0;
        content: '';
        height: $baseline * 0.2;
        left: 0;
        position: absolute;
        width: 100%;
      }
    }

    // sub
    &__menu--sub {
      padding: $spacing--s 0;

      .navigation__menu-item,
      .navigation__menu-item a {
        @include font-style('body--m');
      }
    }

    // service menu
    &__service {
      @include font-style('body--m');
      margin-bottom: -1px;

      &-item {
        line-height: 60px;
        margin-left: $spacing--s;
        position: relative;
      }

      &-item--active a::after {
        background: currentColor;
        bottom: 0;
        content: '';
        height: $baseline * 0.2;
        left: 0;
        position: absolute;
        width: 100%;
      }

      &-link {
        display: flex;
      }

      .icon {
        align-self: center;
        color: currentColor;
        flex-shrink: 0;
      }

      .icon + span,
      .person__initials + span {
        display: none;
      }

      span.favorites__counter {
        display: block;
        margin-left: $spacing--xs;
      }

      .person__initials {
        border-color: currentColor;
        height: $baseline * 2.6;
        width: 26px;
      }

      .person__initials span {
        color: currentColor;
      }
    }

    //breadcrumb
    .breadcrumb__item + .breadcrumb__item::before {
      background-color: $color-brand--six;
    }

    // utility bar
    &__link-bar {
      position: absolute;
      right: 0;
      top: $baseline * 1;
    }

    // popover
    .popover {
      color: $color-brand--two;
      position: absolute;
      right: -20px;
      top: $baseline * 12;
      z-index: 3;

      &::before {
        right: 16px;
      }
    }
  }
}

// viewport xl
@include viewport--xl {
  .navigation {
    min-height: $baseline * 13.5; // make navigation 135px even if sub nav is not available
    &__top {
      height: $baseline * 12;
    }

    .logo {
      position: static;
      margin-bottom: $baseline * 2.4;
      margin-right: $spacing--l;
    }

    &__service {
      &-item {
        margin-left: $spacing--m;
      }

      .icon + span,
      .person__initials + span {
        display: block;
        margin-left: $spacing--xs;
      }
    }

    .popover {
      right: 0;
      top: $baseline * 9;

      &::before {
        right: $baseline * 7;
      }
    }
  }
}

// viewport xxl
@include viewport--xxl {
  .navigation {
    &__top {
      margin: 0 -30px;
      padding: ($baseline * 2.6) $spacing--m 0;
    }

    .logo {
      margin-right: $baseline * 5;
      width: 180px;

      svg {
        height: $baseline * 3.65; // provide SVG height to fix IE issues
      }
    }

    &__menu li + li {
      margin-left: $spacing--m;
    }

    &__link-bar {
      right: $spacing--m;
    }
  }
}

.modal-nav-open .navigation .button--hamburger .icon--hamburger {
  background: transparent;
}