.panel.wrapper {
  display: none; // we don't need this area visible (it's only for JS)
}

.nav-sections {
  .gt-xl({
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
  });

  .lt-xl({
    .easeInOutSine(all, 250ms);

    background: @white;
    height: ~'calc(100vh - @{header--height})';
    position: fixed;
    right: -@sidenav--width;
    top: @header--height;
    width: @sidenav--width;

    &.active {
      right: 0;
    }
  });
}

.nav-sections-items {
  height: 100%;

  .lt-xl({
    display: flex;
    margin-left: -(@default--space / 4);
    margin-right: -(@default--space / 4);

    > *:nth-last-child(2) {
      margin-right: 0;
    }
  });
}

.nav-sections-item-title {
  .lt-xl({
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-basis: 100%;
    height: @default--space * 3;
    justify-content: center;
    margin-left: @default--space / 4;
    margin-right: @default--space / 4;
    text-transform: uppercase;

    a {
      &:hover,
      &:active,
      &:focus {
        text-decoration: none;
      }
    }

    &:not(.active) {
      background-color: @champagne-25;
    }
  });

  .gt-xl({
    display: none;
  });
}

.nav-sections-item-content {
  .lt-xl({
    height: ~"calc(100% - @{sidenav-tab-height})";
    left: @default--space / 4;
    margin-left: -(@default--space / 4);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: @sidenav-tab-height;
    width: 100%;

    .header.links,
    .switcher-options {
      li {
        border-bottom: 1px solid @black-10;

        a,
        .current-store {
          .p4;

          display: block;
          padding: @default--space (@default--space * 2);

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

        .current-store {
          .bold;
        }
      }
    }
  });

  .gt-xl({
    height: 100%;

    .header.links,
    .switcher-options {
      display: none;
    }
  });

  .greet.welcome {
    display: none;
  }

  .navigation {
    height: 100%;

    //
    // TOOLBAR MENU
    // =========================================================================
    .gt-xl({
      ul {
        display: inline-block;
        height: 100%;
        white-space: nowrap;
      }

      li {
        display: inline;

        &.active > a,
        &.has-active > a,
        &:hover > a {
          background-color: @champagne-25;
        }
      }

      a {
        background: @white;
        border: 1px solid transparent;
        border-bottom: 0;
        border-right: 0;
        color: @navigation--color;
        font-size: 14px;
        display: block;
        padding: @navigation--padding;
        text-decoration: none;
      }

      ul ul {
        box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.15);
        height: auto;
        left: -9999px;
        position: absolute;
        z-index: 5;
      }

      > ul {
        margin: 0 auto;

        > li {
          align-items: center;
          float: left;
          display: flex;
          height: 100%;
          position: relative;

          > a {
            align-items: center;
            display: flex;
            float: left;
            height: 100%;
            padding-bottom: 0;
            padding-top: 0;
          }
        }
      }

      ul li:hover > ul {
        left: 0;
        opacity: 1;
        top: 100%;
        visibility: visible;
      }

      ul ul li:hover > ul {
        visibility: visible;
        left: 100%;
        top: auto;
        margin-top: -((@navigation--padding * 2) + (@navigation--font-size/@rem)) - (1/@rem);
      }
    });

    //
    // SIDENAV MENU
    // =========================================================================
    .lt-xl({
      ul {
        li {
          border-bottom-color: @black-10;
          border-bottom-style: solid;
          border-bottom-width: 1px;

          a {
            .p4;

            display: block;
            padding: @default--space (@default--space * 2) @default--space (@default--space * 2);

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

          &.parent {
            background-image: data-uri('image/svg+xml;charset=UTF-8', @icon--plus);
            background-position: right (@default--space * 2) top ((@default--space * 1.5) - 1/@rem);
            background-repeat: no-repeat;
            background-size: @default--space;

            > a {
              margin-right: @default--space * 4;
              padding-right: 0;
            }
          }

          ul {
            height: 0;
            overflow: hidden;

            li {
              &:last-child {
                border: 0;
              }
            }
          }

          &.active {
            &.parent {
              background-image: data-uri('image/svg+xml;charset=UTF-8', @icon--minus);
            }

            > ul {
              border-top: 1px solid @black-10;
              height: auto;
            }
          }
        }

        li ul li {
          &.parent {
            .svg-bg-replace-fill(@icon--plus, @champagne);
          }

          &.active {
            &.parent {
              .svg-bg-replace-fill(@icon--minus, @champagne);
            }
          }

          a {
            color: @champagne;
            padding-left: @default--space * 3;
          }
        }

        li ul ul a {
          padding-left: @default--space * 4;
        }

        li ul ul ul a {
          padding-left: @default--space * 5;
        }
      }
    });
  }
}

.ifa-landingpage {
  .navigation {
    ul:last-child {
      .gt-lg({
        padding-right: 100px;
      });
    }
  }

  .language {
    nav, ul {
     height: 100%
    }

    li {
      display: inline;

      a {
        background: @white;
        border: 1px solid transparent;
        border-bottom: 0;
        border-right: 0;
        color: @navigation--color;
        display: inline-block;
        height: 100%;
        padding: 30px 1rem;
        text-decoration: none;
      }

      &.active > a,
      &.has-active > a,
      &:hover > a {
        background-color: @champagne-25;
      }
    }
  }
}
