/*
 *  Copyright 2018 Adobe Systems Incorporated
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@import "/apps/weretail/clientlibs/common/helpers.less";

.we-navigation {
  .cmp-navigation__group {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;

    list-style-type: none;

    @media (min-width: @screen-md-min) {
      flex-direction: row;
    }
  }

  .cmp-navigation__item {
    flex: 1 1 auto;

    &--active {
      > .cmp-navigation__item-link {
        color: @navbar-inverse-link-active-color;
      }
    }

    > .cmp-navigation__group {
      max-height: 0;
      opacity: 0;
      visibility: hidden;
      transition: all 0.35s ease-in;

      font-size: @font-size-base + 2;

      .cmp-navigation__item {
        display: block;

        flex: 1;
        flex-basis: 33%;
      }

      .cmp-navigation__item-link {
        padding: 5px 10px;
        font-size: @font-size-base;
        text-transform: none;

        &:hover,
        &:focus {
          text-decoration: underline;
        }
      }

      @media (min-width: @screen-md-min) {
        position: absolute;
        top: 100%;
        left: 0;

        flex-wrap: wrap;
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding: 40px 20%;

        background-color: rgba(0, 0, 0, 0.9);

        .cmp-navigation__item-link {
          font-size: 16px;
        }
      }
    }

    &:hover,
    &:focus {
      > .cmp-navigation__group {
        display: flex;
        max-height: 999px;

        opacity: 1;
        visibility: visible;
      }

      > .cmp-navigation__item-link {
        &:after {
          width: 95%;
          width: ~'calc(100% - 4px)';
        }
      }
    }
  }

  .cmp-navigation__item--level-0 {
    &.cmp-navigation__item--active {
      &:hover,
      &:focus {
        > .cmp-navigation__item-link {
          &:after {
            border-top-color: @navbar-inverse-link-active-color;
          }
        }
      }
    }

    > .cmp-navigation__item-link {
      position: relative;

      &:after {
        content: '';

        display: block;
        margin: -5px auto 3px;
        border-top: 2px solid @gray-dark;
        width: 0;

        transition: all @transition-bounce;

        @media (min-width: @screen-md-min) {
          position: absolute;
          left: 50%;
          bottom: -3px;

          border-top-color: #fff;

          transform: translateX(-50%);
        }
      }
    }
  }

  .cmp-navigation__item-link {
    display: inline-block;
    padding: 10px;

    line-height: @line-height-computed;
    text-decoration: none;
    text-transform: uppercase;

    color: #fff;

    @media (min-width: @screen-md-min) {
      display: block;
      padding: 18px 20px;

      text-align: center;
    }
  }
}
