//
// Navbar
// --------------------------------------------------
// Main nav wrapper

@navbar-collapse-bg: escape('<svg data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="200" height="780.188" viewBox="0 0 200 780.188"><title>fahne</title><path d="M0 0h200v774c-68 23.12-121-26-200-26V0z" fill="@{brand-primary}"/></svg>');
@fahne: escape('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="264" viewBox="0 0 200 264"><path d="M200,0H0V248s39,18,86,16,70-29,114-30V0Z" fill="#fff"/></svg>');

.section-nav {
  z-index: @zindex-navbar-fixed;

  position: relative;
  @media screen and (min-width: @grid-float-breakpoint) {
    //background-color: @navbar-default-bg;
    background-color: transparent;
  }

}

// Logo in der Navi
.navbar-brand {

  //Die Fahne als Hintergrund des .navbar-brand

  background: transparent url(~'data:image/svg+xml,@{fahne}') no-repeat 50% 101%;
  background-size: 100%;
  filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, .2));

  position: absolute;
  z-index: 1;
  width: 100%;
  height: 150px;

  @media screen and (min-width: @grid-float-breakpoint) and (max-width: @screen-sm-max) {
    width: 15%;
    height: 150%;
  }

  @media screen and (min-width: @screen-md) {
    width: 20%;
    height: 200%;
  }

  // Das Logo als Hintergrund von dem Pseudo
  &:before {
    content: '';
    position: absolute;

    left: 0;
    right: 0;
    top: 5%;
    bottom: 25%;

    background: transparent url(/fileadmin/templates/seralea/Resources/Public/Images/seralea.svg) no-repeat center center;
    background-size: 100% 66%;

    @media screen and (min-width: @grid-float-breakpoint) {
      top: 15%;
      background-size: 90%;
    }
  }
}

// main navbar
.navbar-main {
  .navbar-default();
  .content-width();
  padding-left: @grid-gutter-width/2;
  padding-right: @grid-gutter-width/2;
  border-width: 0;
  background-color: transparent;
  z-index: @zindex-navbar-fixed;

  /* when shown & detached position is fixed */

  .navbar-nav > li > a {
    transition: all 0.3s ease-in-out 0s;

    padding-bottom: @navbar-padding-vertical / 2;


    @media screen and (min-width: @grid-float-breakpoint) and (max-width: @screen-sm-max) {
      padding-left: 10px;
      padding-right: 10px;
    }

    &:before {
      content: "";
      position: absolute;

      left: @navbar-padding-horizontal;
      right: @navbar-padding-horizontal;
      height: 1px;
      bottom: -1px;

      background-color: fade(@navbar-default-link-hover-color, 0%);
      visibility: hidden;
      transform: scaleX(0);
      transition: all 0.3s ease-in-out 0s;
    }

    &:hover:before, &:focus:before {
      visibility: visible;
      transform: scaleX(1);
      background-color: @navbar-default-link-hover-color;
    }

  }
  li.nav-item--current > a, li.nav-item--active > a {
    color: @component-active-color !important;
    &:before {
      visibility: visible;
      transform: scaleX(1);
      background-color: @navbar-default-link-hover-color;
    }
  }
}

.dropdown-menu.nav-list {
  border-top: 1px solid @brand-primary;
  padding: 0;

  &.open {
    display: block;
  }
  > li > a {
    font-weight: inherit;
    line-height: 2;

  }
}

@media screen and (min-width: @grid-float-breakpoint) and (max-width: @screen-sm-max) {
  .navbar-main {

    max-width: inherit;
  }
}

@media screen and (max-width: @grid-float-breakpoint-max) {

  .navbar-header {
    position: absolute;
    background: transparent url(~'data:image/svg+xml,@{navbar-collapse-bg}') no-repeat center 101%;
    background-size: 100% auto;
    left: 0;
    right: 0;
    height: 170px;
  }

  .navbar-main {

    .dropdown-backdrop {
      display: none !important;
    }
    .navbar-nav > li > a {
      color: #fff;
      text-align: center;
      line-height: 1.5em;
      &:hover, &:focus {
        color: #fff;
        font-weight: 400;
      }
    }

  }

  .navbar-toggle {
    position: absolute;
    float: inherit;

    bottom: 6%;
    right: 2%;
    z-index: 2;
  }

  .navbar-collapse {

    position: absolute;
    overflow: hidden;

    background: transparent url(~'data:image/svg+xml,@{navbar-collapse-bg}') no-repeat center 101%;
    background-size: 100% auto;
    top: 0;
    left: 0;
    right: 0;
    transform: translate3d(0, -100%, 0);
    font-size: 1.5em;
    color: #fff;
    //height: 0;
    transition: transform @navbar-toggle-transistion-duration *2;
    &.open {
      transform: translate3d(0, 0%, 0);
      //height: inherit;
    }
  }

  .nav-list--language
  {
    & > li > a
    {
      padding: 10px 5px;
    }

  }

  .nav-list--level1 {
    padding-top: 162px;
    padding-bottom: 81px;
    margin-top: 0;
    margin-bottom: 0;

    .nav-item {
      a {
        color: #fff;
        border-top: 1px solid darken(@brand-primary, 3%);
      }
      &:first-child a {
        border-top: 0 none;
      }
    }
    .nav-item--current {

      .sr-only();
    }
  }

  .nav-list--level2 {
    float: inherit;
    width: 100%;
    position: relative;
    border: 0 none;
    box-shadow: inherit;
    border-radius: 0;
    text-align: center;
    background-color: darken(@brand-primary, 10%);

    padding-top: 0;
    padding-bottom: 0;
    box-shadow: inset 0px 3px 3px rgba(0, 0, 0, .1);
    .nav-item {
      a {
        color: #fff;
        line-height: 2em;
        border-top: 1px solid darken(@brand-primary, 13%);
      }
      &:first-child a {
        border-top: 0 none;
      }
    }

    &.open {
      display: block;
    }

  }

}

.modal-backdrop {
  z-index: @zindex-navbar-fixed - 1;
  height: 0;
  &.in {
    height: 100%;
  }
}

.navbar-nav.nav-list--language > li
{
  &:not(:last-child) > a:after {
    content: "|";
    padding-left: 2px;
    color: black;
  }
  & > a {
    padding-left: 1px;
    padding-right: 1px;
  }
}

