.tools-navigation {
  height: 34px;
  display: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1000;

  @include breakpoint(md) {
    display: block;
  }

  .container {
    @extend %flexbox-row;
    justify-content: flex-end;
    margin: 0 auto;
  }

  li {
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;

    &:hover {
      text-decoration: none;
      color: $color-white;
      background: $color-blue-500;

      a {
        color: $color-white;
      }
    }

    &.logged-in,
    &.was-logged-in {
      display: none;
    }

    a {
      @include font-size(14);
      @extend %flexbox-row;
      align-items: center;
      padding: 0 $margin-double;
      line-height: 34px;
      color: $color-blue-500;
      text-align: left;
      white-space: nowrap;

      .pictogram {
        margin-right: $margin-half;
      }

      &:hover {
        color: $color-white;
        background: $color-blue-500;
        text-decoration: none;
      }
    }

    ul {
      display: none;
      position: absolute;
      left: 0;
      flex-direction: column;
      align-items: stretch;

      a {
        background: $color-white;
        color: $color-link-blue;
      }
    }
  }

  .lang-switch {
    @extend %flexbox-row;
    align-items: baseline;

    &:hover {
      color: inherit;
      background: inherit;
    }
  }

  .lang-switcher {
    border: 0;
    border-radius: 0;
    background-color: $color-blue-300;
  }

  .country-flag {
    height: 12px;
    width: 12px;
  }
}