/**
Menu general layout styling.

Here are styles responsible mainly for setting some basic layout for mobile and desktop menu design.
 */

@use "sass:math";

// Basic styling for menu list elements.
li.we-mega-menu-li {
  padding: 0;
  display: flex;
  position: relative;
  flex-direction: column;

  @include media-breakpoint-down($navbar-mobile-breakpoint-down) {
    width: 100%;
  }

  &.mega {
    position: static;
  }
}

// Tags <a> have the same class as <li> tags. That's why here are some different rules added:
.we-mega-menu-li {
  margin: 0;

  &.with-submenu {
    top: initial;
    display: flex;
    flex-direction: column;

    &.active-trail {
      > .we-mega-menu-submenu > .we-mega-menu-submenu-inner {
        display: block;
      }
    }
  }
  .we-mega-menu-li,
  .we-megamenu-nolink {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

// Styling navigation mobile specific behavior.
@include media-breakpoint-down($navbar-mobile-breakpoint-down) {
  nav.main-navbar .navbar-inner {
    overflow: hidden;
  }

  .type-of-block {
    h2 + .field-content-wrapper {
      @include sublist-background();

      & > * {
        display: none;
        z-index: 1;
        padding: $mobile-submenu-padding;
      }

      li.nav-item > a {
        @include sublist-list-item();
      }
    }

    &.active-trail {
      .field-content-wrapper > * {
        display: block;
      }
    }
  }

  .we-mega-menu-submenu {
    @include sublist-background();

    li > a.we-mega-menu-li,
    li > span.we-mega-menu-nolink {
      @include sublist-list-item();
    }

    .we-mega-menu-submenu-inner {
      display: none;
      z-index: 1;
      padding: $mobile-submenu-padding;
    }

    .we-mega-menu-submenu {
      top: 0;
    }
  }

  .type-of-block,
  .with-submenu {
    .field--name-field-d-main-title,
    span.d-submenu-toggler {
      @include mobile-toggle;
    }

    .field--name-field-d-main-title.open,
    .we-megamenu-nolink.open span.d-submenu-toggler,
    .we-mega-menu-li.open span.d-submenu-toggler {
      @include mobile-toggle-open;
    }
  }

  // Mobile navigation overlay.
  body {
    nav#navbar-nav::before {
      content: '';
      position: fixed;
      background-color: $mobile-navigation-overlay-color;
      width: 100%;
      height: 100%;
      left: 0;
      z-index: -1;
      display: block;
      opacity: 0;
      transition: opacity $sidebar-animation-speed;
    }

    &.navbar-open {
      overflow: hidden;
      position: fixed;
      width: 100%;
      left: 0;
      height: 100%;

      nav#navbar-nav::before {
        opacity: 1;
      }
    }
  }

  // Mobile Toggler and its relation to navbar wrapper.
  button.navbar-toggler {
    display: block;
    z-index: 100;
    width: $navbar-toggler-width;
    height: $navbar-toggler-height;
    margin-right: math.div($grid-gutter-width, 4);
    padding: 0;
    border: none;
    border-radius: unset;
    outline: 0;

    .navbar-toggler-icon {
      width: $navbar-toggler-width;
      height: $navbar-toggler-height;

      &:after {
        font-family: "fontello";
        color: $navbar-toggler-color;
        font-size: $navbar-toggler-size;
        line-height: $navbar-toggler-height;
        position: relative;
      }
    }

    &[aria-expanded="false"] .navbar-toggler-icon:after {
      content: "\f008";
    }
    &[aria-expanded="true"] .navbar-toggler-icon {
      background: $menu-mobile-background;

      &:after {
        content: "\e803";
        font-size: $menu-dropdown-size;
      }
    }
  }


  // Mobile sidebar styling.
  header.header > nav.navbar-wrapper {
    position: unset;

    nav.main-navbar {
      position: absolute;
      top: $header-mobile-height;
      right: 0;
      z-index: 10;
      height: calc(100% - #{$header-mobile-height});
      align-items: start;
      pointer-events: none;
      overflow-x: hidden;

      .with-submenu {
        .we-mega-menu-li,
        span.we-megamenu-nolink {

          a.we-mega-menu-li {
            padding-right: math.div($mobile-sidebar-items-spacing, 2);
          }
        }
      }

      .navbar-inner {
        position: absolute;
        right: -#{$navbar-mobile-sidebar-width};
        display: flex;
        height: 100%;
        width: $navbar-mobile-sidebar-width;
        padding-bottom: $submenu-link-height;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: $color-odysseus;
        transition: right $sidebar-animation-speed;
      }

      &.collapse:not(.show) {
        display: block;
      }

      &.show {
        pointer-events: all;
      }

      &.open {
        .navbar-inner {
          right: 0;
        }
      }
    }

    // Mobile borders and order for some elements in the sidebar
    .region-primary-menu {
      border-bottom: $mobile-sidebar-items-border;
      padding-bottom: $mobile-sidebar-items-spacing;
      margin-top: 0;
    }
    .region-secondary-menu {
      flex-direction: column;

      .block-search-page-link {
        border-top: $mobile-sidebar-items-border;
        border-bottom: $mobile-sidebar-items-border;
        margin: $mobile-sidebar-items-spacing 0 2*$mobile-sidebar-items-spacing;
        width: 100%;

        .content {
          display: flex;
          justify-content: center;

          a {
            width: 100%;
            mask-repeat: no-repeat;
            mask-position: center;
          }
        }
      }
    }

    .secondary-menu-region {
      order: 1;
    }
  }

  // Add offset to mobile menu when user is logged in.
  body.user-logged-in {
    margin-left: 0 !important;
    header.header > nav.navbar-wrapper nav.main-navbar {
      top: calc(#{$header-mobile-height} + #{$admin-toolbar-height});
    }
  }
}

// Desktop main navigation submenus styling.
@include media-breakpoint-up($navbar-mobile-breakpoint-up) {
  .we-mega-menu-submenu {
    position: absolute;
    top: 100%;
    display: none;
    padding: 0;
    background-color: $menu-main-link-dropdown;
    color: $submenu-link-color;
    font-family: $mega-menu-submenu-font-family;
    font-weight: $mega-menu-submenu-font-weight;
    border: none;
    white-space: nowrap;
    min-width: $submenu-dropdown-min-width;
    margin-left: $submenu-offset-left;

    .we-mega-menu-submenu {
      left: 100%;
      top: 0;
      padding: 0;
    }

    // Submenu item
    li.we-mega-menu-li.with-submenu {
      > a.we-mega-menu-li,
      > span.we-megamenu-nolink {
        .d-submenu-toggler {
          @include mobile-toggle;
          margin-right: -15px;
        }
      }
    }

    a,
    span.we-mega-menu-nolink {
      color: $submenu-link-color;

      &:hover {
        color: $submenu-link-hover-color;
        text-decoration: none;
      }
    }

    .mega > & {
      left: 0;
      width: 100%;
      margin-left: 0;
      white-space: normal;
    }

    .mega > & {
      padding: $mega-menu-submenu-padding;
    }
  }

  .we-mega-menu-li {
    > a,
    > span.we-megamenu-nolink {
      padding: $menu-main-link-padding-desktop;
      line-height: $submenu-link-height;
    }

    &:hover {
      > .we-mega-menu-submenu {
        display: block;
        z-index: 3;
      }
    }
  }

  // This includes creation of grid for megamenu col classes: "span3"
  @include views-grid();
}
