//
// Brandnav
// ----------------------------------------

@media (max-width: #{$grid-float-breakpoint-max}px) {
  .brandnav {
    position: absolute;
    width: 100%;
    overflow: visible;
    top: 100%;
    left: 0;
    margin-left: 0;
    margin-right: 0;
    z-index: 1;
    display: none;
    transition: margin-left .3s ease-in-out;

    .brandnav {
      top: 0;
    }

    .active > & {
      display: block;
      left: 100%;
    }

    &.brandnav-lvl-1 {
      left: 0;
      margin-top: 1px;
    }

    &.has-active {
      margin-left: -100%;
    }

    @media all and (transform-3d), (-webkit-transform-3d) {
      transition: transform .3s ease-in-out;
      perspective: 1000px;

      &.has-active {
        margin-left: 0;
        transform: translate3d(-100%, 0, 0);
      }
    }

    > ul > li {
      padding-left: 0;
      padding-right: 0;
      width: 100%;
      position: static;
    }

    > ul > li > a {
      font-size: 21px;
      @include button-variant($font-color-regular, #fff, transparent);
      padding: capline-bu(2.25, 21px) 24px baseline-bu(2.25, 21px);

      &:not(:only-child):after {
        content: '\a7';
        font-family: 'Telekom-Icon';
        float: right;
      }
    }
  }
}

@media (min-width: #{$grid-float-breakpoint}px) {
  .brandnav-lvl-1 {
    float: left;

    > ul {
      padding-top: 19px;
      padding-bottom: 22px;

      > li {
        float: left;
        position: static;
        margin-right: 24px;

        > a {
          border-radius: 3px;
          font-size: 21px;
          @include button-variant($font-color-regular, #fff, transparent);
          padding-top: capline-bu(.75, 21px) + 1px;
          padding-bottom: baseline-bu(.75, 21px) - 1px;
        }

      }

      > .active > a {
        &,
        &:focus {
          color: $color-brand;
        }
      }
    }
  }

  .brandnav-lvl-2 {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    background-color: #fff;
    margin-top: 1px;
    padding-top: 0;
    padding-bottom: 0;
    height: 0;
    overflow: hidden;

    > ul {
      margin-left: auto;
      margin-right: auto;
      @include container-fixed(24px);
      @include clearfix();
      opacity: 0;
      transition: opacity .25s $telekom-ease-out-medium;

      > li > a {
        text-transform: uppercase;
        color: $font-color-regular;
        cursor: default;
        font-weight: bold;
        font-size: $font-size-regular;
        padding-top: capline-bu(1.5, $font-size-regular) - 2px;
        padding-bottom: baseline-bu(1.5, $font-size-regular) - 1px;
      }
    }

    .active > & {
      height: auto;
      padding-top: 10px;
      padding-bottom: 18px;
      z-index: 1;

      > ul {
        opacity: 1;
      }
    }

    @media all and (transform-3d), (-webkit-transform-3d) {
      transition: transform .25s $telekom-ease-in-medium;
      perspective: 1000px;
      transform: scaleY(0);
      transform-origin: top;
      height: auto;
      transition-delay: .25s;
      padding-top: 10px;
      padding-bottom: 18px;

      .cancel {
        opacity: 0;
        transition: opacity .25s $telekom-ease-out-medium;
        transition-delay: 0s;
      }

      > ul {
        transition-delay: 0s;
      }

      .active > & {
        transform: scaleY(1);
        transition-delay: 0s;

        > ul {
          transition-delay: .25s;
        }

        .cancel {
          opacity: 1;
          transition-delay: .25s;
        }
      }
    }
  }

  .brandnav-lvl-3 > ul  > li   > a {
    @include button-variant($font-color-regular, #fff, transparent);
    font-size: $font-size-regular;
    padding-top: capline-bu(1.5, $font-size-regular) - 2px;
    padding-bottom: baseline-bu(1.5, $font-size-regular) - 1px;
  }

}

.brandnav-lvl-2-head {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-height: building-units(2.5);
  @include clearfix();
  @include container-fixed();
  display: none;
  padding-left: 12px;
  padding-right: 12px;

  @media (min-width: #{$grid-float-breakpoint}px) {
    display: block;
  }
}

.brandnav-control-up {
  display: none;

  &.in {
    display: block;
  }
}

.brandnavhead {
  min-height: building-units(6.5) - 1px;
  background-color: #fff;
  padding-left: 12px;
  padding-right: 12px;
  display: none;

  .active & {
    display: block;
  }

  @media (min-width: #{$grid-float-breakpoint}px) {
    display: none !important;
  }
}