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

    svg {
      height: $baseline * 1.942; // provide SVG height to fix IE issues
      width: 130px; // added for 5.2
    }
  }

  &__top {
    align-items: flex-start;
    border-bottom: 1px solid $color-alpha--four-50;
    display: flex;
    height: $baseline * 7;
    padding-top: $spacing--s;

    // new color mapping
    @include bg-variants() {
      border-color: variant-property('divider');
    }

    // background color mapping
    // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
    .bg-brand--yellow &,
    .bg-brand--turquoise &,
    .bg-brand--red & {
      border-color: $color-alpha--two-30;
    }

    .bg-brand--off-white & {
      border-color: $color--grey;
    }

    .my-environment & {
      border-bottom: none;
    }
  }

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

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

      .icon--xs {
        margin-left: 5px;
      }
    }

    .favorites__counter {
      margin-left: 10px;
    }

    .person__initials {
      align-items: center;
      box-sizing: content-box;
      border: 2px solid $color-brand--four;
      border-radius: 50%;
      display: flex;
      height: $spacing--s;
      justify-content: center;
      margin-bottom: 0;
      width: 20px;

      span {
        @include font-style('body--xs');
        color: $color-brand--four;
        left: initial;
        margin-top: -1px;
        position: initial;
        top: initial;
        transform: initial;
      }
    }

    a {
      @include bg-variants() {
        color: variant-property('navigationLinkHover');
      }
    }
  }

  &__service-my-randstad.active {
    position: relative;
    z-index: 3;
  }
}

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

    .bg-brand--off-white,
    .bg-brand--white {
      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--off-white,
      .bg-brand--white {
        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;

        .icon {
          @include bg-variants() {
            color: variant-property('iconInteractivePrimaryIdle');
          }
        }
      }
    }

    &__service-my-randstad,
    &__service-my-randstad:hover {
      text-decoration: none;
    }

    &__service-my-randstad {
      .icon--xs {
        transform-origin: center;
        transition: transform $transition-duration--fast;
      }

      &.active .icon--xs {
        transform: rotate(180deg);
      }
    }

    &__bottom {
      display: flex;
      padding-bottom: $spacing--s;

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

      .language__dropdown {
        .icon {
          @include bg-variants() {
            color: variant-property('iconInteractiveSecondaryIdle');
          }
        }
      }
    }

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

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

      .collapsible__button {
        cursor: pointer;
      }

      .collapsible__trigger,
      .link-list__link {
        cursor: auto;
      }

      .collapsible__trigger .icon,
      .collapsible__trigger .icon__toggler--active .icon /// not on hover
      {
        color: $color-brand--one;
        transition: all 0.2s ease-in-out;

        &:hover svg {
          fill: $color-brand--one;
        }
      }
    }
    // popover
    .popover {
      position: absolute;
      right: 0;
      top: $baseline * 6.9;
    }
  }

  .navigation__service-item {
    .person__initials {
      .bg-brand--yellow &,
      .bg-brand--off-white &,
      .bg-brand--white &,
      .bg-brand--turquoise &,
      .bg-brand--red & {
        border-color: $color-brand--two;

        span {
          color: $color-brand--two;
        }
      }
    }

    .favorites__counter {
      .bg-brand--yellow &,
      .bg-brand--off-white &,
      .bg-brand--white &,
      .bg-brand--turquoise &,
      .bg-brand--red & {
        color: $color-brand--two;
        margin-left: 10px;
      }

      .bg-brand--blue &,
      .bg-brand--dark-blue & {
        color: $color-brand--four;
        margin-left: 10px;
      }
    }
  }

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

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

    .collapsible__button {
      cursor: pointer;
    }

    .collapsible__trigger,
    .link-list__link {
      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--grey;
    }

    .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__service-my-randstad {
    align-items: center;
    display: flex;
    max-width: 130px;

    span.hidden-until--l {
      display: none;
    }

    .icon + span,
    .person__initials + span,
    .avatar + span {
      @include text-ellipsis;
      display: flex;
      flex: 1;
      margin-left: $spacing--xs;
    }
  }

  // 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;
    }
  }

  // popover without language toggle next to it
  .navigation__service--minimal ~ .popover::before {
    right: 80px; //was 66px
  }
}

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

    &__menu a,
    &__link-bar a,
    &__service a,
    .breadcrumb a {
      color: $color-alpha--four-50;
      transition: color $transition-duration--fast;
      text-decoration: none;

      // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
      // background color mapping
      .bg-brand--off-white &,
      .bg-brand--white &,
      .bg-brand--yellow &,
      .bg-brand--turquoise &,
      .bg-brand--red & {
        color: $color-alpha--two-70;
      }
      // ! //

      @include bg-variants() {
        color: variant-property('navigationLinkIdle');
      }
    }

    // ! deprecated
    &__menu a:hover,
    &__link-bar a:hover,
    &__service a:hover,
    .breadcrumb a:hover,
    &__menu-item--active,
    &__menu-item--active a,
    &__service-item--active a {
      color: $color-brand--four;
      text-decoration: none;
      // background color mapping
      .bg-brand--off-white &,
      .bg-brand--white &,
      .bg-brand--yellow &,
      .bg-brand--turquoise &,
      .bg-brand--red & {
        color: $color-brand--two;
      }
      // ! //

      // new color mapping
      @include bg-variants() {
        color: variant-property('navigationLinkHover');
      }
    }

    // wrapper
    &__wrapper {
      position: relative;
    }

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

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

      svg {
        height: $baseline * 2.241; // provide SVG height to fix IE issues
        width: 150px;
      }
    }

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

      &-item {
        position: relative;
      }

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

    // 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%;

        .my-environment & {
          bottom: 2px;
        }
      }
    }

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

    // 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;

        &:hover {
          color: currentColor;
        }
      }

      .icon + span,
      .person__initials + span,
      .avatar + 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;
      }
    }

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

    // min-height exception for My Environment nav
    &.my-environment {
      min-height: unset;
    }

    // light from viewport l
    &.navigation--light-from-l {
      color: returnColorCSSVar('white-alpha-50');

      .navigation__menu a,
      .navigation__link-bar a,
      .navigation__service a,
      .breadcrumb a {
        color: returnColorCSSVar('white-alpha-50');

        &:hover {
          color: returnColorCSSVar('white');
        }
      }

      .navigation__menu-item.navigation__menu-item--active,
      .navigation__menu-item.navigation__menu-item--active a {
        color: returnColorCSSVar('white');
      }

      .navigation__top {
        border-bottom-color: returnColorCSSVar('white-alpha-50');
      }

      .logo svg {
        fill: returnColorCSSVar('white');
      }

      .breadcrumb__item:before {
        background-color: returnColorCSSVar('white');
      }
    }

    &.navigation--dark-from-l {
      color: returnColorCSSVar('brand-secondary-alpha-70');

      .navigation__menu a,
      .navigation__link-bar a,
      .navigation__service a,
      .breadcrumb a {
        color: returnColorCSSVar('brand-secondary-alpha-70');

        &:hover {
          color: returnColorCSSVar('brand-secondary');
        }
      }

      .navigation__menu-item.navigation__menu-item--active,
      .navigation__menu-item.navigation__menu-item--active a {
        color: returnColorCSSVar('brand-secondary');
      }

      .navigation__top {
        border-bottom-color: returnColorCSSVar('brand-secondary-alpha-70');
      }

      .logo svg {
        fill: returnColorCSSVar('brand-primary');
      }

      .breadcrumb__item:before {
        background-color: returnColorCSSVar('brand-secondary-alpha-70');
      }
    }

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

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

    // popover without language toggle next to it
    .navigation__service--minimal ~ .popover::before {
      right: 20px; // was 18
    }
  }
}

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

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

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

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

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

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

    // popover without language toggle next to it
    .navigation__service--minimal ~ .popover::before {
      right: 80px; // was 60px
    }
  }
}

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

    .logo {
      margin-right: $baseline * 4;
      width: 160px;

      svg {
        height: $baseline * 2.689; // provide SVG height to fix IE issues
        width: 160px;
      }
    }

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

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